如图所示,数据全部为0时,y轴默认显示0~1,需求为将y轴修改为整数。
代码如下:
let flag=0
for(let i=0;i<this.data1.length;i++){
if(this.data1[i]==0){
flag++
}else{
flag--
}
}
if(flag==this.data1.length){
this.options.yAxis[0].min=10
}else{
this.options.yAxis[0].min=null
}
完整代码如下:
<template>
<div style="width: 100%;height: 100%;">
<div class="wh100" ref="barchart"></div>
</div>
</template>
<script>
let echarts = require("echarts");
export default {
data() {
return {
options: {
"tooltip": {
"trigger": "axis",
},
"grid": {
"borderWidth": 0,
"top": '15%',
"left": '8%',
"right": '6%',
"bottom": '10%',
textStyle: {
color: "#fff"
}
},
"legend": {
show:false,
right: '2%',
top: '5%',
textStyle: {
color: '#666666',
},
"data": ['烟感告警', '水位告警', '电气火灾告警', '已消警']
},
"calculable": true,
"xAxis": [
{
"type": "category",
"axisLine": {
lineStyle: {
color: '#E6E6E6'
},
},
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitArea": {
"show": false
},
"axisLabel": {
color: '#999999'
},
"data": [],
}],
"yAxis": [
{
name: "次数",
nameTextStyle:{
padding: [3, 4, 5, -18]
},
min:0,
"type": "value",
"splitLine": {
"show": true,
lineStyle: {
color: 'rgba(238,238,238,1)'
}
},
"axisLine": {
show: false,
lineStyle: {
color: '#90979c'
}
},
"axisTick": {
"show": false
},
"axisLabel": {
"interval": 0,
},
"splitArea": {
"show": false
},
}],
"series": [
{
"type": "line",
"stack": "总量",
"barMaxWidth": 26,
"barGap": "10%",
"itemStyle": {
"normal": {
"color": "#3EC5FB"
}
},
"data": [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
],
},
]
},
barchart: null
};
},
props: ['dataX', 'data1', 'data2'],
mounted() {
this.init();
window.addEventListener("resize", () => {
if (this.barchart) {
this.barchart.resize();
}
});
},
components: {},
computed: {},
methods: {
init() {
this.options.xAxis[0].data = this.dataX
this.options.series[0].data = this.data1
let flag=0
for(let i=0;i<this.data1.length;i++){
if(this.data1[i]==0){
flag++
}else{
flag--
}
}
if(flag==this.data1.length){
this.options.yAxis[0].min=10
}else{
this.options.yAxis[0].min=null
}
let chartDom = this.$refs["barchart"];
this.barchart = echarts.init(chartDom)
this.barchart.setOption(this.options)
},
},
beforeDestroy() {
if (this.barchart) {
this.barchart.clear();
this.barchart = null;
}
},
watch: {
dataX (val) {
this.init()
}
}
};
</script>
<style scoped lang="scss">
@import '../assets/css/mixin';
</style>