通过echarts的鼠标事件与行为的监听形式来展示数据
鼠标事件包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu
实现代码
myChart.on('click', function(params) {
// 控制台打印数据的名称
console.log(params.name);
});
鼠标事件的事件参数是事件对象的数据的各个属性,对于图表的点击事件,基本参数如下
{
// 当前点击的图形元素所属的组件名称,
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesType: string,
// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number,
// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
// dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
// 其他大部分图表中只有一种 data,dataType 无意义。
dataType: string,
// 传入的数据值
value: number|Array,
// 数据图形的颜色。当 componentType 为 'series' 时有意义。
color: string,
// 用户自定义的数据。只在 graphic component 和自定义系列(custom series)
// 中生效,如果节点定义上设置了如:{type: 'circle', info: {some: 123}}。
info: *
}
实现功能
效果:默认显示总数,鼠标移动到不同类型显示不同的数据。
具体代码如下所示:
<template>
<div class="right1 bg">
<div class="title">当前测站状态</div>
<div class="pieBlock">
<div class="pieTip" v-show="isShow">
<span>测站总数</span>
<p>{{ total }}</p>
</div>
<div class="pieTip" v-show="!isShow">
<span>{{ pieName }}</span>
<p>{{ piePercent }}</p>
</div>
<div class="pie" ref="pie"></div>
</div>
</div>
</template>
<script setup>
// 饼图
const isShow = ref(true)
const pieName = ref('')
const piePercent = ref('')
const pie = ref(null)
const myPie = ref(null)
const pieOption = ref({
tooltip: {
trigger: 'item'
},
legend: {
top: '45%',
orient: 'vertical',
left: 'left'
// left: 'center'
},
series: [
{
name: '当前测站状态',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#67c23a', '#999']
return colorList[params.dataIndex]
},
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
}
},
label: {
show: false,
position: 'center'
},
// 饼图中心提示信息
// emphasis: {
// label: {
// show: true,
// fontSize: 16,
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: []
}
]
})
// 初始化 pie
const initPie = () => {
myPie.value = echarts.init(pie.value)
myPie.value.setOption(pieOption.value)
myPie.value.on('mouseover', function (params) {
pieName.value = params.name
piePercent.value = params.percent + '%'
isShow.value = false
})
myPie.value.on('mouseout', function () {
isShow.value = true
})
}
onMounted(() => {
initPie()
})