微信小程序echart使用以及層級問題

效果圖：

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