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();
})
}
}