微信小程序引入echars圖表組件
官網(wǎng)資源地址
https://github.com/ecomfe/echarts-for-weixin
引入圖表組件到微信小程序
下載解壓git項(xiàng)目高帖，查看目錄艾蓝，將文件夾ec-canvas，復(fù)制到小程序內(nèi)pages同級目錄
-
將解壓項(xiàng)目文件中pages的圖表展示，復(fù)制任一風(fēng)格圖表到要添加的微信小程序pages內(nèi)，并在app.json內(nèi)注冊這個路徑
注冊頁面路徑
圖表文件列表
- 具體代碼段
import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = { /*具體使用什么風(fēng)格的圖表洗搂，在這里編輯數(shù)據(jù)*/ };
chart.setOption(option);
return chart;
};
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
setTimeout(function () {
// 獲取 chart 實(shí)例的方式
// console.log(chart)
}, 2000);
}
});
- 一些注意事項(xiàng)：
- 在ec-canvas文件夾內(nèi)的echarts.js鹤盒，不能超過500kb蚕脏，否則警告侦副，且無法渲染侦锯；
解決辦法：
通過https://echarts.apache.org/zh/builder.html，進(jìn)行定制化秦驯，用到什么表格尺碰，就勾選哪個，不要都用译隘，實(shí)測后發(fā)現(xiàn)使用一個普通的柱狀圖后亲桥，echarts.js文件就已經(jīng)443kb了。
注意：
下載的文件放在 ec-canvas/echarts.js固耘，注意一定需要重命名為 echarts.js题篷，否則 ec-canvas.js 引入路徑會錯誤：
ec-canvas.js內(nèi)的依賴：
import WxCanvas from './wx-canvas';
import * as echarts from './echarts';
echars在線定制-1
echars在線定制-2
- 官方建議可以嘗試微信的分包操作，但是不會厅目，因?yàn)殚_發(fā)的都是企業(yè)身份賬號番枚，后續(xù)考慮使用webview嵌套H5，規(guī)避圖表選擇種類的限制损敷，一勞永逸的解決這個問題葫笼。
