uniapp 微信小程序端使用echarts

实测dome直接copy可以使用

我使用的是 插件库中的 echarts-for-wx

 下载后只需要关注uni-ec-canvas文件夹下文件就可以 别的我都没有用

 代码直接copy 就是echarts的dome（注意这里面的echarts.min(4)是我自己定制的包 如果直接copy 需要换成你们对应的js文件）

<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.min (4)'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				ec: {
					lazyLoad: true
				},
				option: {
				  xAxis: {
				    type: 'category',
				    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      data: [150, 230, 224, 218, 135, 147, 260],
				      type: 'line'
				    }
				  ]
				}
			}
		},
		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>复制

 注意：如果你想换echarts的js包（我们项目出现的问题是 我直接下在插件库的echarts.js 3000kb 但是微信小程序分包这个文件都比较大）可以选择echarts的官网去定制下载

ECharts 在线构建 (apache.org)

但是注意的是要下载版本为 5.2.2（别问为什么 我下载了最新版本报错了）