wx-charts微信小程序主流的图表工具

基于Canvas，体积小

支持图表类型饼图pie圆环图ring线图line柱状图column区域图area雷达图radar如何使用1.直接拷贝编译好的文件dist/wxcharts-min.js到项目中（js下载地址）

importwxChartsfrom'../../utils/wxcharts-min.js'2.wxml中定义

canvascanvas-id"pieCanvas"disable-scroll"true"class"pieCanvas"style"width:300px;height:300px;"/canvascanvas-id与newwxCharts({canvasId:''})中的canvasId一致。

Demo1.饼图pie

newwxCharts({animation:true,canvasId:'pieCanvas',type:'pie',series:[{name:'成交量1',data:15,},{name:'成交量2',data:35,},{name:'成交量3',data:78,}],width:300,height:300,})

2.圆环图ring

newwxCharts({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:300,height:300,dataLabel:false,legend:false,padding:0})3.线图line

newwxCharts({canvasId:'lineCanvas',type:'line',categories:['2016-1','2016-2','2016-3','2016-4','2016-5','2016-6','2016-7','2016-8','2016-9','2016-10'],animation:true,series:[{name:'成交量1',data:[12,10,18,16,19,13,11,10,15,14],format:function(val,name){returnval.toFixed(2)+'万';}},{name:'成交量2',data:[2,0,0,3,null,4,0,0,2,0],format:function(val,name){returnval.toFixed(2)+'万';}}],xAxis:{disableGrid:true},yAxis:{title:'成交金额(万元)',format:function(val){returnval.toFixed(2);},min:0},width:300,height:300,dataLabel:false,dataPointShape:true,extra:{lineStyle:'curve'}})4.柱状图column

newwxCharts({canvasId:'columnCanvas',type:'column',animation:true,categories:['2012','2013','2014','2015'],series:[{name:'成交量',data:[15,20,45,37],format:function(val,name){returnval.toFixed(2)+'万';}}],yAxis:{format:function(val){returnval+'万';},title:'Column',min:0},xAxis:{disableGrid:false,type:'calibration'},extra:{column:{width:15}},width:300,height:200,});

5.区域图area

newwxCharts({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){returnval.toFixed(2)+'万';}},{name:'成交量2',data:[15,20,45,37,4,80],format:function(val){returnval.toFixed(2)+'万';},}],yAxis:{title:'成交金额(万元)',format:function(val){returnval.toFixed(2);},min:0,fontColor:'#8085e9',gridColor:'#8085e9',titleFontColor:'#f7a35c'},xAxis:{fontColor:'#7cb5ec',gridColor:'#7cb5ec'},extra:{legendTextColor:'#cb2431'},width:300,height:250});6.雷达图radar

newwxCharts({canvasId:'radarCanvas',type:'radar',categories:['1','2','3','4','5','6'],series:[{name:'成交量1',data:[90,110,125,95,87,122]}],width:300,height:200,extra:{radar:{max:150}}});参数说明optsObjectopts.canvasIdStringRequired对应wxml中的canvasIdopts.typeStringRequired图表类型，可选值为：pie、line、column、area、ring、radaropts.widthNumberRequiredcanvas宽度，单位pxopts.heightNumberRequiredcanvas高度，单位pxopts.legendBoolean是否显示图表下方各类别的标识，默认trueopts.backgroundStringcanvas背景颜色，默认#fffopts.animationBoolean是否动画展示，默认trueopts.enableScrollBoolean是否开启图表可拖拽滚动，默认false，支持line、area图表类型（需配合绑定scrollStart,scroll,scrollEnd方法）opts.categoriesArrayRequired数据类别分类(pie、ring图表不需要)opts.dataLabelBoolean是否在图表中显示数据内容值，默认trueopts.dataPointShareBoolean是否在图表中显示数据点图形标识，默认trueopts.xAxisObjectX轴配置opts.xAxis.gridColorStringX轴网格颜色opts.xAxis.fontColorStringX轴数据点颜色opts.xAxis.disableGridBoolean不绘制X轴网格，默认falseopts.xAxis.typeString可选值：calibration（刻度），默认包含样式opts.yAxisObjectY轴配置opts.yAxis.formatFunction自定义Y轴文案显示opts.yAxis.minNumberY轴起始值opts.yAxis.manNumberY轴终止值opts.yAxis.titleStringY轴titleopts.yAxis.gridColorStringY轴网格颜色opts.yAxis.fontColorStringY轴数据点颜色opts.yAxis.titleFontColorStringY轴title颜色opts.yAxis.disabledBoolean不绘制Y轴，默认falseopts.extraObject其它非通用配置项opts.extra.ringWidthNumberring圆环宽度，单位pxopts.extra.lineStyleString仅对line、area图表有效，可选值：curve曲线、straight直线，默认straightopts.extra.columnObjectcolumn图表相关配置opts.extra.column.widthNumber柱状图每项的图形宽度，单位pxopts.extra.legendTextColorStringlegend文案颜色opts.seriesArrayRequired数据列表数据列表series每项参数说明

dataItemObjectdataItem.dataArrayRequired饼图、圆环图为Number数据，如果传入null，图表该处出现断点dataItem.colorString不传入则使用系统默认的配色方案dataItem.nameString数据名称dataItem.formatFunction自定义显示数据内容ring图表相关配置

opts.titleObject仅支持ring图表类型opts.title.nameString标题内容opts.title.fontSizeNumber标题字体大小，单位pxopts.title.colorString标题颜色opts.title.offsetXNumber标题横向位置偏移量，单位px，默认0opts.subtitleObject仅支持ring图表类型opts.subtitle.nameString副标题内容opts.subtitle.fontSizeNumber副标题字体大小，单位pxopts.subtitle.colorString副标题颜色opts.subtitle.offsetXNumber副标题横向位置偏移量，单位px，默认0radar图表相关配置

opts.extra.radarObjectradar图表相关配置opts.extra.radar.maxNumber数据区间最大值，用于调整数据显示的比例，默认seriesdata的最大值opts.extra.radar.labelColorString各项标识文案的颜色，默认#666opts.extra.radar.gridColorString雷达图网格颜色，默认#cccpie、ring图表相关配置

opts.disablePieStrokeBoolean不绘制pie、ring图表各区块的白色分割线，默认falseopts.extra.pieObjectpie、ring图表相关配置opts.extra.pie.offsetAngleNumber起始角度偏移度数，顺时针方向，起点为3点钟位置（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可），默认0官网https://github.com/xiaolin3303/wx-charts