Echarts 柱状图-值为0时柱状图数据

news2024/11/26 1:43:35

需求是这样的：当数据为0时，鼠标悬浮也需要展示对应的数据，当值很小，也需进行占位，所以要加barMinHeight

刚开始以为没有对应方案呢，然后在官网死磕，最后还是找到解决方案了.

echarts bar

打开官网地址

解决方案

将值为0的透明度设置为0（这里可以根据自己的需求而定，我是设置了透明度0.05，目的是有个用户感知），即使为0也会显示

图1.0如下

echarts
echarts
echarts
好了，现在设置完上述配置之后，就可以看到图1.0的效果了

let LoadTimeSet = ["2023-07-24","2023-07-25","2023-07-26","2023-07-28","2023-07-31","2023-08-03","2023-08-04","2023-08-07","2023-08-09","2023-08-10","2023-08-14","2023-08-16","2023-08-17"
]
let chartData = [] // 图标数据
uniqueData.forEach(item => { // uniqueData-是去重的物流方式
  chartData.push({
    name: item.shippingCompanyName,
    deliverDate: item.deliverDate,
    shortName: item.shortName,
    type: 'bar',
    barMaxWidth: 100,
    barMinHeight: 100,
    label: {
      show: true,
      position: 'top'
    },
    total: [], // 总票数
    data: [],
    idCode: `${item.deliverDate}#${item.shippingCompanyName}`
  })
chartData.map(item => {
 // 过滤对应的物流方式-shippingCompanyName
 let shippingMethodAll = (arrSet.filter(resData => `${resData.shippingCompanyName}` === item.name)) || []
 LoadTimeSet.map(item1 => { // 日期对应的数据
   let [sixtyDayRate] = shippingMethodAll.filter(i => i.deliverDate === item1) // 根据发货时间找出对应的妥投率
   if (sixtyDayRate) {
     if (sixtyDayRate.effectRate === 0) {
       item.data.push({ value: 0, itemStyle: { opacity: 0.05, borderColor: 'red' } })
     } else {
       item.data.push(sixtyDayRate.effectRate)// 柱子代表 签收率 effectRate 柱子代表
     }
     item.total.push(sixtyDayRate.drawRate) //  折线代表 提取率 drawRate
   } else {
     item.total.push(null)
     item.data.push(null)
   }
 })
})