# wechat-chart

**Repository Path**: aim-leo/wechat-chart

## Basic Information

- **Project Name**: wechat-chart
- **Description**: 小程序端，使用原生canvas api绘制图表的最佳实践。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-10-08
- **Last Updated**: 2022-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wechat-chart


## 微信小程序chart组件

### 示例

![输入图片说明](https://images.gitee.com/uploads/images/2018/1010/104411_ab04af89_1737808.jpeg "WechatIMG158.jpeg")

### 使用方法


```
import { DrawChart, DrawTip } from './lib.js'
let ctx = youCanvasObj   // eq: use wepy, get the canvas context like that: wepy.createCanvasContext('canvasId')
let chart = new DrawChart()
chart.init({
  ctx,
  setting: {
    width: 500,  // chart width
    height: 400,  // chart height
    h1Text: `图表标题`,
    h2Text: `图表副标题`,
    padding: [5, 10, 25, 15],   // chart padding
    chartMarginTop: 15,  // margin top
    background: '#f9f9f9',  // background color
  },
  xAxis: ['2018-05-01', '2018-06-01', '2018-07-01'], // x轴
  series: [  // y轴
    {
      name: '收盘价', // left series
      category: 'line', // 图表类型: 折线图(line)、柱状图(bar)
      color: '#c13d51', // 填充颜色
      coordinateColor: '#c13d51', // 坐标颜色
      data: [1.3, 2.3, 4.5, 2.4, 2.3, 4.2],  // y轴数据
    },
    {
      name: '比例',
      category: 'line',
      color: '#e6c16c',
      coordinateColor: '#e6c16c',
      isFill: true,  // 是否在线与x轴间填充底色
      data: [4.5, 8.9, 8.61, 6.66, 8.7, 6.68],
    },
  ],
})
this.page3.beginDraw()
```