[JavaScript知识库]2021-10-20

Echarts添加对应的点击事件（环状图为例）

实现功能，如图所示：

实现点击不同颜色获取到不同的数据

1.建立Echarts，指定需要的配置项，代码如下所示

  this.options = {
      title: {
          text: '50%',
          subtext: 'C',
          left: '45%',
          top: '30%',
          position: 'center',
          textAlign: 'center',
          textStyle: {
              fontWeight: 'normal',
              fontSize: 12,
              color: '#00eeff',
         }, // 标题
          subtextStyle: {
              fontWeight: 'normal',
              fontSize: 12,
              color: '#00eeff',
         }, // 副标题
      },
      color: ['rgb(33, 204, 151)', 'rgb(250, 202, 0)', 'rgb(210, 59, 95)'],
      series: [{
          type: 'pie',
          radius: ['65%', '80%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
              normal: {
                  show: false,
                  position: 'center',
                  textStyle: {
                      fontSize: 12,
                      fontWeight: 'bold'
                  },
                  formatter: '{c}%\n{b}'
              }
          },
              data: [{
              value: 20,
              name: 'A',
          },
          {
              value: 50,
              name: 'B'
          } ,
          {
              value: 30,
              name: 'C'
          }
          ]
      }],
  };

2.基于准备好的dom，初始化ECharts实例

 var myChart = echarts.init(document.getElementById('percents'));  //通过Dom元素获取

3.使用刚指定的配置项和数据显示图表

    myChart.setOption(this.options);
    myChart.on('click',function (params) {
     if(params.name=='绿色'){
        window.location.href='/home/maintain/lifemanage'; //跳转到组件内对应页面
        this.jump()     //或调用方法进行路由跳转以及传参
      }

  });
     jump(){
       this.router.navigate(['/home/maintain/lifemanage'], { queryParams: {status:''}});
  }

参考链接：ECharts中的事件和行为