如何在零值时隐藏圆环图，在空值EchartsJs时显示灰色图表
如何在零值时隐藏圆环图，在空值EchartsJs时显示灰色图表
提问于 2021-08-07 05:02:56
在我的项目中，我正在使用EchartsJS作为ChartJs的替代品，但我被要求执行以下操作：
当所有项目都具有value = 0时，图表必须隐藏，但默认情况下，EchartJ将平等地显示所有颜色。我想要的是隐藏它
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>
回答 1
Stack Overflow用户
发布于 2021-08-07 09:19:00
您可以检查数据的每个值，如果所有值都为零，则生成新数据。将所有想要的饼图颜色作为数组传递以显示结果。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68689548
复制相关文章
相似问题
腾讯云开发者
