uni使用echarts自定义图标（圆形雷达图）

最新推荐文章于 2024-05-22 16:36:32 发布

nuanyue123

最新推荐文章于 2024-05-22 16:36:32 发布

阅读量2.4k

点赞数 1

分类专栏： uni和echarts echarts图表 uni图表文章标签： uni-app echarts

本文链接：https://blog.csdn.net/qq_42551474/article/details/114281606

版权

本文介绍如何在uni-app项目中利用echarts组件实现圆形雷达图的绘制，详细讲解了相关配置和步骤，参考echarts官方文档。

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

echarts.vue组件

<template>
	<view>
		<view class="echarts" :id="option.id" :prop="option" :change:prop="echarts.update" @click="echarts.onClick"></view>
	</view>
</template>

<script>
	export default {
		name: 'Echarts',
		props: {
			option: {
				type: Object,
				required: true
			}
		},
		created() {
			// 设置随机数id
			let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
			let len = t.length
			let id = ''
			for (let i = 0; i < 32; i++) {
				id += t.charAt(Math.floor(Math.random() * len))
			}
			this.option.id = id
		},
		methods: {
			/**
			 * renderjs内的点击事件，回调到父组件
			 * @param {Object} params
			 */
			onViewClick(params) {
				this.$emit('click', params)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	import echarts from '@/components/echarts/echarts.min.js'
	
	export default {
		data() {
			return {
				chart: null,
				clickData: null // echarts点击事件的值
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 初始化echarts
			 */
			init() {
				// 根据id初始化图表
				this.chart = echarts.init(document.getElementById(this.option.id))
				this.update(this.option)
				// echarts的点击事件
				this.chart.on('click', params => {
					// 把点击事件的数据缓存下来
					this.clickData = params
				})
			},
			/**
			 * 点击事件，可传递到外部