echarts半个饼图
时间: 2023-11-07 09:03:49 浏览: 169
要实现一个半圆的饼图,并且想要一个渐变颜色的效果,可以按照以下步骤进行操作:
1. 首先,在Echarts的饼图实例中选取一个具有环状半圆形的饼图。
2. 修改option中的配置项属性。将data项的数量删减为3项,并且根据需求将value值按照2:1:1进行划分。
3. 设置饼图的角度startAngle属性,使其呈现半圆形状。
4. 调用绘制图表的函数,并传入相应的参数,如当前用量、总量等。
下面是一个具体的代码示例,可以在mounted中调用:
```javascript
drawLine() {
let myChart = this.$echarts.init(document.getElementById("myChart"));
let current = 300; // 当前用量
let all = 480; // 总量
let option = {
series: [
{
type: "pie",
label: {
show: false,
},
center: ["50%", "60%"], // 控制上下左右的位置
radius: ["50%", "70%"],
startAngle: 180, // 控制角度
itemStyle: {
normal: {
borderWidth: 5,
borderColor: "#F8F8F8",
},
},
data: [
{
name: "申请数",
value: current,
itemStyle: {
color: "#E62129",
},
},
{
name: "盖印数",
value: all - current, // 实际显示部分是总量-用量
itemStyle: {
color: "#C42632",
},
},
{
name: "bottom",
value: all,
itemStyle: {
color: "transparent",
},
},
],
},
],
};
myChart.setOption(option);
},
```
阅读全文