<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>

git clone github.com/xiaolin3303/wx-charts.gitnpm install rollup -gnpm installrollup -c 或者 rollup --config rollup.config.prod.js

opts             Objectopts.canvasId        String required          微信小程序canvas-idopts.width          Number required        canvas寬度，單位為pxopts.height         Number required        canvas高度，單位為pxopts.title          Object      (only for ring chart)opts.title.name       String      標題內容opts.title.fontSize     Number      標題字體大?。蛇x，單位為px）opts.title.color       String      標題顏色（可選）opts.subtitle        Object     (only for ring chart)opts.subtitle.name      String      副標題內容opts.subtitle.fontSize    Number     副標題字體大?。蛇x，單位為px）opts.subtitle.color     String     副標題顏色（可選）opts.animation        Boolean default true     是否動畫展示opts.legend         Boolen default true    是否顯示圖表下方各類別的標識opts.type          String required 圖表類型，可選值為pie, line, column, area……opts.categories       Array required    (餅圖、圓環圖不需要) 數據類別分類opts.dataLabel        Boolean default true   是否在圖表中顯示數據內容值opts.dataPointShape     Boolean default true  是否在圖表中顯示數據點圖形標識opts.xAxis          Object    X軸配置opts.xAxis.disableGrid    Boolean default false   不繪制X軸網格opts.yAxis          Object  Y軸配置opts.yAxis.format      Function      自定義Y軸文案顯示opts.yAxis.min        Number    Y軸起始值opts.yAxis.max        Number      Y軸終止值opts.yAxis.title       String    Y軸titleopts.yAxis.disabled     Boolean default false    不繪制Y軸opts.series         Array required    數據列表

dataItem           ObjectdataItem.data         Array required (餅圖、圓環圖為Number) 數據dataItem.color        String 例如#7cb5ec 不傳入則使用系統默認配色方案dataItem.name         String 數據名稱dateItem.format        Function 自定義顯示數據內容

new wxCharts({  animation: true, //是否有動畫  canvasId: 'pieCanvas',  type: 'pie',  series: [{    name: '成交量1',    data: 15,  }, {    name: '成交量2',    data: 35,  }, {    name: '成交量3',    data: 78,  }],  width: windowWidth,  height: 300,  dataLabel: true, });}

new wxCharts({  animation: true,  canvasId: 'ringCanvas',  type: 'ring',  extra: {    ringWidth: 25,    pie: {      offsetAngle: -45    }  },  title: {    name: '70%',    color: '#7cb5ec',    fontSize: 25  },  subtitle: {    name: '收益率',    color: '#666666',    fontSize: 15  },  series: [{    name: '成交量1',    data: 15,    stroke: false  }, {    name: '成交量2',    data: 35,     stroke: false  }, {    name: '成交量3',    data: 78,    stroke: false  }, {    name: '成交量4',    data: 63,     stroke: false  }],  disablePieStroke: true,  width: windowWidth,  height: 200,  dataLabel: false,  legend: false,  padding: 0});

new wxCharts({  canvasId: 'lineCanvas',  type: 'line',  categories: simulationData.categories,  animation: true,  background: '#f5f5f5',  series: [{    name: '成交量1',    data: simulationData.data,    format: function (val, name) {      return val.toFixed(2) + '萬';    }  }, {    name: '成交量2',    data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],    format: function (val, name) {      return val.toFixed(2) + '萬';    }  }],  xAxis: {    disableGrid: true  },  yAxis: {    title: '成交金額 (萬元)',    format: function (val) {      return val.toFixed(2);    },    min: 0  },  width: windowWidth,  height: 200,  dataLabel: false,  dataPointShape: true,  extra: {    lineStyle: 'curve'  }});

new wxCharts({  canvasId: 'columnCanvas',  type: 'column',  animation: true,  categories: chartData.main.categories,  series: [{    name: '成交量',    data: chartData.main.data,    format: function (val, name) {      return val.toFixed(2) + '萬';    }  }],  yAxis: {    format: function (val) {      return val + '萬';    },    title: 'hello',    min: 0  },  xAxis: {    disableGrid: false,    type: 'calibration'  },  extra: {    column: {      width: 15    }  },  width: windowWidth,  height: 200,});

new wxCharts({  canvasId: 'areaCanvas',  type: 'area',  categories: ['1', '2', '3', '4', '5', '6'],  animation: true,  series: [{    name: '成交量1',    data: [32, 45, 0, 56, 33, 34],    format: function (val) {      return val.toFixed(2) + '萬';    }  }, {   name: '成交量2',   data: [15, 20, 45, 37, 4, 80],   format: function (val) {    return val.toFixed(2) + '萬';   },  }],  yAxis: {    title: '成交金額 (萬元)',    format: function (val) {      return val.toFixed(2);    },    min: 0,    fontColor: '#8085e9',    gridColor: '#8085e9',    titleFontColor: '#f7a35c'  },  xAxis: {    fontColor: '#7cb5ec',    gridColor: '#7cb5ec'  },  extra: {    legendTextColor: '#cb2431'  },  width: windowWidth,  height: 200});

new wxCharts({  canvasId: 'radarCanvas',  type: 'radar',  categories: ['1', '2', '3', '4', '5', '6'],  series: [{    name: '成交量1',    data: [90, 110, 125, 95, 87, 122]  }],  width: windowWidth,  height: 200,  extra: {    radar: {      max: 150    }  }});