echarts多图联动并闪烁标注

最新推荐文章于 2024-06-16 10:33:36 发布

喵酱睡着了

最新推荐文章于 2024-06-16 10:33:36 发布

阅读量769

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/sumiao64427/article/details/127763525

版权

多图联动并闪烁

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


<!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",
    }
  }]
}