多图联动并闪烁
效果
实现
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div style="display:flex">
<div id="container1" style="height: 400px;width:600px"></div>
<div id="container2" style="height: 400px;width:600px"></div>
</div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script type="text/javascript">
const myChart1 = echarts.init(document.getElementById("container1"))
const myChart2 = echarts.init(document.getElementById("container2"))
let option1 = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
series: [{
// data: [820, 932, 901, 934, 1290, 1330, 1320],
data: [620, 932, 1001, 534, 990, 1230, 820],
type: "line",
smooth:true,
markPoint: {
// data: [{coord: ["Tue", 932]}],
data: [{coord: []}],
symbol: "triangle"
}
}]
}
let option2 = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth:true,
itemStyle: {
normal: {
color: "#2ec7c9",
lineStyle: {
color: "#2ec7c9"
}
},
},
}]
}
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart2.on("mouseover",function(params){
console.log(option1.xAxis.data[params.dataIndex])
let xDataShow = option1.xAxis.data[params.dataIndex]
let yDataShow = option1.series[0].data[params.dataIndex]
let effectScatterData = [xDataShow,yDataShow]
aaa(effectScatterData)
});
myChart2.on("mouseout",function(params){
let effectScatterData = []
aaa(effectScatterData)
});
function aaa(effectScatterData) {
console.log("effectScatterData:", effectScatterData)
let effectScatter = {
type:'effectScatter',
// 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
coordinateSystem: 'cartesian2d',
// 单个闪烁点
data: [{value:effectScatterData,symbolSize:8}], //2d坐标系--[x轴, y轴, 标记大小]
showEffectOn: 'render',
// 涟漪特效配置
rippleEffect: {
// 波纹的绘制方式,可选'stroke'和'fill'
brushType: 'stroke'
},
hoverAnimation: true,
// name: '告警',
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// }
// },
itemStyle: {
normal: {
color: 'red',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
};
option1.series[1] = effectScatter;
myChart1.setOption(option1,true)
}
</script>
</body>
</html>
标注
效果
实现
option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
markPoint: {
data: [{coord: ["Tue", 932],value:932}],
symbol: "circle",
}
}]
}