其他分享
首页 > 其他分享> > Echarts环形图设置空数据样式

Echarts环形图设置空数据样式

作者:互联网

需求背景

由于最近的需求涉及到图表的展示,所以引入Echarts来渲染图表,但是问题也随之而来了,仔细阅读过文档后发现,Echarts对于环形图并没有能够设置默认样式的地方,对于空数据,界面直接就是空白一片,产品不能接受,没办法只能一顿捣鼓了。

解决问题的方法

经过一番捣鼓后,想到,既然组件不支持空数据,而且还想显示一个带颜色的默认的圆环,那么我们就可以给数据项后多添加一个数据,即默认数据
代码如下:

// 处理空数据
    if (props.chartdata?.filter(item => item.value > 0).length === 0) {
      tempdata.push({
        value: 100,
        name: ''
      })
    }

这里的props.chartdata即为传入的表格数据,当传入表格的数据的value没有0的时候,即数据为空,补充一个数据给图表。
注意:
补充的这一项name值必须为空,否则会显示底部指标文案
在这里插入图片描述
加入图片后,我们发现,虽然是空数据,但是还是显示了0% 这个是我们不希望看到的,所以需要进一步处理

优化我们的图表

1、去除空数据指标

这个还是需要在传入数据前做处理,即将数据的value设置为 null,具体代码如下:

tempdata.map(item => {
      if (!item.value) {
        item.value = null;
        return item;
      }
    })

效果如下:
在这里插入图片描述

现在好一点了,但是我们发现那个设置的空数据,还显示了根线条,继续优化

2、去除默认数据的线条

labelLine: {
            normal: {
              lineStyle: {
                opacity: tempdata.length === 6 ? 0 : 1
              }
            }
          },

说明一下,这里,我们通过在series中设置laberLine的样式,通过判断数据长度来控制线条透明度进而控制线条是否显示。
效果如下:
在这里插入图片描述
处理完这一步后,比较完美了,但是我们的测试小姐姐还是发现了另外一个问题,当鼠标放到圆环上的时候,又变成空白了,这个问题产生的原因是:Echarts是有默认动画的,鼠标放上去会有放大效果,所以,我们需要禁止空数据时的动画。
在这里插入图片描述

禁止空数据时鼠标移入动画

代码如下:

silent:tempdata.length === 6 ? true : false,
hoverAnimation:tempdata.length === 6 ? false : true,

效果如下
在这里插入图片描述
至此大工告成!谢谢大家的阅读。

完整代码如下:

let tempdata = props.chartdata;
    if (props.chartdata?.filter(item => item.value > 0).length === 0) {
      tempdata.push({
        value: 100,
        name: ''
      })
    }
    tempdata.map(item => {
      if (!item.value) {
        item.value = null;
        return item;
      }
    })
    let myChart = echarts.init(document.getElementById('chart'))
    myChart.setOption({
      legend: {
        show: true,
        left: 'center',
        y: 'bottom',
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 16,
      },
      grid: {
        x: 100,
        y: 20,
        bottom: 30,
      },
      series: [
        {
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['30%', '55%'],
          data: tempdata,
          color: ['#6699FF', '#52CCA3', '#9580FF', '#A1E6CE', '#B3CDFF', "#E9F0FF"],
          label: {
            position: 'outside',
            alignTo: 'none',
            formatter: function (item) {
              return item.name.split(' ')[2]
            }
          },
          silent:tempdata.length === 6 ? true : false,
          hoverAnimation:tempdata.length === 6 ? false : true,
          // 是否避免标签显示超出,这个设置为true后,导致指标较小的时候指标显示异常
          // avoidLabelOverlap: false,  
          labelLine: {
            normal: {
              lineStyle: {
                opacity: tempdata.length === 6 ? 0 : 1
              }
            }
          },
        },
      ]
    })

标签:样式,true,tempdata,环形,value,item,length,数据,Echarts
来源: https://blog.csdn.net/woyidingshijingcheng/article/details/111247191