H5時代用來做圖表的插件有很多比如：ECharts、Bizcharts、JSCharts等，而這次的小程序本人選用了?ECharts?作為圖表組件。

1、選擇原因主要有3點：

• 官方某度在持續維護這個插件

• 官方推出了直接適配小程序的版本，且有demo，開蓋即食，不用遷移

• 簡單實用，覆蓋面廣且可通過配置控制包的大小，小程序畢竟大小有限制~

eCharts來自BAT中的B前端團隊，對應的小程序版本為：echarts-for-weixin

官網地址：

https://echarts.apache.org/

github地址為：

https://github.com/ecomfe/echarts-for-weixin

小程序demo地址為：

https://github.com/ecomfe/echarts-examples

2、用法

(1)官方教程：

index.json?配置如下：

{
??"usingComponents":?{
????"ec-canvas":?"../../ec-canvas/ec-canvas"
??}
}

這一配置的作用是，允許我們在?pages/bar/index.wxml?中使用??組件。注意路徑的相對位置要寫對，如果目錄結構和本例相同，就應該像上面這樣配置。

index.wxml?中創建了一個??組件：

<view?class="container">
??<ec-canvas?id="mychart-dom-bar"?canvas-id="mychart-bar"?ec="{{?ec?}}">ec-canvas>
view>

其中?ec?是一個我們在?index.js?中定義的對象，它使得圖表能夠在頁面加載后被初始化并設置。

index.js?配置：

function?initChart(canvas,?width,?height,?dpr)?{
??const?chart?=?echarts.init(canvas,?null,?{
????width:?width,
????height:?height,
????devicePixelRatio:?dpr?//?像素
??});
??canvas.setChart(chart);

??var?option?=?{
????...
??};
??chart.setOption(option);
??return?chart;
}

Page({
??data:?{
????ec:?{
??????onInit:?initChart
????}
??}
});

這對于所有 ECharts 圖表都是通用的，用戶只需要修改上面?option?的內容，即可改變圖表。option?的使用方法參見 ECharts 配置項文檔。

如何延遲加載圖表？

參見?pages/lazyLoad?的例子，可以在獲取數據后再初始化數據。

如何在一個頁面中加載多個圖表？

參見?pages/multiCharts?的例子。

如何使用 Tooltip？

目前，本項目已支持 ECharts Tooltip，但是由于 ECharts 相關功能尚未發版，因此需要使用當前本項目中?ec-canvas/echarts.js，這個文件包含了可以在微信中使用 Tooltip 的相關代碼。目前在 ECharts 官網下載的?echarts.js?還不能直接替換使用，等 ECharts 正式發版后即可。

具體使用方法和 ECharts 相同，例子參見?pages/line/index.js。

如何保存為圖片？

參見?pages/saveCanvas?的例子。

(2)本人實戰操作：

效果圖import?*?as?echarts?from?'../ec-canvas/echarts';
const?app?=?getApp();
let?chart;

function?initChart(canvas,?width,?height,?dpr)?{
??chart?=?echarts.init(canvas,?null,?{
????width:?width,
????height:?height,
????devicePixelRatio:?dpr?//?new
??});
??canvas.setChart(chart);

??chart.setOption(option);
??return?chart;
}
var?option?=?{
??title:?{
????text:?'智酷君?echarts?切換效果測試',
????left:?'center'
??},
??tooltip:?{
??????trigger:?'item',
??????formatter:?'{a}?
{b}:?{c}?(ozvdkddzhkzd%)'
??},
??legend:?{
??????orient:?'vertical',
??????left:?10,
??????data:?['AAA',?'BBB',?'CCC',?'DDD',?'EEE']
??},
??series:?[
??????{
??????????name:?'訪問來源',
??????????type:?'pie',
??????????radius:?['50%',?'70%'],
??????????avoidLabelOverlap:?false,
??????????label:?{
??????????????show:?false,
??????????????position:?'center'
??????????},
??????????emphasis:?{
??????????????label:?{
??????????????????show:?true,
??????????????????fontSize:?'30',
??????????????????fontWeight:?'bold'
??????????????}
??????????},
??????????labelLine:?{
??????????????show:?false
??????????},
??????????data:?[
??????????????{value:?335,?name:?'AAA'},
??????????????{value:?310,?name:?'BBB'},
??????????????{value:?234,?name:?'CCC'},
??????????????{value:?135,?name:?'DDD'},
??????????????{value:?1548,?name:?'EEE'}
??????????]
??????}
??]
};

Page({
??data:?{
????ec:?{
??????onInit:?initChart
????}
??},
??onLoad:?function?()?{},
??//單曲線
??line()?{
????let?option2?=?{
??????title:?{
????????text:?'同一canvas更新成折線圖',
????????left:?'center'
??????},
??????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'
??????}]
????};
????chart.setOption(option2)
??},
??//切換柱狀圖
??bar(){
????let?option3?=?{
??????title:?{
????????text:?'直接更新數據，減少性能消耗',
????????left:?'center'
??????},
??????xAxis:?{
??????????type:?'category',
??????????data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']
??????},
??????yAxis:?{
??????????type:?'value'
??????},
??????series:?[{
??????????data:?[120,?200,?150,?80,?70,?110,?130],
??????????type:?'bar',
??????????showBackground:?true,
??????????backgroundStyle:?{
??????????????color:?'rgba(220,?220,?220,?0.8)'
??????????}
??????}]
????};
????chart.setOption(option3)
??}
})

建議大家盡量使用同一個canvas對象來切換不同的圖表效果，而不是初始加載多個不同的，我們可以將?chart?對象設置為全局，然后通過?chart.setOption()?的方法來更新配置數據，可以減少性能消耗避免閃退等

(3)代碼片段：

代碼段：https://developers.weixin.qq.com/s/OOTwnsms7Cin

建議將IDE工具升級到 1.02.18以上，避免一些BUG

代碼片段導入

3、Tips

(1)包大小可以配置

在線定制地址：

https://echarts.apache.org/zh/builder.html

定制組件功能包大小

通過選擇和配置想要的功能，可以大大減少原本JS包的尺寸。

(2)數據點過多造成閃退和卡死

本人簡單測試了下，iphone7p手機在1500個左右數據點的時候，出現了小程序閃退，iphoneX 測試下來大概在2500個左右，猜測可能由于微信本身給小程序的內存有限，所以建議大家控制數據點的個數

(3)單頁面圖表canvas加載過多卡死

建議單頁面圖表加載不要超過5個canvas，盡可能共用一個圖表Canvas對象，通過動態更新數據的方式來展示內容(還有帥氣的特效)，如果一定要加載多個canvas的話，建議控制數量，提供復用性~

(4)Canvas 2d 版本要求

最新版的 ECharts 微信小程序支持微信 Canvas 2d，當用戶的基礎庫版本 >= 2.9.0 且沒有設置?force-use-old-canvas="true"的情況下，使用新的 Canvas 2d(默認)。

使用新的 Canvas 2d 可以提升渲染性能，解決非同層渲染問題，強烈建議開啟

如果仍需使用舊版 Canvas，使用方法如下：

<ec-canvas?id="xxx"?canvas-id="xxx"?ec="{{?ec?}}"?force-use-old-canvas="true">ec-canvas>

往期回顧：

• [打怪升級]小程序自定義頭部導航欄解決方案

• [拆彈時刻]小程序canvas生成海報各類問題的優化

• [填坑手冊]小程序Canvas生成海報完整版

覺得內容還行的話，可以點“在看”按鈕喲

總結

以上是生活随笔為你收集整理的canvas js 绘图插件_[开盖即食]小程序图表插件eCharts实战的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。