【无标题】echarts饼图自动循环高亮

最新推荐文章于 2024-05-14 16:17:58 发布

阿迪王滑板鞋

最新推荐文章于 2024-05-14 16:17:58 发布

阅读量648

点赞数 1

分类专栏： ECharts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/zouhaodong/article/details/121538743

版权

ECharts 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    #main{
      width: 800px;
      height:600px;
      border: 1px solid #cccccc;
    }
  </style>
  <script src="js/echarts-4.1.0.js"></script>
</head>
<body>
<div id="main"></div>
<script>
  let timer = null
  let myChart = echarts.init(document.getElementById('main'),'vintage');
  myChart.setOption({
    itemStyle: {
      emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    series : [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['45%', '85%'],
        data: [
          {value:235, name:'视频广告'},
          {value:274, name:'联盟广告'},
          {value:310, name:'邮件营销'},
          {value:335, name:'直接访问'},
          {value:400, name:'搜索引擎'}
        ]
      }
    ]
  });
  triggerToolTip(myChart)
  function triggerToolTip(myChart) {
    let index = 0
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: 0
    })

    timer = setInterval(function() {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: [0, 1, 2, 3, 4]
      })
      index++
      if (index > 4) {
        index = 0
      }
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      })
    }, 3000)

    myChart.on('mouseover', e => {
      if (e.dataIndex !== index) {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
      }
    })
    myChart.on('mouseout', e => {
      index = e.dataIndex
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex
      })
    })
  }
</script>
</body>
</html>

阿迪王滑板鞋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【无标题】echarts饼图自动循环高亮

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #main{ width: 800px; height:600px; border: 1px solid #cccccc; } </st.
复制链接

扫一扫

专栏目录