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

派大星⊙∫⊙發表於2022-03-22
微信小程式Echarts

首先進入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

相關文章