需求是项目里的对比数据，占比要用柱状图和饼图，看了一下小程序开发文档，里面有个canvas，和想要的效果有些差别，于是决定用echarts来实现。问题来了，echarts官网没有小程序版本，查资料，发现是有大神已经在github上发布过了，这就很轻松了，直接去上面下载echarts， 地址：https://github.com/ecomfe/echarts-for-weixin
1，引入（wepy框架下）
将下载好的ec-canvas文件夹放到\src\libs目录下，然后在.wpy界面引入使用
2，全局定义chart变量
let chart= null
3，data中懒加载
ec: { lazyLoad: true },
4，建立元素
<!-- 图形部分 -->
<view class="chart manageChart" hidden="{{firstShow}}">
<!-- <view class="provideTitle">资金量/亿</view> -->
<ec-canvas id="initManage" canvas-id="initManage" ec="{{ ec }}" class="ec-canvas"></ec-canvas>
</view>
5，写方法，饼图
function initManage(canvas, width, height) {
// console.log(app3.xdata)
// console.log(app3.yvalue)
chart= echarts.init(canvas,null,{
width: width,
height: height
})
canvas.setChart(chart)
var option = {
tooltip: {
position: ['30%', '10%'],
trigger: 'item',
formatter: "{a} {b}: {c} ({d}%)"
},
legend: {
show: false,
orient: 'vertical',
x: 'left',
data:appManage.xdata
},
series: [
{
name:'归口统计',
type:'pie',
radius : [30, 80],
center : ['55%', '50%'],
label: {
normal: {
show: true,
fontSize: 12,
rich: {}
},
emphasis: {
show: true
}
},
itemStyle:{
normal:{
// 渐变色
color: function(params) {
// build a color map as your need.
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
color: '#92D4F1'
}, {
offset: 1,
color: '#3993BA'
}]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
color: '#B3F9C8'
}, {
offset: 1,
color: '#75C78D'
}])
];
return colorList[params.dataIndex]
}
}
},
data:appManage.managedataArray
}
]
};
chart.setOption(option);
return chart;
}
6，初始化图表，跟web端不同的写法
// 初始化发放进度图表
that.$wxpage.selectComponent('#initManage').data.ec.onInit = initManage
that.$wxpage.selectComponent('#initManage').init()
到此，饼图就画好了，上图
