微信小程序echart使用以及层级问题

时间：2024-03-10 10:36:25

效果图：

 微信使用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消失吧；

 

相关文章