在uniapp，微信小程序中使用echarts

一、使用npm或yarn安装mpvue-echars

npm install mpvue-echarts

二、可在echarts官网在线定制，下载echarts.min.js文件

ECharts 在线构建

三、在node_modules中找到mpvue-echarts，将src中的文件复制出来，作为组件，将第二步下载的echarts.min.js放进去

 四、改写echarts.vue文件

这里我直接把我项目中的代码放上来了

五、引入该组件到页面中

import mpvueEcharts from "./mpvue-echarts/echarts"
import echarts from "./mpvue-echarts/echarts.min"

六、在onInit回调中将echarts图标的参数以及数据渲染出来

initOrder(canvas, width, height) {
    let echar = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(echar)
    // 此处为配置以及数据，可在echarts官网将图表绘制完成后，复制在此处
    let option = {} 
    echar.setOption(option)
    return echar
}

七、注意事项

1.由于this指向问题，在上图initOrder中使用this会报错，如果需要将option的数据放在函数外，可以单独创建一个js文件，放入option数据，再使用import { option } from 'xxxx'引入使用。

2.如果需要获取后台数据，使用async，await，获取到数据后放入option

3.由于该组件是在uniapp开发使用，语法是vue,如果是使用微信开发者工具直接开发，需要将本文中HTML语法，data中数据的改，查，以及函数的使用改为小程序的写法。

八、总结

前端内容更新速度都很快，也许目前能使用，可能几年，几个月甚至几天就行不通了，如果本文能够帮助到大家，希望可以得到一个关注+赞，如果有什么问题，也可以在下方留下评论。有时间就会回复。本人经验不足，有什么错误，不足之处，可以在评论区指出。