vue項目中，使用了echarts的柱狀圖，折線圖，餅圖，雷達圖等javascript
1、柱狀圖：vue
<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>
圖表：java
若是要實現柱狀圖橫向，可設置：canvas
將xAxis的type設置爲value, 將yAxis的type設置爲category便可實現橫向顯示api
2、雷達圖：瀏覽器
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
最後，echarts圖表的自適應：函數
echart圖表自己是提供了一個resize的函數，當瀏覽器發生resize事件的時候，讓其觸發echart的resize事件，重繪canvas字體
用window.onresize = myChart.resize; 能夠完成echarts圖表的自適應，this
若是是多個echarts圖表，就會發現只有最後一個圖表能自適應，因此需使用 addEventListener監聽全部圖表：
mounted:{
this.initEchart()
},
methods:{
initEchart(){
window.addEventListener('resize',()=>{
this.chart = echarts.init(this.$refs.bookTotalChart);
this.chart.resize();
})
}
}