在uni-app项目引用Echarts
effect.gif
demo附件：https://github.com/chellel/echarts-uniapp
按照 uni-app中使用Echarts的实践总结 的步骤引用echarts
先在uni-app新建项目，然后在命令行管理中进入到该目录下，执行
npm init
然后安装依赖。
npm install echarts mpvue-echarts --save
将下载后的三个库从node_modules剪切到项目的根目录下。
开始在项目中使用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: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
bottom: '10%',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: [{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
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>
第一个坑
出现报错： this.echarts.setCanvasCreator is not a function
image.png
尝试将manifest.json - 源码视图中的小程序配置usingComponents删除
"mp-weixin": { /* 小程序特有相关 */
"usingComponents":true
}
修改为
"mp-weixin": { /* 小程序特有相关 */
}
停止微信开发者工具后重新运行，虽然显示图表，但是这不应该是正确的处理方式。
于是寻找另外一种解决办法。根据处理方法 #插件讨论# 【 ECharts页面模板 - DCloud 】APP中 报错 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()通过$emit将onInit事件和数据发出
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
}
第二个坑
console不报错，但是页面也不显示图表。
原因是外框的height为0，需要设置外框的高度。同时要注意page的css
page{display:flex;}会同样无法显示图表。
<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: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
bottom: '10%',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: [{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
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>
完成。
接下来解决引用uni-app引用mpvue echarts超过小程序大小限制
在小程序开发工具中编译和预览时，提示Error:源码包超出最大限制,source size 3905KB exceed max limit 2MB
参考：https://www.npmjs.com/package/mpvue-echarts
FAQ:打包结果超过小程序大小限制？
使用自定义版 echarts，官网定制
FAQ:文件太大怎么办？
本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件，为了便于开发，提供的是未压缩的版本。远程调试或预览可以下载 echarts.min.js 压缩版本。
发布时，如果对文件大小要求更高，可以在 ECharts 在线定制网页下载仅包含必要组件的包，并且选择压缩。
定制按需选择后得到echarts.min.js
将echarts.min.js文件复制到echarts目录下。
并修改引用：
import * as echarts from 'echarts/echarts.min.js'
import mpvueEcharts from 'mpvue-echarts/src/echarts.vue'
重新运行后文件得到精简，小程序端可以正常编译和预览。
h5 运行到浏览器时，控制台报错：TypeError: t.addEventListener is not a function
image.png
解决方法查看：UNI-app新引入echarts 报错 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)保存即可
注：本项目仅在微信小程序和h5测试，其他平台暂时没有考虑。
网友评论