echarts 配置饼图 pro
1. 开发环境 vue+echarts
2. 电脑系统 windows10 专业版
3. 在应用 vue+echarts 开发的过程中, 咱们常常会应用到饼图, 上面是我应用的一些分享, 心愿对你有所帮忙!
4.echarts 官网案例, 通过简略, 效果图如下:
5. 代码如下:
this.Chenoption= {
tooltip: {
trigger: "item",
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: "vertical",
left: 0,
itemWidth: 30,
show: false, // 管制右边方形状态的显示
itemHeight: 16,
textStyle: {
fontSize: 16, // 字体大小
color: "wheat", // 字体色彩
},
},
series: [
{
name: "",
type: "pie",
left: 0,
radius: ["35%", "75%"], // 管制饼图的大小
label: {formatter: '{b|{b}:} {per|{d}%}',
backgroundColor: "#eee",
borderColor: "#aaa",
borderWidth: 4, // 管制 悬浮信息边框的大小
borderRadius: 4,
rich: {
a: {
color: "#999",
lineHeight: 22,
align: "center",
},
hr: {
borderColor: "#aaa",
width: "100%",
borderWidth: 0.5,
height: 0,
},
b: {
fontSize: 16,
lineHeight: 33,
},
per: {
color: "#eee",
backgroundColor: "#334455",
padding: [2, 4],
borderRadius: 2,
},
},
},
data: data,
},
],
};
6. 在做我的项目中, 咱们也会有其余的需要, 如何把百分比换成具体的数值, 成果如下:
7. 代码配置如下:
this.Chenoption= {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: ({c})",
},
legend: {
orient: "vertical",
left: 0,
itemWidth: 30,
show: false, // 管制右边方形状态的显示
itemHeight: 16,
textStyle: {
fontSize: 16, // 字体大小
color: "wheat", // 字体色彩
},
},
series: [
{
name: "",
type: "pie",
left: 0,
radius: ["35%", "75%"], // 管制饼图的大小
label: {formatter: "{b|{b}:}{per|{c}}",
backgroundColor: "#eee",
borderColor: "#aaa",
borderWidth: 4, // 管制 悬浮信息边框的大小
borderRadius: 4,
rich: {
a: {
color: "#999",
lineHeight: 22,
align: "center",
},
hr: {
borderColor: "#aaa",
width: "100%",
borderWidth: 0.5,
height: 0,
},
b: {
fontSize: 16,
lineHeight: 33,
},
per: {
color: "#eee",
backgroundColor: "#334455",
padding: [2, 4],
borderRadius: 2,
},
},
},
data: data,
},
],
};
8. 次要批改代码:
9. 本期的分享到了这里就完结啦, 心愿对你有所帮忙! 让咱们一起致力走向巅峰!