echarts环形饼状图标题动态根据鼠标选中展示相应文字

zhuxichong123

已于 2023-04-07 11:12:07 修改

阅读量1.4k

点赞数 2

分类专栏： echart 文章标签： echarts 前端 javascript

于 2023-04-06 11:29:51 首次发布

本文链接：https://blog.csdn.net/zhuxichong123/article/details/129985219

版权

echart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

滑入

滑出

关键代码 --

//绑定滑入事件
this.chart.on('mouseover', (params) => {
          let currName = params.name;//当前滑入选中的块 对应的值
          let op = this.chart.getOption();//获取当前的option
          op.title[0].text = currName //改变标题
          op.title[0].subtext = params.value //改变对应的值
          this.chart.setOption(op,true) //重新渲染
      })
//滑出还原
      this.chart.on('mouseout', () => {
          let op = this.chart.getOption();
          op.title[0].text = title  //title为原本标题
          op.title[0].subtext = total //total为原来计算的总数
          this.chart.setOption(op,true)
      })

完整的实例demo


<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/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;
      option = {
              title: {
                subtext: 123,
                subtextStyle: {
                  align: "center",
                  fontSize: 30,
                  color: "#999",
                },
                text: "原始标题",
                textAlign: "center",
                x: "35%",
                y: "48%",
                textStyle: {
                  fontSize: 14,
                  color: "#999",
                },
              },
              tooltip: {
                trigger: "item",
              },
              legend: {
                top: "10%",
                icon: "circle",
                right: "0%",
                type: "plain",
                orient: "vertical",
                height: '80%',
                itemWidth: 8,
                align:'auto',
                itemHeight: 8,
                itemGap: 18,
                type: "scroll", //分页类型
                y: "center",
                textStyle: {
                  color: "#999",
                },
                pageIconSize: 12, //这当然就是按钮的大小
                align: "left",
                right: "15%",
              },
              series: [
                {
                  type: "pie",
                  center: ["35%", "50%"],
                  radius: ["57%", "65%"],
                  avoidLabelOverlap: true,
                  hoverAnimation: false,
                  clockwise: false,
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ]
                },
              ],
            }

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    myChart.on('mouseover', (params) => {
          let currName = params.name;
          let op = myChart.getOption();
          op.title[0].text = currName
          op.title[0].subtext = params.value
          myChart.setOption(op,true)
      })
    myChart.on('mouseout', () => {
          let op = myChart.getOption();
          op.title[0].text = "原始标题"
          op.title[0].subtext = 123
          myChart.setOption(op,true)
      })
    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>