uni-app使用echarts并解决echarts文件过大的问题

背景

这几天写小程序需要用到echarts，又因为我用uni-app开发，因此研究了好久uni-app引用echarts，遇到了也最终解决了好多bug，我感觉大家应该在使用的时候应该都会遇到，因此专门来写一篇博客，希望可以给大家提供一点帮助！！

第一次写，保证超详细！！！

正文

一、uni-app引用echarts

        原生开发和uni-app开发需要引用的echarts不同，我们着重讲uni-app开发，原生的大家另行研究吧。

首先，要去下载插件（用hbuilder编辑器下载特别方便）

echarts-for-wx - DCloud 插件市场

 使用HBuilder导入之后，会生成一个js_sdk目录

其次，只需要将js_sdk下的uni-ec-canvas目录复制到components目录下面就成功引入了

之后，在pages中建立页面并复制如下代码就可以展示图表了

（我这里建立的是test）

<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>
 
<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				ec: {
					lazyLoad: true
				},
				option: {
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '40',
						right: '40',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						axisTick: {
							show: false,
						},
						nameTextStyle: {
							color: '#666666'
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#666',
								fontSize: '12',
								fontWeight:'bold'
							}
						},
						axisLine: {
							lineStyle: {
								color: '#666',
								width: 1
							}
						},
						data: ["寿险", "重疾", "意外", "医疗", "年金"],
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false, //y轴线消失
 
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#666',
								fontSize: '11'
							}
						},
 
						axisTick: {
							show: false,
						},
					},
					series: [{
						barWidth: 20,
						type: 'bar',
						data: [20, 50, 40, 10, 20],
						itemStyle: {
							normal: {
								//每根柱子颜色设置
								color: function(params) {
									const colorList = ["#FFC600", "#21A5FF", "#FF6000", "#00D69C",
										"#998BFF"
									];
									return colorList[params.dataIndex];
								}
							}
						},
						label: {
							show: true,
							position: 'top',
							formatter: '{c}万',
							color: '#666666',
							fontStyle: 'PingFang SC',
							fontWeight: 'bold',
							fontSize:'8'
						}
					}]
				},
			}
		},
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				console.log(canvas, width, height, canvasDpr)
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.option)
				return chart
			},
		},
		onLoad() {
			setTimeout(() => {
				console.log(this.$refs)
			}, 2000)
			this.$refs.canvas.init(this.initChart)
		},
	}
</script>
 
// 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
<style>
	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
		display: block;
		margin-top: 30rpx;
	}
</style>

运行到开发者工具就可以看到了（记得在pages.json中设置启动页）

如下是运行页面 

二、解决echarts.js文件过大的问题

        首先，要去echarts官网自定义构建并下载文件ECharts 在线构建 (apache.org)

         

                 下载的是echarts.min.js文件

                其次就是替换文件了

                将项目中的echarts.js替换成echarts.min.js文件

并修改导入的文件

 有两个文件要修改

一是uni-ec-canvas.vue，二是我们建立的test.vue

将echarts.js修改成echarts.min.js

修改完之后大家肯定会发现，为啥报错了！！

别急，下面我们接着来

我们打开echarts.min.js

搜索字符串  t.addEventListener

搜索到之后，在   t.addEventListener后面添加   ?.  

 保存编译之后就好啦！

但是！！！！！！

大伙有时候会出现，即便我们使用了echarts.min.js，编译时压缩js脚本，主包还是太大了！！！

这时候就得发行代码了。。。

 之后选择微信小程序发行就可以了

如果还是不行！！！

那我们就得用最后一招了！！！

分包！！！！

马上到凌晨两点了。。。有空再更吧。。。

可移步查看我在小程序中的应用

记账小程序 微信小程序 源码 uniapp vue3_没糖de药房的博客-CSDN博客