echarts图例配置监听事件实现链接跳转
⾸先在 ECharts 中主要通过⽅法添加事件处理函数，⽽echarts图表中封装了切换图例选中状态后的事件函数： legendselectchanged。【简单的说就是点击、切换图例的时候会调⽤legendselectchanged函数】，所以当我们需要对点击切换图例做⼀些js操作时，可以直接调⽤legendselectchanged函数
例如：给图例【待下发、处置中、已完成】配置链接跳转：点击待下发图例跳转到/modules/order/AlarmOrderListPlus路由对应的***页⾯....
关键代码如下：
<('legendselectchanged', function(obj) {
// var selected = obj.selected;
var legend = obj.name;
if(legend == '待下发'){
that.$router.push('/modules/order/AlarmOrderListPlus')
}
else if(legend == '处置中'){
that.$router.push('/modules/order/AlarmOrderOngoingList')
}else{
that.$router.push('/modules/order/AlarmOrderCompleteList')
}
})
完整组件⽰例代码如下：
<template>
<div class="repair-order">
<!-- ⼯单统计 -->
<img src="~@/assets/datav/title-2.png"/>
<div id="pieChart" class="pie-chart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { color } from 'echarts'
import { getAction } from '@api/manage'
export default {
name: 'repairOrder',
components: {},
computed: {},
data() {
return {
url:{
pieData:'接⼝url',
monitor:'接⼝url'
},
pieData:[],
totalCount:0,
}
},
mounted() {
this.handleGetPieData();
setInterval(()=>{
this.handleGetPieData();
},30000)
},
methods: {
handleGetPieData() {
this.pieData =[];
if (!this.url.pieData) {
this.$('请设置url.pieData 属性!')
return
}
getAction(this.url.pieData).then((res) => {
for(let i=0;i<res.length;i++){
this.pieData.push({'name': res[i].x, 'value': res[i].y});
}
this.initPieChart()
console.log('总数：',alCount)
})
},
initPieChart() {
// var data = [
//  { value: 246, name: '待下发' },
//  { value: 2, name: '处置中' },
//  { value: 1, name: '已完成' },
/
/ ]
var data=this.pieData;
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
color: ['#3F98FD', '#0BE3F5', '#FD9D73'],
legend: {
orient: 'vertical', //图例列表的布局朝向（垂直排列）          left: '50%',
y: 'center',
itemGap: 30,
itemWidth: 8,
padding: 10,
textStyle: {
fontSize: 12,
color: '#FFFFFF',
},
align: 'left',
data: [
// '待下发','处置中','已完成'
{
name: '待下发',
icon: 'circle',
},
{
name: '处置中',
icon: 'circle',
},
{
name: '已完成',
icon: 'circle',
},
]
,
formatter: function (name) {
var total = 0
var target
for (var i = 0, l = data.length; i < l; i++) {
// total += data[i].value
if (data[i].name == name) {
target = data[i].value
}
}
var arr = ['{a|' + name + ' :}{b|' + target + '}{a|个}']
return arr.join('\n')
},
textStyle: {
rich: {
a: {
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#FFFFFF',
align: 'left',
padding: [0, 0, 0, 10],
},
b: {
fontSize: 26,
fontFamily: 'DIN',
fontWeight: 'bold',
color: '#3F98FD',
align: 'right',
padding: [0, 0, 0, 10],
lineHeight: 25,
},
c: {
fontSize: 26,
fontFamily: 'DIN',
fontWeight: 'bold',
color: '#7BDBFF',
},
d: {
fontSize: 16,
fontFamily: 'Microsoft YaHei',
fontWeight: '400',
color: '#7BDBFF',
},
},
},
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['35%', '50%'],
center: ['27%', '51%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
formatter: '{c|'+alCount+'} \n {d|⼯单总数}',
textStyle: {
rich: {
c: {
fontSize: 26,
fontFamily: 'DIN',
fontWeight: 'bold',
color: '#7BDBFF',
},
d: {
fontSize: 16,
fontFamily: 'Microsoft YaHei',
fontWeight: '400',
color: '#7BDBFF',
},
},
},
fontweight属性bold
},
labelLine: {
show: false,
},
data: this.pieData
//
// data: [
//  { value: 1048, name: '待下发' },
//  { value: 735, name: '处置中' },
//  { value: 580, name: '已完成' },
// ],
},
],
}
var pieChart = echarts.ElementById('pieChart'))      pieChart.setOption(option)
let listener= function () {
}
window.addEventListener('resize', listener)
var that = this;
<('legendselectchanged', function(obj) {
// var selected = obj.selected;
var legend = obj.name;
if(legend == '待下发'){
that.$router.push('/modules/order/AlarmOrderListPlus')
}
else if(legend == '处置中'){
that.$router.push('/modules/order/AlarmOrderOngoingList')
}else{
that.$router.push('/modules/order/AlarmOrderCompleteList')        }
})
<('click', 'series.pie.label', function () {        that.$router.push('/dashboard/analysis')
});
},
},
}
</script>
<style lang='less' scoped>
.repair-order {
.pie-chart {
height: 100%;
width: 100%;
}
}
img{
display: inline-block;
height: auto;
max-width: 100%;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。