微信小程序echart使用以及层级问题
效果图:
其实就是下载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对象里的样式
![](https://img2018.cnblogs.com/i-beta/1757059/201912/1757059-20191230152041387-638681680.png)
至于echart层级问题,我查找了大部分网上答案,还是没有得到比较好的解决方案;
我个人的解决方案是用一个盒子包住echart限定宽度,交互时将包住echart的盒子宽度变成0;反之在撑开;背景在做成对应颜色;总的效果就是echart消失吧;