效果图：
微信使用echart教程 https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
其实就是下载echart ， 将里面的ec-canvas放在components里调用；像小程序调用组件一样；
在对应js里
import * as echarts from '../../components/ec-canvas/echarts.js';
引用一下组件里的js；
就可以开始用了
function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { ... }; chart.setOption(option); return chart; }
我做的表格是折线图，带圆滑。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
建议大家使用时配合https://www.echartsjs.com/zh/cheat-sheet.html 术语查看手册来查找API；
Echart的计算很好，定义一些坐标即可
xAxis 是X轴 X轴里可以配置一些对应的样式。包括坐标轴，刻度值，刻度文字等等；Y轴与X轴对应
grid 是距离左部距离 。 由于echart是canvas生成 ，如果有边距的话，需要加上距离 ，给10%即可；
series 是图中的线数据数组 ，这个数组里包着对象，一个对象代表一条线 ； 对象里也可以对应更改样式；更多api可以在官网中查找修改；
至于图片的虚线背景即是
splitLine对象里的样式
至于echart层级问题，我查找了大部分网上答案，还是没有得到比较好的解决方案；
我个人的解决方案是用一个盒子包住echart限定宽度，交互时将包住echart的盒子宽度变成0；反之在撑开；背景在做成对应颜色；总的效果就是echart消失吧；