option1 = title text 车辆所有权构成辆 left center tooltip trigger item legend left right top center orient vertic
要将图例显示在右侧,只需要将legend的left属性改为"left"即可。修改后的代码如下:
option1 = {
title: {
text: "车辆所有权构成(辆)",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
left: "left", // 修改为"left"
top: "center",
orient: "vertical",
formatter: function (name) {
var value;
pic1data.forEach((item) => {
if (item.name === name) {
value = item.value;
}
});
return ${name}|${value}%; //返回出图例所显示的内容是名称+百分比
},
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 32.6, name: "外租车辆" },
{ value: 67.4, name: "自有企业" },
],
},
// 就是这里!
{
name: "",
z: -1,
type: "gauge",
radius: "-50%",
center: [`50%`, `50%`],
// 配置中间的数字
detail: {
// 调节数字位置
offsetCenter: [0, 20],
fontSize: 20,
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
// 中间的字和数字 数据
data: [
{
value: 180135,
name: "总计",
},
],
},
],
};
原文地址: https://www.cveoy.top/t/topic/i9nR 著作权归作者所有。请勿转载和采集!