Vue怎么封裝Echarts圖表

這篇文章主要講解了“Vue怎么封裝Echarts圖表”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue怎么封裝Echarts圖表”吧！

在開(kāi)始之前，我們先按照正常的組件注冊(cè)流程，在項(xiàng)目components目錄中新建一個(gè)名為radar-chart的組件，然后在一個(gè)Demo頁(yè)面引入該組件使用。

新建的 radar-chart 組件內(nèi)容：

// radar-chart.vue （子組件）
<template>
    <p style="width: 100%; height: 100%;"></p>
</template>

<script>
export default {
    name: 'radar-chart'
};
</script>

<style scoped>

</style>

Demo 頁(yè)面代碼：

// demo.vue （父組件）
<template>
    <p style="border: 1px solid black; width: 400px; height: 300px; margin: 5px;">
        <radar-chart></radar-chart>
    </p>
</template>

<script>
import radarChart from '@/components/proj-components/echarts/radar-chart';
export default {
    name: 'radar-chart-demo',
    components: {
        radarChart,
    },
};
</script>

<style scoped>

</style>

Demo 頁(yè)面效果圖一：

初始化圖表

準(zhǔn)備工作完成之后，我們要做的是引入 ECharts，并在組件中初始化一個(gè) ECharts 的實(shí)例，這里可以先照搬官網(wǎng)的實(shí)例和數(shù)據(jù)。
（1）在 radar-chart.vue 引入 ECharts ：

// radar-chart.vue （子組件）
import echarts from 'echarts';

（2）在 methods 中創(chuàng)建圖表配置數(shù)據(jù)的方法，數(shù)據(jù)格式參考 Echarts 官網(wǎng)：

// radar-chart.vue （子組件）

    methods: {
        // 初始化圖表配置
        initOption() {
            let vm = this;
            vm.option = {
                title: {
                    text: '基礎(chǔ)雷達(dá)圖'
                },
                tooltip: {},
                legend: {
                    data: ['預(yù)算分配（Allocated Budget）', '實(shí)際開(kāi)銷（Actual Spending）']
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [{ name: '銷售（sales）', max: 6500}, { name: '管理（Administration）', max: 16000}, { name: '信息技術(shù)（Information Techology）', max: 30000}, { name: '客服（Customer Support）', max: 38000}, { name: '研發(fā)（Development）', max: 52000}, { name: '市場(chǎng)（Marketing）', max: 25000}]
                },
                series: [{
                    name: '預(yù)算 vs 開(kāi)銷（Budget vs spending）',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data: [{value: [4300, 10000, 28000, 35000, 50000, 19000], name: '預(yù)算分配（Allocated Budget）'}, {value: [5000, 14000, 28000, 31000, 42000, 21000], name: '實(shí)際開(kāi)銷（Actual Spending）'}]
                }]
            };
        },
    },

（3）初始化圖表： 在組件鉤子 mounted 方法中：

// radar-chart.vue （子組件）
    mounted() {
        this.initOption();
        this.$nextTick(() => { // 這里的 $nextTick() 方法是為了在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。也就是延遲渲染圖表避免一些渲染問(wèn)題
            this.ready();
        });
    },

在 methods 中：

// radar-chart.vue （子組件）
   ready() {
      let vm = this;
      let dom = document.getElementById('radar-chart');

      vm.myChart = echarts.init(dom);
      vm.myChart && vm.myChart.setOption(vm.option);
   },

Demo 頁(yè)面效果圖二：

這里一共分了三步，引入 ECharts、初始化圖表配置、初始化圖表，最后可以在 Demo 頁(yè)面中看到，已經(jīng)初步地把 ECharts 的雷達(dá)圖顯示到項(xiàng)目中來(lái)了。

提取圖表配置屬性（重點(diǎn)）

上面我們已經(jīng)成功創(chuàng)建一個(gè)雷達(dá)圖了，但是很明顯的是，radar-chart.vue 里的數(shù)據(jù)寫(xiě)死的，無(wú)法重復(fù)調(diào)用。接下來(lái)著手封裝的事情了。

封裝的思路是這樣的：

1、demo.vue 向 radar-chart.vue 傳遞一組個(gè)性化數(shù)據(jù)

2、radar-chart.vue 通過(guò) props 選項(xiàng)接收數(shù)據(jù)

3、提煉接收到的數(shù)據(jù)，覆蓋配置數(shù)據(jù) option

4、初始化圖表

具體實(shí)現(xiàn)： 向子組件傳遞數(shù)據(jù)，在 data 中定義變量，在 mounted 中賦值

// demo.vue （父組件）
<template>
    <p style="border: 1px solid black; width: 900px; height: 600px; margin: 5px;">
        <radar-chart :indicator="indicator" :legendData="radarData"></radar-chart>
    </p>
</template>

<script>
import radarChart from '@/components/proj-components/echarts/radar-chart';
export default {
    name: 'radar-chart-demo',
    components: {
        radarChart,
    },
    mounted() {
        this.indicator = [
            { name: '銷售', max: 6500 },
            { name: '管理', max: 16000 },
            { name: '信息技術(shù)', max: 30000 },
            { name: '客服', max: 38000 },
        ];
        this.radarData = [
            {
                value: [4000, 15000, 26000, 21000],
                name: '實(shí)際開(kāi)銷（Actual Spending）',
            }
        ];
    },
    data() {
        return {
            indicator: [], // 雷達(dá)指示器數(shù)據(jù)
            legendData: [], // 雷達(dá)圖例數(shù)據(jù)
        };
    },
};
</script>

<style scoped>

</style>

在 props 中接收來(lái)自父組件的數(shù)據(jù)

// radar-chart.vue （子組件）

    props: {
        // 指示器數(shù)據(jù)，必傳項(xiàng)
        // 格式舉例 [{ name: 'a', max: 1},{ name: 'a', max: 1},{ name: 'a', max: 1}]
        indicator: {
            type: Array,
            default: () => []
        },
        // 圖例數(shù)據(jù)，必填項(xiàng)。
        // 格式舉例 [{ value: [5000, 14000, 28000], name: 'name' }，{ value: [5000, 14000, 28000], name: 'name' }]
        legendData: {
            type: Array,
            default: () => []
        },
    },

在 ready() 中更新圖表數(shù)據(jù) option 如果在這里更新 indicator、data 這兩個(gè)屬性值，initOption() 中就不需要初始化這兩個(gè)值了

// radar-chart.vue （子組件）

    ready() {
       let vm = this;
       let dom = document.getElementById('radar-chart');

       vm.myChart = echarts.init(dom);

       // 得到指示器數(shù)據(jù)
       vm.option.radar.indicator = vm.indicator;
       // 得到圖例數(shù)據(jù)
       vm.option.series[0].data = vm.legendData;

       vm.myChart && vm.myChart.setOption(vm.option);
    },

Demo 頁(yè)面效果圖三：

細(xì)節(jié)優(yōu)化與其他注意事項(xiàng)：

1.一個(gè)頁(yè)面有多個(gè)圖表的情況下，自動(dòng)生成圖表 ID。

// radar-chart.vue （子組件）
<template>
    <p :id="chartId" style="height: 100%; width: 100%;"></p>
</template>

<script>
let chartIdSeed = 1;

export default {
    data() {
        return {
            chartId: 1,
        };
    },
    mounted() {
        let vm = this;
        vm.chartId = 'radar-chart_' + chartIdSeed++;
    },
    methods: {
        let vm = this;
        let dom = document.getElementById(vm.chartId);
    }
};
</script>

2.圖表數(shù)據(jù)屬性用 props 接收，圖表默認(rèn)配置屬性用 defaultConfig 保存，父組件傳入的配置屬性 chartConfig 通過(guò) $attrs 直接取得，最終合并為 finallyConfig 使用，利于擴(kuò)展與維護(hù)。

// radar-chart.vue （子組件）

<script>
export default {
    data() {
        return {
            // 默認(rèn)配置項(xiàng)。以下配置項(xiàng)可以在父組件 :chartConfig 進(jìn)行配置，會(huì)覆蓋這里的默認(rèn)配置
            defaultConfig: {
                tooltipShow: true
            },
            finallyConfig: {}, // 最后配置項(xiàng)
        };
    },
    mounted() {
        // 在這里合并默認(rèn)配置與父組件傳進(jìn)來(lái)的配置
        vm.finallyConfig = Object.assign({}, vm.defaultConfig, vm.$attrs.chartConfig);
    },
    methods: {
        initOption() {
            vm.option = {
                tooltip: {
                    show: vm.finallyConfig.tooltipShow, // 在這里使用最終配置
                },
            }
        },
    }
};
</script>

3.使用 watch 監(jiān)聽(tīng)圖表數(shù)據(jù)更新

// radar-chart.vue （子組件）
    watch: {
        legendData() {
            this.$nextTick(() => {
                this.ready();
            });
        }
    },

4.添加窗口 resize 事件和圖表 click 事件

// radar-chart.vue （子組件）

export default {
    data() {
        return {
            chartResizeTimer: null, // 定時(shí)器，用于resize事件函數(shù)節(jié)流
        };
    },
    methods: {
        ready() {
            // 添加窗口resize事件
            window.addEventListener('resize', vm.handleChartResize);
            
            // 觸發(fā)父組件的 @chartClick 事件
            vm.myChart.on('click', function(param) {
                vm.$emit('chartClick', param);
            });
        },
        
        // 處理窗口resize事件
        handleChartResize() {
            let vm = this;
            clearTimeout(vm.chartResizeTimer);
            vm.chartResizeTimer = setTimeout(function() {
                vm.myChart && vm.myChart.resize();
            }, 200);
        },
    },
    beforeDestroy() {
        // 釋放該圖例資源，較少頁(yè)面卡頓情況
        if (this.myChart) this.myChart.clear();
        // 移除窗口resize事件
        window.removeEventListener('resize', this.handleChartResize);
    }
};

感謝各位的閱讀，以上就是“Vue怎么封裝Echarts圖表”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue怎么封裝Echarts圖表這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！