vue項目中，使用了echarts的柱狀圖，折線圖，餅圖，雷達圖等
一、柱狀圖：
<template>
<div ref="readerAnalyze" id="reader_analyze_chart"></div>
</template>
<script>
import echarts from 'echarts'
import { getaReaderAnalysis } from '@/api/big-screen.js'
export default {
props: ['refresh'],
data() {
return {
}
},
watch: {
refresh() {
setTimeout(() => {
this._getaReaderAnalysis()
}, 2000)
}
},
mounted() {
this._getaReaderAnalysis()
this.initEchart()
},
methods: {
initEchart() { //頁面有多個echarts表，多個圖表自適應
window.addEventListener('resize', () => {
this.chart = echarts.init(this.$refs.readerAnalyze);
this.chart.resize();
})
},
// 大屏數據—讀者分析（最近一周）
_getaReaderAnalysis() {
getaReaderAnalysis().then(res => {
if (res.data.errcode === 0) {
let data = res.data.data
//從小往大排序
data = data.sort((a, b) => new Date(a.date) - new Date(b.date))
this.readerAnalyzeChart(this.formatData(data))
}
})
},
//格式化數據
formatData(data) {
let date = []
let total = []
let newAdd = []
for (let i = 0; i < data.length; i++) {
date.push(data[i].date)
total.push(data[i].total)
newAdd.push(data[i].newAdd)
}
let readerTrend = {
date: date,
total: total,
newAdd: newAdd
}
return readerTrend
},
readerAnalyzeChart(data) {
let readerAnalyzeChart = echarts.init(this.$refs.readerAnalyze)
let option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
top: '50', //圖表內容距上下左右的距離，可設置top，left，right，bottom
bottom: '5%',
containLabel: true
},
legend: {
data: ['讀者總量', '當日增加'],
textStyle: {
color: '#fff',
fontWeight: 'bold'
}
},
toolbox: {
show: true,
},
calculable: true,
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: { //x軸顏色和字體大小
color: '#fff',
fontSize: '12'
}
},
axisTick: { show: false },
axisLabel: { //x軸參數旋轉角度
interval: 0,
rotate: 40
},
data: data.date
}
],
yAxis: [
{
type: 'value',
splitLine: {
lineStyle: { //y軸參考線顏色，如果要隱藏，可設置為 color： "none"
color: '#415175'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
}
],
series: [
{
name: '讀者總量',
type: 'bar',
barWidth: '25%', //設置柱狀圖寬度
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
color: new echarts.graphic.LinearGradient( //柱狀圖顏色漸變
0, 0, 0, 1,
[
{ offset: 0, color: '#FAB501' },
{ offset: 1, color: '#F75027' }
]
)
}
},
data: data.total
},
{
name: '當日增加',
type: 'bar',
barWidth: '25%',
itemStyle: {
normal: {
color: '#2AA2D5', //柱狀圖顏色
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
}
}
},
data: data.newAdd
}
]
};
readerAnalyzeChart.setOption(option)
}
}
}
</script>
圖表：
如果要實現柱狀圖橫向，可設置：
將xAxis的type設置為value, 將yAxis的type設置為category即可實現橫向顯示
二、雷達圖：
bookCategory(data){
let bookCategoryChart = echarts.init(document.getElementById('book-category'))
let option = {
tooltip: {
trigger: 'item',
position:function(p){ //其中p為當前鼠標的位置
return [p[0], p[1]];
},
},
legend: {
orient: 'vertical',
right: '2%',
textStyle: {
color:'#DFE0E5',
fontWeight: 'bold'
},
data: ['書刊類別分布', '借閱類別分布']
},
radar: {
splitNumber: 2, // 雷達圖圈數設置
center: ['45%','50%'],
radius : '65%',
name: {
textStyle: {
color: '#DFE0E5',
backgroundColor: '#121E36'
}
},
indicator: data.indicator,
splitArea : {
show : false,
areaStyle : {
color: 'rgba(255,0,0,0)', // 圖表背景的顏色
},
},
},
series: [{
name: '書刊類別 vs 借閱類別',
type: 'radar',
data : [
{
value : data.bookCat,
name : '書刊類別分布',
itemStyle: {
normal: {
color:'#F75325' //顯示顏色與填充顏色對應
}
},
areaStyle: {
normal: {
color: '#F75325' //填充的顏色
}
}
},
{
value : data.borrowCat,
name : '借閱類別分布',
itemStyle: {
normal: {
color:'#7B52CC'
}
},
areaStyle: {
normal: {
color: '#7B52CC'
}
}
}
]
}]
};
bookCategoryChart.setOption(option)
}
圖表 ：
最后，echarts圖表的自適應：
echart圖表本身是提供了一個resize的函數，當瀏覽器發生resize事件的時候，讓其觸發echart的resize事件，重繪canvas
用window.onresize = myChart.resize; 可以完成echarts圖表的自適應，
如果是多個echarts圖表，就會發現只有最后一個圖表能自適應，所以需使用 addEventListener監聽所有圖表：
mounted:{
this.initEchart()
},
methods:{
initEchart(){
window.addEventListener('resize',()=>{
this.chart = echarts.init(this.$refs.bookTotalChart);
this.chart.resize();
})
}
}