需求说明:
点击“欠款金额”或者“86000元” 都能触发点击事件,且鼠标移上“欠款金额”和“86000元” 鼠标为手指效果,但myChart.on('click')只能点击86000元才会触发函数
使用场景:
echarts常用的myChart.on('click')是点击数据时触发的函数,但需要点击非数据时的触发函数就需要使用另外的方法
说明:
1. myChart.on('click')这个方法是获取图标数据的点击
2.myChart.getZr().on('click')这个方法是获取全部画布的点击
完整代码:
<template>
<div ref="debt" class="debt"> </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { reqDebtData } from '/@/api/echarts/echarts';
import { useRouter, useRoute } from 'vue-router';
import mittBus from '/@/evenbus';
const router = useRouter();
const route = useRoute();
const debt = ref();
const debtData = ref();
const operating = ref();
onMounted(async () => {
await mittBus.on('operating', (val) => {
console.log('operating', val);
operating.value = val.operating;
console.log('operating', operating.value);
});
await getDebtData();
await init();
});
const getDebtData = async () => {
let result = await reqDebtData();
debtData.value = result;
console.log(debtData.value / operating.value, 'debtData.value / operating.value');
console.log(operating.value, 'debtData.value / operating.value');
};
const transformFontSize = (fontsize) => {
// 获取屏幕可视区宽度
const width = document.body.clientWidth;
const ratio = width / 1920;
// 取下整
return fontsize * ratio;
};
const init = () => {
var myChart = echarts.init(debt.value);
let option = {
series: [
{
type: 'gauge',
radius: '95%',
startAngle: 180,
endAngle: 0,
min: 0,
max: 400,
// splitNumber: 5,
axisLine: {
lineStyle: {
width: transformFontSize(9),
color: [
[0.25, '#7CFFB2'],
[0.5, '#58D9F9'],
[0.75, '#FDDD60'],
[1, '#FF6E76'],
],
},
},
pointer: {
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '12%',
width: transformFontSize(20),
offsetCenter: [0, '-60%'],
itemStyle: {
color: 'auto',
},
},
axisLabel: {
color: '#464646',
fontSize: transformFontSize(20),
distance: -60,
formatter: function (value) {
if (value === 0.875) {
return 'A';
} else if (value === 0.625) {
return 'B';
} else if (value === 0.375) {
return 'C';
} else if (value === 0.125) {
return 'D';
}
return '';
},
},
title: {
offsetCenter: [0, '-30%'],
color: '#fff',
fontSize: transformFontSize(20),
cursor: 'pointer',
},
detail: {
fontSize: transformFontSize(20),
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value) + '元';
},
color: 'auto',
},
data: [
{
value: debtData.value,
name: '欠款金额',
},
],
},
],
};
window.onresize = function () {
myChart.resize();
};
myChart.setOption(option);
myChart.getZr().on('click', (event) => {
// console.log(event, '2222222222222222222222222222222222222222');
if (event.topTarget.style.text) {
router.push('/echarts/debtList');
}
});
myChart.getZr().on('mousemove', (param) => {
if (param.topTarget.style.text) {
myChart.getZr().setCursorStyle('pointer');
}
});
};
</script>