在vue中 echarts 饼图 legend 取消点击事件

取消点击事件两种方法:

  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}
    {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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容