uni-app中使用echarts-可在小程序显示

目录

1.下载echarts

2.引入mpvue-echarts

3.使用

4.报错

5.关于遮挡问题

6.其他

---

1.下载echarts

这边使用的是定制版

将下载的echarts.js文件放在common文件下

2.引入mpvue-echarts

这边使用的是从Hellow uni-app项目中复制过来的mpvue-echarts

放入components文件下

3.使用

<view class="" style="margin-top: 200rpx;width: 700rpx;height: 300rpx;border: 1rpx solid red;">
    <mpvue-echarts canvasId="echarts1" ref="echarts1" @onInit="echartInit" />
</view>

如果页面有多个图表，要指定不同的canvasId（和web端同理）

//引入
import * as echarts from '@/common/echarts.js';
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

//注册组件
components: {
    mpvueEcharts
},

methods: {
			echartInit(e) {
				let {
					width,
					height
				} = e
				let canvas = this.$refs.echarts1.canvas
				// echarts.setCanvasCreator(() => canvas);已弃用
				echarts.setPlatformAPI(() => canvas);
				let chart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(chart)
				// 半圆环option
				let option = {
					tooltip: {
						trigger: 'item',
						confine: true,
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '70%'],
						// adjust the start and end angle
						startAngle: 180,
						endAngle: 360,
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
							{
								value: 484,
								name: 'Union Ads'
							},
							{
								value: 300,
								name: 'Video Ads'
							}
						]
					}]
				}
				//初始化echarts实例
				chart.setOption(option)
				this.$refs.echarts1.setChart(chart)
			},

		}

4.报错

报错 el.addEventListener is not a function

解决：在wx-canvas.js中增加代码 addEventListener() {}

5.关于遮挡问题

图例、提示框可能会出现遮挡、重叠的问题，可以调整图标组件位置

可以参考echarts系列：echarts中的legend名称最上面被遮挡一部分_echarts图例被遮挡-CSDN博客

6.其他

可以使用  npm install echarts mpvue-echarts  下载相关文件，但用法和本篇写的有些区别

注：

1.如果只考虑H5端可以按照web端写法

2.ECharts官网：Apache ECharts