实现效果
<div id="mainBottomLeft" style="flex: 2;height:250px;"></div>
optionBottomLeft() {
// 通过id获取获取画布
const myChart = echarts.init(document.getElementById('mainBottomLeft'));
// 指定图表的配置项和数据
let data = 80;
let option = {
title: {
text:'67.45%',//主标题文本
subtext:'完成百比分',//副标题文本
left:'21%',
top:'51%',
textStyle:{
fontWeight: 'normal',
fontSize: 18,
color:'#FF974C',
align:'center',
left:10
},
subtextStyle:{
fontSize: 13,
color:'#6c7a89',
}
},
tooltip: {
trigger: "item",
formatter: "{d}%",
show: true,
},
legend: {
top: 20,
right:20
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%', '65%'],
center: ["30%", "60%"],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: "center",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: data,
name: "测试",
selected:false,
itemStyle: {
color: "#FF974C",
},
// label: {
// normal: {
// // 是显示标签
// show: true,
// position: 'center',
// fontSize: 16,
// // 标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行
// formatter:'{d}%\n\n完成百比分',
// }
// },
},
{
value: 100-data,
name: "",
itemStyle: {
color: "#E9EEF4",
},
label:{
normal:{
show:false,
}
}
},
]
}
]
};
// 使用刚指定的配置项和数据显示图表。画布为 myCharts true为显示
if (option && typeof option === "object") {
myChart .setOption(option, true);
}
},