1、创建div
<div id="anaysisEcharts" style="width: 100%; height: 95%"></div>
2、引入echarts和封装好的接口
import echarts from 'echarts'
import { totalAnaysis } from '@/api/billOrder'
3、在mounted中新增两个方法,一个用来初始化echarts,一个用来获取数据
this.initEaharts()
this.initData()
4、在mothods中获取数据和绘制图表
initData() {
totalAnaysis().then(res => {
// console.log(res,'统计分析图表数据');
let xData = [],
yData = []
res.data.forEach(item => {
xData.push(item.name)
yData.push(item.count)
})
//调用 this.initEahart,传值进去
this.initEaharts(xData, yData)
})
},
initEaharts(xData = [], yData = []) {
// 绘制图表
this.echart = echarts.init(document.getElementById('anaysisEcharts'))
this.echart.setOption({
backgroundColor: '#fff',
tooltip: { trigger: 'item' ,
***
## //鼠标悬浮柱体自定义数据显示格式,先打印params看下数据格式,里面有我们需要的数据,如上图所示
***
formatter:function(params){
// console.log(params);
let name = params.name;
let count = params.data;
return '名称:'+name+'<br>'+'xx数量:'+count
}
},
xAxis: {
axisTick: { show: true },
axisLine: { show: true },
axisLabel: {
textStyle: {
color: '#9B9B9B',
fontSize: 14
},
***
## // x轴文字倾斜,在 axisLabel中设置rotate的值
***
rotate: 40
},
data: xData
},
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '2%',
containLabel: true
},
yAxis: {
// name: 'title',
axisTick: { show: true }, //y轴刻度线
axisLine: { show: true }, //y轴竖线
splitLine: { lineStyle: { type: 'solid' } } //y轴内容区横线
},
dataZoom: [{ type: 'inside' }],
// toolbox: { right: 32, feature: { magicType: { type: ['bar', 'line'] } } },
series: [
{
// name: '时间',
type: 'bar',
barMaxWidth: 60,
itemStyle: { color: '#FF2D2D' },
***## 定值横线以及求平均值以及定值横线取消tooltip提示***
markLine: {
symbol: ['none', 'arrow'], //['none']表示是一条横线;['arrow', 'none']表示线的左边是箭头,右边没右箭头;['none','arrow']表示线的左边没有箭头,右边有箭头
label: {
position: 'end' //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
},
data: [
{
tooltip:{show:false},
type:'average',
silent: true, //鼠标悬停事件 true没有,false有
lineStyle: {
//警戒线的样式 ,虚实 颜色
type: 'dotted', //样式 ‘solid’和'dotted'
color: '#FF2D2D',
width: 1 //宽度
},
// yAxis: 20 // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
}
]
},
label: {
***
## //在柱体中显示数据,在series中设置label为true,如果要在最顶端显示,再加个position: 'top' 在最顶端显示
## 注意这里用到的 formatter是为了过滤数据为0则不显示,不然label为true的时候,数据为0 的也会显示,如上图所示
***
show: true,
formatter: function(params) {
if (params.value > 0) {
return params.value
} else {
return ' '
}
}
},
data: yData
}
]
})
this.echart.on('magictypechanged', params => {
this.echart.setOption({ xAxis: { boundaryGap: true } })
})
}