uniapp 微信小程序端使用echarts

最新推荐文章于 2024-08-29 17:53:35 发布

良心码农liuxuC

最新推荐文章于 2024-08-29 17:53:35 发布

阅读量1.3k

点赞数 1

文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/network_liuxu/article/details/131830627

版权

文章介绍了如何在微信小程序中使用echarts-for-wx插件库，特别是uni-ec-canvas组件，通过直接复制示例代码并替换定制的echarts.min.js文件来创建图表。同时提到了需要注意的canvas宽高设置和微信小程序的分包问题。

摘要由CSDN通过智能技术生成

实测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（别问为什么我下载了最新版本报错了）