echarts环形图按照数据显示在整个图表上的占比情况,比如下图所示
代码如下:
let option = {
title: {
text: "90%",
x: "center",
y: "center",
textStyle: {
fontWeight: "normal",
color: "#fff",
fontSize: "20",
},
},
tooltip: {
formatter: function (params) {
return params.name + ":" + params.percent + " %";
},
show: false,
},
legend: {
show: false,
itemGap: 12,
data: ["占比", "剩余"],
},
series: [
{
name: "内环",
type: "pie",
clockWise: true,
radius: ["45", "55"],
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false, //取消鼠标悬浮放大的效果
data: [
{
value: '90', //实际占比的数据
name: "占比",
itemStyle: {
normal: {
color: "#6bb136", //绿色区域
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
},
{
name: "剩余",
value: 100 - 90,
itemStyle: {
normal: {
color: "rgba(108,119,122,0.3)", //灰色区域
},
},
},
],
},
{
name: "外环",
radius: ["60", "65"],
type: "pie",
hoverAnimation: false, //取消鼠标悬浮放大的效果
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
data: [
{
name: "",
// value: handred - point,
value: 100 - 90,
itemStyle: {
normal: {
color: "rgba(108,119,122,0.3)",
},
},
},
],
},
],
};
版权声明:本文为qq_40576178原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。