echarts自定义外部legend（原理使数据为0）

<div class="bar-charts" ref="barCharts" id="myChart"></div>

setChartsOptions(pjbm, wcd) {
    let barCharts = Echarts.init(this.$refs.barCharts);
    let option = {
        title: {
            text: '图'
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: pjbm
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: wcd
        }]
    };
    barCharts.setOption(option)
}

请求返回的数据格式

data: [{
    pjbm: '建部',
    wcd: 10.0,
    show: true
}, {
    pjbm: '党建部',
    wcd: 90.0,
    show: true
}, {
    pjbm: '发展部',
    wcd: 35.0,
    show: true
}, {
    pjbm: '安监部',
    wcd: 90.0,
    show: true
}, {
    pjbm: '财务部',
    wcd: 40.0,
    show: true
}]

initData() {
    this.$api.chartPage.chartData().then(data = > {
        let pjbm = [];
        let wcd = [];
        data.forEach(item = > {
            pjbm.push(item.pjbm);
            wcd.push(item.wcd);
        });
        this.setChartsOptions(pjbm, wcd);
        this.data = data;
        //拷贝
        this.dataCopy = JSON.parse(JSON.stringify(data));
        this.pjbm = pjbm;
    })
},

页面渲染for循环

<div v-for="(item,index) in data" :key="index">
    <div style="display: flex;align-items: center;width: 100%;" @click="once(item,index)">
        <div style="width: 10px;height: 10px;background-color: red"></div> <span>{{item.pjbm}}</span>
    </div>
</div>

点击实现

once(item, index) {
    this.data.forEach(p = > {
        if (item.pjbm === p.pjbm) {
            p.show = !item.show
        }
        if (p.show === false) {
            p.wcd = 0;
        }
    });
    this.setChartsOptions(this.pjbm, this.data.map(v = > {
        this.dataCopy.map(p = > {
            if (v.pjbm === p.pjbm && v.show === true) {
                v.wcd = p.wcd;
            }
        });
        return v.wcd;
    }));
},

全部代码

<template>
    <div class="chart-page">
        <div class="bar-charts" ref="barCharts" :style="{width: '100%', height: '300px'}" id="myChart"></div>
        <div v-for="(item,index) in data" :key="index">
            <div style="display: flex;align-items: center;width: 100%;" @click="once(item,index)">
                <div style="width: 10px;height: 10px;background-color: red"></div> <span>{{item.pjbm}}</span>
            </div>
        </div>
    </div>
</template>
<script>
    import Echarts from 'echarts/lib/echarts';
    require('echarts/lib/chart/line');
    require('echarts/lib/chart/bar');
    require('echarts/lib/component/title');
    require('echarts/lib/component/tooltip');
    export
    default {
        name: "chartPage",
        data() {
            return {
                data: [],
                dataCopy: []
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            once(item, index) {
                this.data.forEach(p = > {
                    if (item.pjbm === p.pjbm) {
                        p.show = !item.show
                    }
                    if (p.show === false) {
                        p.wcd = 0;
                    }
                });
                this.setChartsOptions(this.pjbm, this.data.map(v = > {
                    this.dataCopy.map(p = > {
                        if (v.pjbm === p.pjbm && v.show === true) {
                            v.wcd = p.wcd;
                        }
                    });
                    return v.wcd;
                }));
            },
            initData() {
                this.$api.chartPage.chartData().then(data = > {
                    let pjbm = [];
                    let wcd = [];
                    data.forEach(item = > {
                        pjbm.push(item.pjbm);
                        wcd.push(item.wcd);
                    });
                    this.setChartsOptions(pjbm, wcd);
                    this.data = data;
                    this.dataCopy = JSON.parse(JSON.stringify(data));
                    this.pjbm = pjbm;
                })
            },
            setChartsOptions(pjbm, wcd) {
                let barCharts = Echarts.init(this.$refs.barCharts);
                let option = {
                    title: {
                        text: '不明白'
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: pjbm
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: wcd
                    }]
                };
                barCharts.setOption(option)
            }
        }
    }
</script>
<style scoped lang="scss">
    .chart-page {
    width: 100%;
    height: 100%;
}
</style>