解决echarts柱状图鼠标指上时柱子消失或闪动

鼠标指上去,柱子消失或者闪动,原因是在设置柱子颜色的时候用到了透明,但没有使用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);
          })
        },

 

 

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值