Vueでecharts柱状図のドリルダウンを実現

効果図
シーンの適用
年売上高から月売上高など、データのドリルダウンを実現する必要があり、応用シーンが多い.
html

<template>
    <div class="chart">
        <div ref="chartEle" id="chart" style="width: 100%; height: 600px; margin: 0 auto;">div>
        <div class="btn-box">
            <el-button @click="getChartData('month')">clickel-button>
            <el-button @click="reset">resetel-button>
            <el-button @click="prev">prevel-button>
        div>
    div>
template>

js

    export default {
        name: "Chart",
        data() {
            return {
                myChart: null,
                status: 2,
                month: '01',
                date: '2019-01-01'
            }
        },
        mounted() {
            this.myChart = this.$echart.init(this.$refs.chartEle);

            this.clickChart();
        },
        methods: {
            //    
            renderChart(xData, yData, name) {
                let option = {
                    color: ['#bfccff'],
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    xAxis: {
                        data: xData,
                        name: name
                    },
                    yAxis: {
                        name: 'sunlight'
                    },
                    series: [{
                        name: name,     //           ，         
                        type: name == 'h' ? 'line' : 'bar',
                        smooth: true,
                        barCategoryGap: '50%',
                        data: yData,
                        itemStyle: {
                            color: new this.$echart.graphic.LinearGradient(
                                0, 0, 0, 2,
                                [
                                    {offset: 0, color: '#C346C2'},
                                    {offset: 0.5, color: '#F5CBFF'}
                                ])
                        },
                        areaStyle: {}
                    }]
                };

                this.myChart.setOption(option);

                window.addEventListener('resize', () => {
                    this.myChart.resize();
                });
            },
            //      
            getChartData(name) {
                const url = '/power/projPower/getAll';

                let data = {
                    'pid': 990,
                    'status': this.status,
                    'month': this.month,
                    'date': this.date
                };

                this.$ajax.get(url, {
                    'params': data
                }).then(res => {
                    if (res.code == 200) {
                        this.renderChart(res.data.times, res.data.number, name);
                    }
                })
            },
            //      
            clickChart() {
                this.myChart.on('click', params => {
                    switch (params.seriesName) {
                        case 'month':
                            this.status = 1;
                            this.month = params.name.length < 2 ? '0'.concat(params.name) : params.name;
                            this.getChartData('day');
                            break;
                        case 'day':
                            this.status = 0;
                            this.date = params.name.length < 2 ? '0'.concat(params.name) : params.name;
                            this.date = '2019-' + this.month + '-' + this.date;
                            this.getChartData('h');
                            break;
                        default:
                            break;
                    }
                })
            },
            //         
            reset() {
                this.status = 2;
                this.getChartData('month');
            },
            //         
            prev() {
                switch (this.status) {
                    case 1:
                        this.status = 2;
                        this.getChartData('month');
                        break;
                    case 0:
                        this.status = 1;
                        this.getChartData('day');
                        break;
                    default:
                        break;
                }
            }
        }
    }

実装の原理
一、echartsインスタンスオブジェクトは独立して宣言され、一度しかありません.二、グラフclickイベントはレンダリング関数の外に書かれています.私が実現する過程で,結合度を低減することが重要であり,コードの分割が簡単であればあるほど多くの問題を回避できる.