⼩程序echart使⽤以及层级问题
效果图：
使⽤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 = {setoption
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
}]
};
建议⼤家使⽤时配合术语查看⼿册来查API；
Echart的计算很好，定义⼀些坐标即可
xAxis 是X轴  X轴⾥可以配置⼀些对应的样式。包括坐标轴，刻度值，刻度⽂字等等；Y轴与X轴对应
grid 是距离左部距离。由于echart是canvas⽣成，如果有边距的话，需要加上距离，给10%即可；
series 是图中的线数据数组，这个数组⾥包着对象，⼀个对象代表⼀条线；对象⾥也可以对应更改样式；更多api可以在官⽹中查修改；⾄于图⽚的虚线背景即是
splitLine对象⾥的样式
⾄于echart层级问题，我查了⼤部分⽹上答案，还是没有得到⽐较好的解决⽅案；
我个⼈的解决⽅案是⽤⼀个盒⼦包住echart限定宽度，交互时将包住echart的盒⼦宽度变成0；反之在撑开；背景在做成对应颜⾊；总的效果就是echart消失吧；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。