在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数据加载的地图，异性柱状图，迁徙图。

转载于:https://juejin.im/post/5bea6a0d51882516fa637378