echarts饼图无数据时,显示饼图黑框
时间: 2023-08-24 10:53:56 浏览: 112
echarts图表 饼图
你可以通过设置饼图的样式来实现当无数据时显示饼图黑框的效果。具体的实现方式如下:
1. 首先,你需要在ECharts的配置项中设置`graphic`属性,用于绘制无数据时的黑框。示例如下:
```javascript
option = {
...
graphic: [{
type: 'rect',
left: 'center',
top: 'center',
shape: {
width: 100,
height: 100
},
style: {
fill: 'rgba(0, 0, 0, 0.3)' // 设置黑框的颜色
},
invisible: true, // 初始化时设置为不可见
z: 100 // 设置z轴层级,确保黑框在饼图上方显示
}],
...
};
```
2. 然后,在数据为空时,通过判断数据数组的长度是否为0来动态显示或隐藏黑框。示例如下:
```javascript
// 数据为空时
if (data.length === 0) {
option.graphic[0].invisible = false; // 显示黑框
} else {
option.graphic[0].invisible = true; // 隐藏黑框
}
```
3. 最后,更新ECharts实例的配置项即可。示例如下:
```javascript
myChart.setOption(option);***
阅读全文