在 Vue 项目中使用 ECharts
说明
重要文件版本
- “vue”: “2.5.13”
- “vue-router”: “^3.0.1”
- “vuex”: “3.0.1”,
- “echarts”: “^4.0.2”
在 Vue 项目中使用 ECharts 只需要在 Vue 组件的
mounted生命周期中 初始化 ECharts，然后在每次配置项有变更时调用setOption()方法更新配置即可
编写 <Chart/> 封装图表组件
<template>
<div class="default-chart" :style="{width, height}"></div>
</template>
<script>
import * as echarts from 'echarts/lib/echarts';
import 'zrender/lib/svg/svg';
// 引入提示框和标题组件
import throttle from '../../utils/throttle';
export default {
name: 'basic-echarts',
props: { // 规范传入参数格式，以及默认值
renderer: {
type: String,
required: false
},
option: {
type: Object,
default: () => ({})
},
notMerge: {
type: Boolean,
default: false
},
lazyUpdate: {
type: Boolean,
default: false
}
},
data() {
return {
chart: null,
width: '100%',
height: '100%'
};
},
methods: {
// 初始化图表
initChart(el) {
// renderer 用于配置渲染方式 可以是 svg 或者 canvas
const renderer = this.renderer || 'canvas';
console.log(renderer);
this.chart = echarts.init(el, null, {
renderer,
width: 'auto',
height: 'auto'
});
},
// 设置配置项
setOption(option) {
if (!this.chart) {
return;
}
const notMerge = this.notMerge;
const lazyUpdate = this.lazyUpdate;
this.chart.setOption(option, notMerge, lazyUpdate);
},
// 销毁
dispose() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
// 重新渲染
resize() {
this.chart && this.chart.resize();
},
getInstance() {
return this.chart;
}
},
mounted() {
this.$nextTick(function() {
console.log('did mount');
this.initChart(this.$el);
this.setOption(this.option);
window.addEventListener('resize', throttle(this.resize, 100));
});
},
beforeDestroy() {
this.dispose();
},
watch: {
// 监视传入的 option 参数，如果有变化则重新设置配置项
option(newOpt) {
console.log('update config');
this.setOption(newOpt);
}
}
};
</script>
<style lang="scss" scoped>
@import '../../scss/_common.scss';
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
其他组件中引用图表组件
<!-- ECharts -- Radar -- 雷达图 -->
<template>
<Chart :renderer="renderer" :option="option"/>
</template>
<script>
import { mapActions, mapState } from 'vuex';
// 引入当前图表配置需要用到的图表、组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/legend';
import 'echarts/lib/chart/radar';
import 'echarts/map/js/china';
import Chart from '../components/Charts/index';
const colors = [
'#bcd3bb',
'#e88f70',
'#edc1a5',
'#9dc5c8',
'#e1e8c8',
'#7b7c68',
'#e5b5b5',
'#f0b489',
'#928ea8',
'#bda29a'
];
export default {
name: 'echarts-radar',
data() {
return { renderer: 'canvas' };
},
computed: {
...mapState('charts', { currentData: 'radar' }),
provinces() {
const currentData = this.currentData || [];
return currentData.map(data => data.province);
},
// option 合并传入的数据，返回一个 echarts 的 配置项
option() {
return {
backgroundColor: '#161627',
title: {
text: 'AQI - 雷达图',
left: 'center',
textStyle: {
color: '#eee'
}
},
legend: {
bottom: 5,
data: this.provinces,
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
},
selectedMode: 'single'
},
radar: {
indicator: [
// 雷达图指示器
{ name: 'AQI', max: 200 },
{ name: 'PM2.5', max: 250 },
{ name: 'PM10', max: 250 },
{ name: 'CO', max: 5 },
{ name: 'NO2', max: 150 },
{ name: 'SO2', max: 120 }
],
shape: 'circle', // 形状
splitNumber: 5, // 分割段数
splitLine: {
// 分隔线
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)',
'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)'
].reverse()
}
},
splitArea: {
// 分割区域
show: false
},
axisLine: {
// 坐标轴轴线
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
},
series: this.provinces.map((province, idx) => {
return {
name: province,
type: 'radar',
lineStyle: {
width: 1,
opacity: 0.5
},
data: this.currentData[idx].data,
symbol: 'none',
itemStyle: {
color: colors[idx % colors.length]
},
areaStyle: {
opacity: 0.05
}
};
})
};
}
},
methods: {
...mapActions('charts', ['changeData'])
},
// 组件装载前请求数据
async beforeMount() {
const path = '/radar';
const key = 'radar';
await this.changeData({ path, key });
},
components: { Chart }
};
</script>
<style lang="scss" scoped>
@import '../scss/_common.scss';
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
其他
原文发布时间：2018年02月08日
作者：
mjzhang1993
文章来源：
CSDN
如需转载请联系原作者
