在 Vue 專案中使用 ECharts
阿新 • • 發佈:2019-02-03
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 }
};