滑入
滑出
关键代码 --
//绑定滑入事件
this.chart.on('mouseover', (params) => {
let currName = params.name;//当前滑入选中的块 对应的值
let op = this.chart.getOption();//获取当前的option
op.title[0].text = currName //改变标题
op.title[0].subtext = params.value //改变对应的值
this.chart.setOption(op,true) //重新渲染
})
//滑出还原
this.chart.on('mouseout', () => {
let op = this.chart.getOption();
op.title[0].text = title //title为原本标题
op.title[0].subtext = total //total为原来计算的总数
this.chart.setOption(op,true)
})完整的实例demo
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
subtext: 123,
subtextStyle: {
align: "center",
fontSize: 30,
color: "#999",
},
text: "原始标题",
textAlign: "center",
x: "35%",
y: "48%",
textStyle: {
fontSize: 14,
color: "#999",
},
},
tooltip: {
trigger: "item",
},
legend: {
top: "10%",
icon: "circle",
right: "0%",
type: "plain",
orient: "vertical",
height: '80%',
itemWidth: 8,
align:'auto',
itemHeight: 8,
itemGap: 18,
type: "scroll", //分页类型
y: "center",
textStyle: {
color: "#999",
},
pageIconSize: 12, //这当然就是按钮的大小
align: "left",
right: "15%",
},
series: [
{
type: "pie",
center: ["35%", "50%"],
radius: ["57%", "65%"],
avoidLabelOverlap: true,
hoverAnimation: false,
clockwise: false,
label: {
normal: {
show: false,
},
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
},
],
}
if (option && typeof option === 'object') {
myChart.setOption(option);
}
myChart.on('mouseover', (params) => {
let currName = params.name;
let op = myChart.getOption();
op.title[0].text = currName
op.title[0].subtext = params.value
myChart.setOption(op,true)
})
myChart.on('mouseout', () => {
let op = myChart.getOption();
op.title[0].text = "原始标题"
op.title[0].subtext = 123
myChart.setOption(op,true)
})
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>