鼠标指上去,柱子消失或者闪动,原因是在设置柱子颜色的时候用到了透明,但没有使用rgba,hover时透明就会消失,把颜色改成对应的rgba就可以了。
before:
after:
整体代码:
getUnitReportChart(){
let chooseBtnColor=[]
if(this.queryParams2.queryType==1){//实际采购量
chooseBtnColor=["#34cdfb","rgba(52, 205, 251, 0.74)","rgba(52, 205, 251, 0.58)"]
}else if(this.queryParams2.queryType==2){//实际使用量
chooseBtnColor=["#f3a406","#ffba00","#f2e43f"]
}else if(this.queryParams2.queryType==3){//计划采购量
chooseBtnColor=["#3240f8","rgba(50, 64, 248, 0.86)", "rgba(50, 64, 248, 0.73)"]
}
getDeptReport(this.queryParams2).then(res=>{//拉取接口数据
console.log(res.data)
let xdata=['nnn','cc','dd','hh']
let arr = [{name:2019,data:[3,12,1274,0]},{name:2020,data:[120,1230,1174,0]},{name:2021,data:[1110,56,1274,1440]}]
// let xdata=res.data.ydata
// let arr=res.data.xdata
arr.forEach((item,i)=>{//根据接口返回的数据动态设置echarts的option中series
item.type='bar',
item.barWidth='50%',
item.barMaxWidth= 30,
item.itemStyle={normal:{label:{
show:true,
position:"top",
formatter: function(item) {
return item.seriesName;//设置柱子上面显示年份文字,
//item.seriesName是series数组里的的name item.name是xAxis里的data值,即X轴的名字,item.value是值
},
textStyle:{
fontWeight:"bolder",
fontSize:"12",
color:"#606266"
}},
color:chooseBtnColor[i],//根据颜色数组动态设置每根柱子的颜色
},
}
})
let Option={
tooltip: {
trigger: 'item',
},
grid: {
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: "#A5AFB8",
},
},
splitLine: {
show: true,
lineStyle: {
//网格
color: ["#F4F7FB"],
width: 1,
type: "solid",
},
},
data:xdata,
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "##02cdff",
},
},
splitLine: {
show: true,
lineStyle: {
//网格
color: ["#F4F7FB"],
width: 1,
type: "solid",
},
},
},
series: arr
}
let pinmingechart = document.querySelector("#erjidanweiechart");
let myChart = echarts.init(pinmingechart);
myChart.clear();
myChart.setOption(Option,true);
let listener = function () {
myChart.resize();
};
this.EleResize.on(pinmingechart, listener);
})
},