Vue中echarts扇形图默认高亮并显示提示框

Vue 同时被 3 个专栏收录
63 篇文章 0 订阅
6 篇文章 0 订阅

效果图

代码

<template>
	<div class="chart" v-resize="resizeCharts" ref="barChart"></div>
</template>
<script>
	import * as echarts from "echarts";
	export default {
		name: "barChart",
		props: {
			data: {
				type: Array,
				default () {
					return [];
				},
			}
		},
		data() {
			return {
				charts: null,
			};
		},
		computed: {},
		methods: {
			resizeCharts() {
				this.charts.resize();
			},
			initCharts() {
				this.$nextTick(() => {
					this.charts = echarts.init(this.$refs.barChart);
					this.charts.clear();
					this.setOption();

					// 加载后显示默认高亮
					this.charts.dispatchAction({
						type: 'highlight',
						dataIndex: 0
					});
					// 显示默认提示框
					this.charts.dispatchAction({
						type: 'showTip',
						seriesIndex: 0,
						dataIndex: 0
					});

				});
			},
			setOption() {
				const option = this.getOption();
				this.charts.setOption(option, true);
				this.charts.on('mouseover', (e) => {
					//当检测到鼠标悬停事件,取消默认选中高亮
					this.charts.dispatchAction({
						type: 'downplay',
					});
					//高亮显示悬停的那块
					this.charts.dispatchAction({
						type: 'highlight',
						dataIndex: e.dataIndex
					});
				});
				//检测鼠标移出后显示之前默认高亮的那块
				this.charts.on('mouseout', (e) => {
					// 关闭其他高亮
					this.charts.dispatchAction({
						type: 'downplay',
					});
					// 显示默认高亮
					this.charts.dispatchAction({
						type: 'highlight',
						dataIndex: 0
					});
					// 显示默认提示框
					setTimeout(()=>{
						this.charts.dispatchAction({
							type: 'showTip',
							seriesIndex: 0,
							dataIndex: 0
						});
					},500)   //如果滑动太频繁,提示框还是可能会消失,500是最合适的时间
				});
			},
			getOption() {
				const option = {
					tooltip: {
						trigger: 'item',
						show: true //是否显示提示框
					},
					 color:['#307486', '#cbe0e9','#b8d6e1','#a1cbda','#88c0d2','#64b2ca'],
					legend: {
						orient: 'vertical',
						left: '10',
						top: '150',
						show: false //隐藏左侧文字
					},
					series: [{
						name: '标题',
						type: 'pie',
						radius: '90%', //圆环的大小
						center: ['50%', '50%'], //圆环的位置
						data: this.data,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						label: { //去除饼图的指示折线label
							normal: {
								show: false
							}
						},
					}]
				};
				return option;
			},
		},
		mounted() {
			this.initCharts();
		},
		beforeDestroy() {
			this.charts && this.charts.dispose();
			this.charts = null;
		},
		watch: {
			data: {
				handler() {
					this.setOption();
				},
			},
		},
		components: {},
	};
</script>

<style scoped>
	.chart {
		width: 100%;
		height: 100%;
	}
</style>

数据来自父组件

data:[{
	    value: 1048,
	    name: '投诉'
	},
	{
		value: 735,
		name: '举报'
	},
	{
		value: 580,
		name: '意见'
	},
	{
	    value: 484,
		name: '服务申请'
	},
	{
		value: 300,
		name: '咨询'
	},
	{
	    value: 300,
		name: '故障报修'
	}
],

echarts:https://echarts.apache.org/zh/api.html#action.tooltip

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

Bright2017

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值