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