uniapp中使用echars解决编译后文件过大问题

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

使用 echars

先到uniapp插件市场下载插件
把下载完的 uni-ec-canvas 目录拿到项目的components目录

<template>
	<view class="home">
		<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.min.js'
	let chart = null

	export default {
		data() {
			return {
				ec: {
					lazyLoad: true
				},

			}
		},
		components: {
			uniEcCanvas
		},

		mounted() {
			setTimeout(() => {
				console.log(this.$refs)
			}, 2000)

			this.$refs.canvas.init(this.initChart)
		},
		created() {
			setTimeout(() => {
				this.$refs.canvas.setOption(this.getOption(), true);
			}, 1000);
		},
	
		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.getOption)
				return chart
			},

			//图表配置
			getOption(series, xAxis) {
				let option = {
					title: {
						subtext: '单位：Kwh'
					},
					xAxis: {
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月'],
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},

					},
					yAxis: {
						type: 'value',
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						}
					},
					color: '#FFB300',
					silent: true,
					barWidth: 20,
					barGap: '-100%', // Make series be overlap
					series: [{
						data: [120, 200, 150, 80, 70, 110],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)',
							borderRadius: 40 // 让柱形上下变成圆角
						},
						itemStyle: {
							normal: {
								barBorderRadius: 40 // 让柱形上下变成圆角
							}
						}
					}]
				};
				return option;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.uni-ec-canvas {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
</style>

HBuilder在启动过程中提示
无法使用 echarts.js过大,[警告⚠] components\uni-ec-canvas\echarts.js 文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理，手机端使用过大的js库影响性能。

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

首先，要去echarts官网自定义构建并下载文件ECharts 在线构建 (apache.org)，我们可以选择指定的版本。
下载完的echarts.min.js文件，放到uni-ec-canvas目录，将引用的echarts.js修改成echarts.min.js
这时控制台没有了echarts.js过大,[警告⚠]