如何在值为零时隐藏圆环图并在空值时显示图表灰色 Echarts Js答案

【问题标题】：How to hide Donut Chart when value zero and show chart grey when empty value EchartsJs如何在值为零时隐藏圆环图并在空值时显示图表灰色 Echarts Js
【发布时间】：2021-08-07 05:02:55
【问题描述】：

我在我的项目中使用 EchartsJS 作为 ChartJs 的替代品但我被要求执行以下操作：

当所有项目都有value = 0时，图表必须隐藏，但默认情况下EchartJs会平等地显示所有颜色。我想要的是隐藏它

data: [
   {value: 0, name: 'Item A'},
   {value: 0, name: 'Item B'},
   {value: 0, name: 'Item C'},
   {value: 0, name: 'Item D'},
   {value: 0, name: 'Item E'}
]

当数据为空时，我希望图表显示灰色#EEE，并在中间显示No data。目前如果数据为空，图表将不会显示。谢谢大家！

data: []

 // based on prepared DOM, initialize echarts instance
 var myChart = echarts.init(document.getElementById('main'));

// specify chart configuration item and data
var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Donut chart',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 0, name: 'Item A'},
                {value: 0, name: 'Item B'},
                {value: 0, name: 'Item C'},
                {value: 0, name: 'Item D'},
                {value: 0, name: 'Item E'}
            ]
        }
    ]
};

        // use configuration item and data specified to show chart
 myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

【问题讨论】：

标签： jquery echarts donut-chart

【解决方案1】：

您可以检查数据的每个值，如果所有值都为零，则生成新数据。将所有想要的饼图颜色作为数组传递以显示结果。

var data = [{
    value: 0,
    name: 'Item A'
  },
  {
    value: 0,
    name: 'Item B'
  },
  {
    value: 0,
    name: 'Item C'
  },
  {
    value: 0,
    name: 'Item D'
  },
  {
    value: 0,
    name: 'Item E'
  }
]
var ar = [];
data.forEach((repo) => {
  ar.push(`${repo.value}`);
});

if (ar.every((val, i, ar) => val == 0))
  data = [{
    value: 0,
    name: 'No data'
  }]

// Pass other color based upon condition.   <----------  
var yourColor = ['#ededed']; //['#00b04f', '#ffbf00', 'ff0000']

// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));

// specify chart configuration item and data
var option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [{
    name: 'Donut chart',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '40',
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: data,
   color: yourColor
  }]
};

// use configuration item and data specified to show chart
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

【讨论】：