option = {
tooltip: {
trigger: 'item',
// formatter: '{b}: {d}%',
borderWidth: 1,
},
title: {
text: '租赁情况分布',
left: '29.5%',
bottom: '48%',
textStyle: {
color: '#2C3E50',
fontSize: 15,
},
},
legend: {
show: true,
// type: 'scroll',
orient: 'vertical',
// right: 40,
// top: 20,
selectedMode: false,
// left: 30,
width: 240,
right: 10,
bottom: 'middle',
icon: 'circle',
itemWidth: 15,
itemHeight: 10,
itemGap: 25,
textStyle: {
color: '#2C3E50',
fontSize: 16,
// marginTop: 60,
},
formatter: function (name) {
let num = 10
// originData.map(res => {
// if (res.statusName == name) {
// num = res.num
// }
// })
let arr = ['{a|' + name + '}', '{b|' + num + '}']
return arr.join('')
},
textStyle: {
rich: {
a: {
fontSize: 16,
color: '#2C3E50',
verticalAlign: 'bottom',
padding: [0, 10, 0, 0],
},
b: {
fontSize: 18,
color: '#2C3E50',
verticalAlign: 'bottom',
fontWeight: 'bold',
},
},
},
},
series: [
{
type: 'pie',
startAngle: 90,
endAngle: -270,
radius: '45%',
center: ['35%', '50%'],
},
{
type: 'gauge',
startAngle: 90,
endAngle: -270,
radius: '60%',
center: ['35%', '50%'],
pointer: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
width: 0,
color: [
//外框颜色
[1, '#027383'],
],
},
},
splitLine: {
show: false,
distance: 0,
length: 10,
},
axisLabel: {
show: false,
distance: 50,
},
axisTick: {
distance: 0,
length: 6,
splitNumber: 5,
lineStyle: {
width: 4,
color: 'auto',
// cap: 'round',
},
},
},
{
type: 'pie',
radius: ['68%', '80%'],
center: ['35%', '50%'],
label: { show: false },
labelLine: { show: false },
selectedOffset: 10,
selectedMode: true,
itemStyle: {
borderRadius: 0,
normal: {
borderColor: '#fff',
borderWidth: 4,
},
},
data: [
{ value: 179, name: '住宅' },
{ value: 735, name: '办公' },
{ value: 580, name: '工业厂房' },
{ value: 484, name: '商业-餐饮' },
{ value: 300, name: '商业-宾馆' },
{ value: 1048, name: '商业-银行' },
{ value: 735, name: '商业服务' },
{ value: 580, name: '仓库' },
{ value: 484, name: '基站' },
{ value: 300, name: '非营利性机构' },
{ value: 1048, name: '其他' },
],
color: [
'#3DB7CE',
'#FD8D8E',
'#9A7ED2',
'#35B9FD',
'#6EC4D2',
'#CE9415',
'#49AC88',
'#3066E4',
'#BD5641',
'#00C7FA',
'#7995BE',
'#FFE289',
],
},
],
};