写在前面
在即将结束的iview项目中,用到了大量的echarts3内容,简要记录下,在iview项目中,如何加载使用echarts3,并使其能够自适应页面大小。
开始
- 页面模板中添加带 id 的 div 元素
<template>
<div style="width:100%;height:100%;" id="chart-div"></div>
</template>
复制代码
- js 代码中引入echarts
import echarts from 'echarts';
复制代码
- data 中定义统计图对象
data () {
return {
exampleChart: null // 统计图对象
}
},
复制代码
- 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;
}
}
复制代码
- methods 中进行统计图的绘制
通过 id 来绑定 div
methods: {
drawExampleChart: function () {
this.exampleChart = echarts.init(document.getElementById('chart-div'));
this.exampleChart.setOption(this.exampleChartOption);
}
}
复制代码
- mounted 中进行统计图的挂载和 窗口自适应
$nextTick 是为了确保dom元素已经构建了之后,才进行统计图的绘制
mounted () {
this.$nextTick(() => {
this.drawExampleChart();
let _self = this;
window.addEventListener('resize', function () {
_self.exampleChart.resize();
});
});
}
复制代码
- 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
}
}
复制代码
- 将该统计图以组件的形式,加入到所需的页面中。
总结
该iview项目中,用到了大量的echarts3,包括柱状图,折线图,饼图,雷达图,散点图,基于geojson数据加载的地图,异性柱状图,迁徙图。