echart 饼图引导线加圆点
1、效果图
需要两端对齐,并且加上圈
2、代码
const colors = [
"#0056E3",
"#4193E8",
"#47C1B0",
"#47C16F",
"#CDDC39",
"#F1C43E",
"#E8793F",
"#E8493F",
"#D500FF",
"#8C00FF",
"#5C00FF",
"#000EE3",
];
let data = [
{value: "1065.00", name: "租客"}
{value: "234.00", name: "未关联客户"}
{value: "845.00", name: "其他亲友"}
{value: "1619.00", name: "儿媳/女婿"}
{value: "1864.00", name: "岳父母/公婆"}
{value: "2042.00", name: "兄弟姐妹"}
{value: "2291.00", name: "子女"}
{value: "2427.00", name: "父母"}
{value: "1000.00", name: "夫妻"}
{value: "1442.00", name: "业主"}
{value: "1294.00", name: "共有业主"}
{value: "693.00", name: "其他"}
]
let leftJson = {
租客: 0,
未关联客户: 1,
其他亲友: 2,
"儿媳/女婿": 3,
"岳父母/公婆": 4,
兄弟姐妹: 5,
子女: 6,
父母: 7,
夫妻: 8,
业主: 9,
共有业主: 10,
其他: 11,
};
const Option = {
color: colors,
tooltip: {
trigger: "item",
formatter: function (params) {
return `${params.marker}${params.data.name}<span style='margin-left:10px'>${params.data.value}</span>%`;
},
},
series: [
{
type: "pie",
radius: ["40%", "60%"],
center: ["50%", "50%"],
data: data,
label: {
formatter: function (v) {
if (leftJson[v.data.name] <= 5) {
return `{hr|} ${v.data.name} ${v.data.value}%`;
} else {
return `${v.data.name} ${v.data.value}% {hr|}`;
}
},
rich: {
hr: {
//auto自定义
width: 2,
height: 2,
borderRadius: 5,
borderWidth: 2,
borderColor: "auto",
padding: [2, 2, 0, 0],
},
// a: {
// padding: [-14, 50, -20, 15],
// },
},
position: "outer",
alignTo: "edge",
margin: 20,
},
left: "10%",
right: 0,
top: 0,
bottom: 0,
},
],
};
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbeckj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01