// 配置图表
var option = {
// 设置占比图颜色
color: ['#55ffa7', '#f8d332'],
tooltip: {
//提示框
trigger: 'item',
formatter: '{b} : <br/> {c} ({d}%)',
},
title: [
// 中心换行标题
{
text: '在园总数',
left: '40%',
top: '52%',
textStyle: {
color: 'black',
fontSize: 8,
fontWeight: '400',
color: '#1787ff',
},
},
{
text: '360',
left: '40%',
top: '38%',
textStyle: {
color: 'black',
fontSize: 18,
fontWeight: '600',
color: '#1787ff',
fill: 'red',
},
},
],
series: [
{
type: 'pie',
name: '占比',
startAngle: 0,
label: {
// 点击展示方式
show: false,
},
radius: ['55%', '80%'], // 饼图大小设置
// roseType: 'area',
// avoidLabelOverlap: true,// 是否启用防止标签重叠策略
// labelLine: { // z折线连接的标题
// show: false
// },
center: ['50%', '50%'], //饼图位置
data: [
{ value: 288, name: '80% 内部车辆' },
{ value: 72, name: '20% 外部车辆' },
],
},
//内边框（虚线框）
{
type: 'gauge',
radius: '75%',
center: ['50%', '50%'],
clockwise: 'true',
startAngle: '90', //重要，删除就没效果
endAngle: '-269.9999', //重要，删除就没效果
splitNumber: 90, //线的条数
pointer: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
length: 4,
lineStyle: {
color: '#B5DDD8',
width: 1,
},
},
axisLabel: {
show: false,
},
// 将图表置于顶层
z: 10,
},
// 最外面的圆环
{
type: 'pie',
color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
radius: ['89%', '90%'],
center: ['50%', '50%'],
label: {
show: false,
},
select: {
display: false,
},
tooltip: {
show: false,
},
data: [25, 25, 25, 25],
},
{
type: 'pie',
name: '中心圆', //最里面的圆
radius: ['0%', '40%'],
center: ['50%', '50%'],
color: 'blue', //内圆颜色
itemStyle: {
normal: {
// 设置阴影
shadowBlur: 30,
shadowColor: 'rgba(147, 147, 147,0.3)',
shadowOffsetX: 0,
shadowOffsetY: 7,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
animation: false,
tooltip: {
show: false,
},
data: [
{
value: 1,
},
],
},
],
}
myChart.setOption(option)