const colors = {
'01': {
'01': '#D3810B',
'02': '#F2B74E',
'NYD10': '#F2B74E',
'NYD11': '#F2CE94',
'NYDQT': '#ecf2e3',
},
'02': {
'05': '#425e39',
'06': '#2F5E50',
'00': '#048478',
'07': '#D0DBC3',
'08': '#69821C',
'09': '#AEBC5B',
'JSYD10': '#C8DD69',
'JSYD11': '#75C6C2',
'JSYDQT': '#7FA3BF',
},
'03': {
'WLYDQT': '#a88c5a',
},
};
const data1= [
{
"sdlydlx": "01",
"sdlydlxmc": "农用地",
"dlbm": "01",
"dlmc": "耕地",
"value": "12",
},
{
"sdlydlx": "01",
"sdlydlxmc": "农用地",
"dlbm": "02",
"dlmc": "园地",
"value": "13",
},
{
"sdlydlx": "01",
"sdlydlxmc": "农用地",
"dlbm": "NYD10",
"dlmc": "交通运输用地",
"value": "14",
},
{
"sdlydlx": "01",
"sdlydlxmc": "农用地",
"dlbm": "NYD11",
"dlmc": "水域及水利设施用地",
"value": "15",
},
{
"sdlydlx": "01",
"sdlydlxmc": "农用地",
"dlbm": "NYDQT",
"dlmc": "其他农用地",
"value": "16",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "00",
"dlmc": "湿地",
"value": "17",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "05",
"dlmc": "商服用地",
"value": "18",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "06",
"dlmc": "工矿仓储用地",
"value": "19",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "07",
"dlmc": "住宅用地",
"value": "20",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "08",
"dlmc": "公服用地",
"value": "21",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "09",
"dlmc": "特殊用地",
"value": "22",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "JSYD10",
"dlmc": "交通运输用地",
"value": "23",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "JSYD11",
"dlmc": "水域及水利设施用地",
"value": "24",
},
{
"sdlydlx": "02",
"sdlydlxmc": "建设用地",
"dlbm": "JSYDQT",
"dlmc": "其他土地",
"value": "25",
},
{
"sdlydlx": "03",
"sdlydlxmc": "未利用地",
"dlbm": "WLYDQT",
"dlmc": "其他土地",
"value": "0.0000",
}
]
option = {
backgroundColor:'#fff',
tooltip: {
trigger: 'item',
confine: true,
formatter: `{b}<br/>{d}% {c}万元`
},
graphic: [
{
cursor: 'default',
type: 'text',
left: "55%",
top: 10,
position: [0, 0],
style: {
text: "农用地：",
fontSize: 14,
fontWeight: 'bold',
fill: '#565656',
}
},
{
cursor: 'default',
type: 'text',
left: "55%",
top: 80,
position: [0, 0],
style: {
text: "建设用地:",
fontSize: 14,
fontWeight: 'bold',
fill: '#565656',
}
},
{
cursor: 'default',
type: 'text',
left: "55%",
top: 170,
position: [0, 0],
style: {
text: "未利用地：",
fontSize: 14,
fontWeight: 'bold',
fill: '#565656',
}
}
],
legend:[
{
top: 26,//高度根据graphic设置的高度加上字体大概16的高
left: "56%",
itemWidth: 12,
itemHeight: 12,
data: data1.filter(item=>item.sdlydlx==='01').map(item=>item.dlmc),
textStyle: {
fontSize: 12,
color: '#565656',
width:100
}
},
{
top: 96, //高度根据graphic设置的高度加上字体大概16的高
left: "56%",
itemWidth: 12,
itemHeight: 12,
data: data1.filter(item=>item.sdlydlx==='02').map(item=>item.dlmc),
textStyle: {
fontSize: 12,
color: '#565656'
}
},
{
top: 186,//高度根据graphic设置的高度加上字体大概16的高
left: "56%",
itemWidth: 12,
itemHeight: 12,
data: data1.filter(item=>item.sdlydlx==='03').map(item=>item.dlmc),
textStyle: {
fontSize: 12,
color: '#565656'
}
},
],
series: [
{
type: 'pie',
radius: [60, 80],
center: ['40%', '18%'], //中心点与圆的大小调整，图例位置也调整
silent: true,
legendHoverLink: false,
hoverAnimation: false,
z: 2,
labelLine: {
show: false
},
data: [
{
value: 1,
itemStyle: {
color: 'transparent'
}
}
],
},
{
name:'饼图',
type: 'pie',
avoidLabelOverlap: false,
radius: [60, 80],
center: ['40%', '18%'],
startAngle: 90,
clockwise: true,//饼图的扇区是否是顺时针排布
hoverAnimation: false,
z: 3,
label: {
show: false
},
labelLine: {
show: false
},
data: (data1 || []).map((item) => {
return {
name: item.dlmc,
value: item['value'],
itemStyle: {
color: colors[item.sdlydlx][item.dlbm],
}
};
})
}
]
};