首先進入echarts官方[https://echarts.apache.org/handbook/zh/get-started/]。這邊只需要在小程序中簡單應用一下echarts折線圖 所以不需要把整體下載下來，這邊只需要下載幾個簡單的東西下來即可！
1. 在小程序中新建一個組件，如下
2. 建好文件之后還不着急寫代碼，看到我上面的圖里面不是還有兩個文件文件嗎？咱先把資源文件給干下來再說
繼續到echarts官網中 往下翻找到 應用篇 看到下面的跨平台方案-微信小程序
這邊會告訴你 需要去github上 把對應的組件以及依賴復制過來，包括上面的第一張圖里所有的文件 我們直接復制過來，將它覆蓋；
然后再界面上引用就好了 等到你把所有代碼搞定之后 你可以點擊一下上傳 好家伙 系統直接提示你
[JS 文件編譯錯誤] 以下文件體積超過 500KB，已跳過壓縮以及 ES6 轉 ES5 的處理。
componet/LineChart/echarts.js
這個問題好解決 回到echarts官網 咱們針對小程序端定制下載一個echarts.js文件即可
等了幾分鍾之后呢 你會發現下載下來的文件叫做echarts.min.js，把名字中的min去掉直接改成 然后拖到文件夾中覆蓋一下即可；
完成的代碼呢 就不放了 大概的操作流程已經再上面了 就不獻丑了
實現效果
后面還有幾點注意一下
在界面中引用的我補充一下
1.確保你的需要引用的界面json文件里 把你要引入的組件對象定義了一次
2.然后界面上就是一行簡單的使用
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>
這里的ec 一定要跟js中的ec對應 不然必報錯
3.js文件中呢
淺引用一下組件資源文件
import * as echarts from '../../componet/LineChart/echarts'; -后面引用部分的echarts不能出錯
我這里用到的地方呢 是先通過異步請求加載數據(放在onload中),然后在折線圖組件初始化時 再把數據添加進去 這邊需求問題啦 就不細細討論了
不過 初始化 總是不能少的
var chart = null;
// echart 圖標初始化
function initChart(canvas, width, height, option) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = option;
chart.setOption(option);
return chart;
}
在異步請求數據后 把對應的列表值傳入其中,像這樣
option中的參數以及其代表的含義 請自行百度,比較重要的是 series xAxis yAxis
作用分別是渲染 折線 | X軸 | Y軸 數據 用用就知道啦
當然這不是一步兩步的問題阿 只是中間個別細節是需要注意一下
然后總結一下 在js中的應用流程
首先 在onload中初始化折線圖表
然后是initChart() 賦值
這邊我是寫在了Page的同級的地方
初始化完成之后呢 咱再將異步請求后的數據放進去
主要的東西是再series中
😑2022年3月22日-Distance
之前的是模仿官方的用法 我引入后的組件又進行了一定的優化 如下：
1.首先展示一下 優化后的樣式：
2.其次 代碼流程我借鑒的幾個帖子 做了相應修改；但是前面的組件內代碼以及引入方式 我沒有動
首先是wxml界面
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ firstChart }}"></ec-canvas>
這里的 ec 注意一定要與js里data里的數據對應
然后是js代碼
在page之外 首先初始化定義兩個對象
import * as echarts from '../../componet/LineChart/echarts';
const echartList = []; //折線圖對象
var chartData= null; // 折線圖里的數據對象
Page（{
data: {
firstChart: {
// 初始化折線圖數據
onInit: function (canvas, width, height) {
chartData= echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chartData);
return chartData;
}
},
},
onLoad: function (options) {
this.getData();
},
getData: function () {
// 在這邊加載異步數據 功能業務暫時不貼 返回一個data
var ydata = data.ydata; // Y軸 數據
var xdata = data.xdata; // X軸 數據
var option01 = {
legend: {
data: ['第一列數據名字',....],
top: 2, // 距離頂部距離
left: 'center', // 標注內容位置
backgroundColor: '#FAFAFA',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
// show: true,
trigger: 'axis' // 點擊氣泡提示懸浮數據內容
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xdata
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [{
name: 'cages',
type: 'line',
smooth: true,
data: ydata,
label: { // 每一個點上的數據提示
normal: {
show: true, // 展示
position: 'right', // 文字位置
formatter: '{c}U/ml', // 文字內容
textStyle: { // 文字樣式
color: 'blue',
fontSize: '10'
}
}
}
}，
// 同上 在legend中data寫了多少條數據 這邊就要寫多
{........}，
{.......}，
}
chartData.setOption(option01, true);
},
})
最后 運行即可
界面樣式 就用一個view把canvas包裹起來就好了 ，然后 注意一點 setOption 那里 一定要對應名字！
🙄 2022.03.24