对于前端开发而言，数据统计模块最熟悉的老朋友就是Echarts,毕竟图形统计比起文字+数字更加直观。一直以来h5和网页的开发中使用Echarts，五花八门的样式和事件都可以通过文档+百度都可以完美实现。在接到在小程序实现饼状图，柱状图的需求时，我的内心毫无波澜，此时的我还没意识问题的严重性。直到开始开发...
首先，我的第一反应就是像开发网页那样安装Echarts依赖，但是正准备安装时我忽然意识到，事情没有想象的那么简单。Echarts使用的第一步，就是要获取生成图表的dom元素啊，而小程序是无法获取dom元素的。啊这...
当然，打工人是没那么容易认输的，马上请教我的老师——百度。好家伙，还有个微信版的Echarts,下载一个微信版的Echats，简而言之，就是专为微信小程序封装的Echarts组件，将它下载到本地的项目里面，通过引入实现对应的需求，主要我没有使用这个方法，所以具体的可以通过下载链接有详细的说明哦，附上下载链接：github.com/ecomfe/echa…
重头戏来了，为什么请教了老师但是没用上参考答案呢。因为它要下载包引入到项目里面啊（哭），众所周知，微信小程序的主包只能容纳2M，其余要通过分包去实现，而这个包推荐是放在主包的。于是我马上查看了微信小程序的开发文档，果然术业有专攻，还是得看官方啊。
1.登录微信公众开发平台（多个开发项目的，记住是登录需要引入的项目）-设置-第三方设置-插件管理-通过 wx1db9e5ab1149ea03 查找Echats插件并添加。通过申请后，就可以在小程序中使用插件啦。
2、在 app.json 中插件如下代码，AppId是指插件的AppId，不是项目的AppId，所以AppId为wx1db9e5ab1149ea03
{
"plugins": {
"echarts": {
"version": "1.0.3",
"provider": "wx1db9e5ab1149ea03"
}
}
}
3、微信开发中，如果组件按需引入，就需要在对应页面的json 配置文件进行配置，插件如下代码：
{
"usingComponents": {
"chart": "plugin://echarts/chart"
}
}
4、在 wxml 中需要展示图表的位置，插入如下代码：
<chart chart-class="chart" option="{{ option }}" bindinstance="onInstance" />
对应的参数属性，我截图文档上面的内容，放下面啦
像网页一样在option里面配置对应的项来达到需求就可以啦，这边就不多说了。
重点说说"bindinstance",以饼状图为例，需求是：饼状图用于统计不同分类，然后饼状图下面是数据列表代表不同分类下的订单。效果是要实现默认其中一个分类高亮，然后点击以后切换饼状图高亮区及根据点击的分类请求接口，渲染底部列表
onInstance({
detail: instance
}) {
let that = this
//设置默认高亮为饼状图数据的第一项
instance.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
//instance 为返回的实例
instance.on('click', function(parmas) {
//that.data.pieOption.series[0].data为饼状图的data数据
that.data.pieOption.series[0].data.forEach((item, index) => {
//parmas.dataIndex为当前点击的index
if (parmas.dataIndex != index) {
//判断如果不是当前点击的分类，移除高亮
instance.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
});
} else {
//当前点击分类
that.setData({
cateId: item.id
})
//请求列表接口
that._getSelectByCateId()
}
})
})
},
以上就是bindinstance的对应使用啦，撒花~
最后再插一个柱状图三柱合一渐变色的实现，先看网页版
itemStyle: {
color: function (params) {
if (
datax[1][params.dataIndex] == 0 &&
datax[2][params.dataIndex] == 0 &&
datax[3][params.dataIndex] == 0
) {
return "#00c4e2";
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "#00c4e2",
},
{
offset: 0,
color: "#4D85F7",
},
]);
}
},
},
但微信小程序我们不像网页import echats，而只是在json里面配置了插件，那自然在js里面就没有new echarts.graphic.LinearGradient啊，这可咋整.不要急。只能是用回最原始的方法了...
itemStyle: {
color: function(params) {
if (
datax[1][params.dataIndex] == 0 &&
datax[2][params.dataIndex] == 0 &&
datax[3][params.dataIndex] == 0
) {
return "#00c4e2";
} else {
return {
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0,
color: '#4D85F7' // 0% 处的颜色
},
{
offset: 1,
color: '#00c4e2' // 100% 处的颜色
}
]
}
}
},
},
好啦，今天的code就到这里啦，周五万岁！！！
