在uni-app項(xiàng)目引用Echarts
demo附件：https://github.com/chellel/echarts-uniapp
按照 uni-app中使用Echarts的實(shí)踐總結(jié) 的步驟引用echarts
先在uni-app新建項(xiàng)目访雪，然后在命令行管理中進(jìn)入到該目錄下，執(zhí)行
npm init
然后安裝依賴蔗衡。
npm install echarts mpvue-echarts --save
將下載后的三個(gè)庫(kù)從node_modules剪切到項(xiàng)目的根目錄下收恢。
開(kāi)始在項(xiàng)目中使用echarts。
page/index/index.vue
<template>
<div class="container">
<mpvue-echarts ref="pieChart" :echarts="echarts" :onInit="onInit" />
</div>
</template>
<script>
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
function initChart(canvas, width, height) {
debugger
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
title: {
text: '某站點(diǎn)用戶訪問(wèn)來(lái)源',
subtext: '純屬虛構(gòu)',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} 疏唾 : {c} (l70fjtw%)"
},
legend: {
orient: 'vertical',
bottom: '10%',
data: ['直接訪問(wèn)', '郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎']
},
series: [{
name: '訪問(wèn)來(lái)源',
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: [{
value: 335,
name: '直接訪問(wèn)'
},
{
value: 310,
name: '郵件營(yíng)銷'
},
{
value: 234,
name: '聯(lián)盟廣告'
},
{
value: 135,
name: '視頻廣告'
},
{
value: 1548,
name: '搜索引擎'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
chart.setOption(option)
return chart
}
export default {
data() {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
}
}
</script>
<style>
.container {
flex: 1;
}
</style>
第一個(gè)坑
出現(xiàn)報(bào)錯(cuò)： this.echarts.setCanvasCreator is not a function
嘗試將manifest.json - 源碼視圖中的小程序配置usingComponents刪除
"mp-weixin": { /* 小程序特有相關(guān) */
"usingComponents":true
}
修改為
"mp-weixin": { /* 小程序特有相關(guān) */
}
停止微信開(kāi)發(fā)者工具后重新運(yùn)行区转，雖然顯示圖表，但是這不應(yīng)該是正確的處理方式瞻润。
于是尋找另外一種解決辦法喘垂。根據(jù)處理方法 #插件討論# 【 ECharts頁(yè)面模板 - DCloud 】APP中 報(bào)錯(cuò) this.echarts.setCanvasCreator is not a function，
替換最新的 mpvue-echarts 組件echarts.vue绍撞， 源碼地址：https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue
替換后查看echarts.vue正勒，可以看到init()通過(guò)$emit將onInit事件和數(shù)據(jù)發(fā)出
init() {
...
this.$emit('onInit', {
width: res.width,
height: res.height
});
...
},
因此在index.vue將
<mpvue-echarts ref="pieChart" :echarts="echarts" :onInit="onInit" />
修改為
<mpvue-echarts ref="pieChart" :echarts="echarts" @onInit="initChart" />
page/index/index.vue添加
methods:{
initChart:initChart
}
修改initChart function
function initChart(e) {
let {
width,
height
} = e;
let canvas = this.$refs.pieChart.canvas;
echarts.setCanvasCreator(() => canvas);
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
...
};
chart.setOption(option)
this.$refs.pieChart.setChart(chart)
//return chart
}
第二個(gè)坑
console不報(bào)錯(cuò)，但是頁(yè)面也不顯示圖表傻铣。
原因是外框的height為0章贞，需要設(shè)置外框的高度。同時(shí)要注意page的css
page{display:flex;}會(huì)同樣無(wú)法顯示圖表矾柜。
<style>
page,.container {
height: 100%;
}
</style>
完整代碼：
在最新的echart.vue小作修改
init() {
...
this.$emit('onInit', {
canvas: this.canvas,
width: res.width,
height: res.height
});
...
},
page/index/index.vue
<template>
<view class="container">
<mpvue-echarts ref="pieChart" :echarts="echarts" @onInit="initChart" />
</view>
</template>
<script>
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
export default {
data() {
return {
echarts
}
},
components: {
mpvueEcharts
},
methods: {
initChart(e) {
let {
canvas,
width,
height
} = e;
width = width - 20;
//let canvas = this.$refs.pieChart.canvas;
echarts.setCanvasCreator(() => canvas);
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
title: {
text: '某站點(diǎn)用戶訪問(wèn)來(lái)源',
subtext: '純屬虛構(gòu)',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} 阱驾 : {c} (dpxtes5%)"
},
legend: {
orient: 'vertical',
bottom: '10%',
data: ['直接訪問(wèn)', '郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎']
},
series: [{
name: '訪問(wèn)來(lái)源',
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: [{
value: 335,
name: '直接訪問(wèn)'
},
{
value: 310,
name: '郵件營(yíng)銷'
},
{
value: 234,
name: '聯(lián)盟廣告'
},
{
value: 135,
name: '視頻廣告'
},
{
value: 1548,
name: '搜索引擎'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
chart.setOption(option)
this.$refs.pieChart.setChart(chart);
//return chart
}
}
}
</script>
<style>
page,
.container {
height: 100%;
}
.container {
padding: 0 10px;
}
</style>
完成。
接下來(lái)解決引用uni-app引用mpvue echarts超過(guò)小程序大小限制
在小程序開(kāi)發(fā)工具中編譯和預(yù)覽時(shí)怪蔑，提示Error:源碼包超出最大限制,source size 3905KB exceed max limit 2MB
參考：https://www.npmjs.com/package/mpvue-echarts
FAQ:打包結(jié)果超過(guò)小程序大小限制里覆？
使用自定義版 echarts，官網(wǎng)定制
FAQ:文件太大怎么辦缆瓣？
本項(xiàng)目默認(rèn)提供的 ECharts 文件是最新版本的包含所有組件文件喧枷，為了便于開(kāi)發(fā)，提供的是未壓縮的版本弓坞。遠(yuǎn)程調(diào)試或預(yù)覽可以下載 echarts.min.js 壓縮版本隧甚。
發(fā)布時(shí)，如果對(duì)文件大小要求更高渡冻，可以在 ECharts 在線定制網(wǎng)頁(yè)下載僅包含必要組件的包戚扳，并且選擇壓縮。
定制按需選擇后得到echarts.min.js
將echarts.min.js文件復(fù)制到echarts目錄下族吻。
并修改引用：
import * as echarts from 'echarts/echarts.min.js'
import mpvueEcharts from 'mpvue-echarts/src/echarts.vue'
重新運(yùn)行后文件得到精簡(jiǎn)帽借，小程序端可以正常編譯和預(yù)覽珠增。
h5 運(yùn)行到瀏覽器時(shí)，控制臺(tái)報(bào)錯(cuò)：TypeError: t.addEventListener is not a function
解決方法查看：UNI-app新引入echarts 報(bào)錯(cuò) https://blog.csdn.net/qq_36444936/article/details/86599300
3.編輯剛才拷貝的echarts.min.js砍艾，檢索“e(t.echarts={})”字符串
4.找到相鄰的(this,function(t) 串 蒂教，將其改為(this,function(t,window,document)保存即可
注：本項(xiàng)目?jī)H在微信小程序和h5測(cè)試，其他平臺(tái)暫時(shí)沒(méi)有考慮脆荷。
