uniapp开发APP使用echart

小土豆子额

已于 2022-08-11 10:27:45 修改

阅读量1.8k

点赞数

分类专栏： UNIAPP 文章标签： echarts javascript uniapp

于 2022-07-15 14:31:15 首次发布

本文链接：https://blog.csdn.net/chenyidong521/article/details/125803749

版权

本文介绍了如何在uniapp应用中使用echarts创建图表。首先，在components文件夹创建echartEx.vue组件，通过renderjs处理echarts与组件的数据交互。接着，从echarts官网下载所需js文件并放入项目目录。然后在需要使用图表的页面导入组件，并提供固定宽高的容器及预配置的options选项。

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

使用echarts编写app中的图标内容

编写组建

首先在组建components文件夹中添加组建echartEx.vue组建
内容如下,可以看到使用了renderjs来实现的echartsjs和组建之间的沟通数据交互.

<template>
	<view class="content">
		<view @click="echarts.onClick" :prop="option" :defaultClickNumber="defaultClickNumber"
			:change:defaultClickNumber="echarts.defaultClickNumberMsg" :change:prop="echarts.updateEcharts"
			:id="option.id" class="echarts">
		</view>
	</view>
</template>

<script>
	export default {
		name: "echarts",
		props: {
			option: {
				type: Object,
				require: true,
				default: {
					id: null
				}
			},
			defaultClickNumber: {
				type: Number,
				require: false,
				default: 0
			}
		},
		methods: {
			onViewClick(options) {
				this.$emit("click", options)
			}
		}
	}
</script>

<script module&