取消点击事件两种方法:

  1. legend: {selectedMode:false,}//取消图例上的点击事件

  2. myChart.off(‘legendselectchanged’)
    myChart.on(‘legendselectchanged’, function (params) {
    myChart.setOption({
    legend:{selected:{[params.name]: true}}
    })
    console.log(‘点击了’, params.name);
    });
    完整代码

<template>
  <div id="echarts">
    <div >
      <div>
        <div id="myChart" :style="{ width: '600px', height: '300px' }"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getarrival } from '@/api/product'    //调用后台接口
export default {
  name: 'Echarts',
  data() {
    return {
      newData: [],
     obj:{
     id:1
        }
            }
    },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      getarrival(this.obj).then((res) => {
        this.newData= res.data.data.arrivel_later_result.bar     //接口返回数据赋值this.newData
        // 基于准备好的dom,初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
         title: {
            text: this.newData.title.text,
            subtext: this.newData.title.subtext,
            left: this.newData.title.left
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            selectedMode: false  //取消图例上的点击事件
          },
          series: [
            {
              name: '迟到占比',
              type: this.newData.series[0].type,
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: this.newData.series[0].data,
              emphasis: this.newData.series[0].emphasis,
              label: {
                //饼图图形上的文本标签
                normal: {
                  show: true,
                  position: 'inner', //标签的位置
                  textStyle: {
                    fontWeight: 300,
                    fontSize: 16 //文字的字体大小
                  },
                  formatter: '{d}%'
                }
              }
            }
          ]
        })
     // 关键代码
         myChart.off('legendselectchanged')
         myChart.on('legendselectchanged', function (params) {
             myChart.setOption({
                 legend:{selected:{[params.name]: true}}
             })
            console.log('点击了', params.name);
         });
      })
    },
 
  }
}
</script>
Logo

前往低代码交流专区

更多推荐