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

Question

我在我的项目中使用 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>

Answer 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>