在iview項目中添加echarts3

寫在前面

在即將結束的iview項目中，用到了大量的echarts3內容，簡要記錄下，在iview項目中，如何加載使用echarts3，並使其可以自適應頁面大小。

開始

1. 頁面模板中添加帶 id 的 div 元素

<template>
    <div style="width:100%;height:100%;" id="chart-div"></div>
</template>
複製代碼

2. js 代碼中引入echarts

import echarts from 'echarts';
複製代碼

3. data 中定義統計圖對象

data () {
    return {
        exampleChart: null // 統計圖對象
    }
},
複製代碼

4. computed 中計算統計圖option

computed: {
    exampleChartOption () {
        let xAxisData = [];
        let seriesData = [];
        
        // 動態數據的獲取及修改

        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['列子']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : xAxisData
                }
            ],
            yAxis: [
                {
                    type : 'value'
                }
            ],
            series: [
                {
                    name:'列子',
                    type:'line',
                    areaStyle: {
                        normal:{
                            // 折線圖 填充色的線性漸變
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: 'rgb(255, 70, 131)' // 0% 處的顏色
                            }, {
                                offset: 1, color: 'rgb(255, 158, 68)' // 100% 處的顏色
                            }], false)
                        }
                    },
                    data: seriesData
                }
            ]
        };

        return option;
    }
}
複製代碼

5. methods 中進行統計圖的繪製

經過 id 來綁定 div

methods: {
    drawExampleChart: function () {
        this.exampleChart = echarts.init(document.getElementById('chart-div'));
        this.exampleChart.setOption(this.exampleChartOption);
    }
}
複製代碼

6. mounted 中進行統計圖的掛載和 窗口自適應

$nextTick 是爲了確保dom元素已經構建了以後，才進行統計圖的繪製

mounted () {
    this.$nextTick(() => {
        this.drawExampleChart();

        let _self = this;
        window.addEventListener('resize', function () {
            _self.exampleChart.resize();
        });
    });
}
複製代碼

7. watch 中監聽 option 的改變，使統計圖從新渲染

deep: true 表示深度監聽，可監聽對象內的變化

watch: {
    exampleChartOption: {
        handler: function (newVal, oldVal) {
            if (this.exampleChart) {
                if (newVal) {
                    this.exampleChart.setOption(newVal);
                } else {
                    this.exampleChart.setOption(oldVal);
                }
            } else {
                this.drawExampleChart();
            }
        },
        deep: true
    }
}
複製代碼

8. 將該統計圖以組件的形式，加入到所需的頁面中。

總結

該iview項目中，用到了大量的echarts3，包括柱狀圖，折線圖，餅圖，雷達圖，散點圖，基於geojson數據加載的地圖，異性柱狀圖，遷徙圖。