echarts多图联动并闪烁标注

多图联动并闪烁

效果
在这里插入图片描述
实现


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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

标注

效果
在这里插入图片描述

实现

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",
    }
  }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

相关阅读:
linux中的inode文件编号和软硬链接
 13-盒子模型
 实体解析实施的复杂性
 前端之jQuery
【异常】springboot集成@Cacheable缓存乱码的问题解决方案
 融云通信“三板斧”，“砍”到了银行的心坎上
 LeetCode刷题（ACM模式）-02链表
 基于 JMeter API 开发性能测试平台
 软件测试/测试开发丨学会与 AI 对话，高效提升学习效率
 @Transactional注解作用，不生效的场景，事务回滚
原文地址：https://blog.csdn.net/sumiao64427/article/details/127763525