在微信小程式中使用 echarts 圖片-例 折線圖

• 2022 年 3 月 22 日
• 筆記

首先進入echarts官方[//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