代码是我在echarts官网上下载的。代码可以直接运行。但是遇到以下2个问题，希望能帮我修改代码，直接达成我想要的效果。不胜感激。
1，我想在这个报表中加入一个动画的效果。效果图如下。希望将这个圆圈以呼吸灯式的动画闪烁起来。
2，在没有添加自定义tooltip显示时，鼠标移动到项目上会有一个背景显示，而且只要移动到该区域就会显示提示。
但是添加了自定义tooltip显示时这个效果就不见了，而且必须要鼠标移动到柱状上才会显示提示。
怎么修改成鼠标移动到该区域时就提示tooltip呢，且包括背景变化的动画。
（没添加tooltip显示时效果如下）
（添加了tooltip显示时效果如下）
完整的代码，可直接运行。
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0013)about:internet -->
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1"/>
</head>
<body style="background-color: #081234;">
<div id="container" style="width:700px;height:300px;">
</div>
<script type="text/javascript" src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/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;
// 添加虚拟数据
let category = [];
let dottedBase = +new Date();
let lineData = [];
let barData = [];
for (let i = 0; i < 7; i++) {
let date = new Date((dottedBase += 3600 * 24 * 1000));
category.push(
[date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
);
let b = Math.floor(Math.random() * 20) * 200;
let d = b;
barData.push(b);
lineData.push(d + b);
}
// option
option = {
backgroundColor: '#0f375f',
grid: {
left: '5px',
right: '5px',
top: '10px',
bottom: '25px'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: false,
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
tooltip: {
axisPointer: {
type: 'shadow',
width: 100,
height: 50
},
formatter: function(params) {
let date = params.name;
let value = params.value;
let index = params.dataIndex;
let compareValue = barData[index - 1];
let percentage = ((value - compareValue) / compareValue * 100).toFixed(2);
if (index == 0) {
return '<table>' +
'<tr><td td colspan="3">日期 '+ date +' </td></tr>' +
'<tr><td>●</td><td>当日用电</td><td>' + value + '</td>' +
'</table>';
} else {
let color = (value - compareValue) > 0 ? 'red' : 'green';
let arrow = '↓';
if (percentage > 0) {
arrow = '↑';
}
if (percentage < 0) {
percentage = Math.abs(percentage);
}
return '<table>' +
'<tr><td td colspan="3">日期 '+ date +' </td></tr>' +
'<tr><td>●</td><td>当日用电</td><td>' + value + '</td></tr>' +
'<tr><td>●</td><td>环比昨日</td><td style="color:' + color + '">' + percentage + arrow +'</td></tr>' +
'</table>';
}
}
},
series: [{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData
},
{
name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#14c8d4'
},
{
offset: 1,
color: '#14c8d4'
}])
},
data: barData,
symbol: 'circle',
symbolSize: 15
},
{
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20,200,212,0.5)'
},
{
offset: 0.2,
color: 'rgba(20,200,212,0.2)'
},
{
offset: 1,
color: 'rgba(20,200,212,0)'
}])
},
z: -12,
data: lineData
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f375f'
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
