wx-charts中怎么使用微信小程序图表插件(wx-charts,微信小程序,编程语言)

微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个

支持图标类型

• 饼图 pie

• 圆环图 ring

• 线图 line

• 柱状图 column

• 区域图 area

• 雷达图 radar

如何使用？

直接引用编译好的文件 dist/charts.js（js下载地址）

.wxml中定义

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

canvas-id与new wxCharts({canvasId:”})中canvasId一致

2. 命令行

gitclonegithub.com/xiaolin3303/wx-charts.gitnpminstallrollup-gnpminstallrollup-c或者rollup--configrollup.config.prod.js

参数说明

optsObjectopts.canvasIdStringrequired微信小程序canvas-idopts.widthNumberrequiredcanvas宽度，单位为pxopts.heightNumberrequiredcanvas高度，单位为pxopts.titleObject(onlyforringchart)opts.title.nameString标题内容opts.title.fontSizeNumber标题字体大小（可选，单位为px）opts.title.colorString标题颜色（可选）opts.subtitleObject(onlyforringchart)opts.subtitle.nameString副标题内容opts.subtitle.fontSizeNumber副标题字体大小（可选，单位为px）opts.subtitle.colorString副标题颜色（可选）opts.animationBooleandefaulttrue是否动画展示opts.legendBoolendefaulttrue是否显示图表下方各类别的标识opts.typeStringrequired图表类型，可选值为pie,line,column,area……opts.categoriesArrayrequired(饼图、圆环图不需要)数据类别分类opts.dataLabelBooleandefaulttrue是否在图表中显示数据内容值opts.dataPointShapeBooleandefaulttrue是否在图表中显示数据点图形标识opts.xAxisObjectX轴配置opts.xAxis.disableGridBooleandefaultfalse不绘制X轴网格opts.yAxisObjectY轴配置opts.yAxis.formatFunction自定义Y轴文案显示opts.yAxis.minNumberY轴起始值opts.yAxis.maxNumberY轴终止值opts.yAxis.titleStringY轴titleopts.yAxis.disabledBooleandefaultfalse不绘制Y轴opts.seriesArrayrequired数据列表

数据列表每项结构定义

dataItemObjectdataItem.dataArrayrequired(饼图、圆环图为Number)数据dataItem.colorString例如#7cb5ec不传入则使用系统默认配色方案dataItem.nameString数据名称dateItem.formatFunction自定义显示数据内容

详见demo（具体demo git地址）

1.pie

newwxCharts({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,});}

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:windowWidth,height:200,dataLabel:false,legend:false,padding:0});

3. line

newwxCharts({canvasId:'lineCanvas',type:'line',categories:simulationData.categories,animation:true,background:'#f5f5f5',series:[{name:'成交量1',data:simulationData.data,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:windowWidth,height:200,dataLabel:false,dataPointShape:true,extra:{lineStyle:'curve'}});

4. column

newwxCharts({canvasId:'columnCanvas',type:'column',animation:true,categories:chartData.main.categories,series:[{name:'成交量',data:chartData.main.data,format:function(val,name){returnval.toFixed(2)+'万';}}],yAxis:{format:function(val){returnval+'万';},title:'hello',min:0},xAxis:{disableGrid:false,type:'calibration'},extra:{column:{width:15}},width:windowWidth,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:windowWidth,height:200});

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:windowWidth,height:200,extra:{radar:{max:150}}});