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

矫情吗；* 2022-10-20 01:18 310阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

代码

<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][https_echarts.apache.org_zh_api.html_action.tooltip]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221004/53d269014581486588198c1512e7c827.png
[https_echarts.apache.org_zh_api.html_action.tooltip]: https://echarts.apache.org/zh/api.html#action.tooltip