写在前面

在即将结束的iview项目中，用到了大量的echarts3内容，简要记录下，在iview项目中，如何加载使用echarts3，并使其能够自适应页面大小。

开始

1. 页面模板中添加带 id 的 div 元素

<template><div style="width:100%;height:100%;" id="chart-div"></div>
</template>
复制代码

1. js 代码中引入echarts

import echarts from 'echarts';
复制代码

1. data 中定义统计图对象

data () {return {exampleChart: null // 统计图对象}
},
复制代码

1. 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;}
}
复制代码

1. methods 中进行统计图的绘制

通过 id 来绑定 div

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

1. mounted 中进行统计图的挂载和 窗口自适应

$nextTick 是为了确保dom元素已经构建了之后，才进行统计图的绘制

mounted () {this.$nextTick(() => {this.drawExampleChart();let _self = this;window.addEventListener('resize', function () {_self.exampleChart.resize();});});
}
复制代码

1. 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}
}
复制代码

1. 将该统计图以组件的形式，加入到所需的页面中。

总结

该iview项目中，用到了大量的echarts3，包括柱状图，折线图，饼图，雷达图，散点图，基于geojson数据加载的地图，异性柱状图，迁徙图。