全国各省客运作业站点数统计echarts 饼配置项内容和展示
配置项如下
sourceData = [
{'name': '西藏自治区', 'value': 1, 'extData': [1023, '#cfee69', 0, '']},
{'name': '天津市', 'value': 4, 'extData': [1070, '#d0ed6a', 0, '']},
{'name': '北京市', 'value': 5, 'extData': [1179, '#d0eb6a', 0, '']},
{'name': '新疆维吾尔自治区', 'value': 5, 'extData': [2105, '#d3db6d', 0, '']},
{'name': '青海省区', 'value': 6, 'extData': [2364, '#d4d76e', 0, '']},
{'name': '上海市', 'value': 7, 'extData': [2965, '#d6cd70', 0, '']},
{'name': '黑龙江省', 'value': 8, 'extData': [3237, '#d7c871', 0, '']},
{'name': '云南省', 'value': 8, 'extData': [3375, '#d7c671', 0, '']},
{'name': '内蒙古自治区', 'value': 9, 'extData': [3467, '#d8c472', 0, '']},
{'name': '陕西省', 'value': 10, 'extData': [3744, '#d9bf73', 0, '']},
{'name': '山西省', 'value': 10, 'extData': [4005, '#dabb74', 0, '']},
{'name': '重庆市', 'value': 11, 'extData': [4040, '#daba74', 0, '']},
{'name': '吉林省', 'value': 11, 'extData': [4510, '#dbb275', 0, '']},
{'name': '海南省', 'value': 12, 'extData': [4777, '#dcae76', 0, '']},
{'name': '甘肃省', 'value': 13, 'extData': [5024, '#ddaa77', 0, '']},
{'name': '贵州省', 'value': 16, 'extData': [5174, '#dea778', 0, '']},
{'name': '安徽省', 'value': 20, 'extData': [5179, '#dea778', 0, '']},
{'name': '河南省', 'value': 23, 'extData': [5463, '#dfa279', 0, '']},
{'name': '河北省', 'value': 23, 'extData': [5469, '#dfa279', 0, '']},
{'name': '四川省', 'value': 23, 'extData': [6317, '#e1947b', 0, '']},
{'name': '湖南省', 'value': 27, 'extData': [6445, '#e2917c', 0, '']},
{'name': '湖北省', 'value': 27, 'extData': [6583, '#e28f7c', 0, '']},
{'name': '江西省', 'value': 28, 'extData': [7172, '#e4857e', 0, '']},
{'name': '广东省', 'value': 28, 'extData': [8533, '#e96e83', 0, '']},
{'name': '广西壮族自治区', 'value': 30, 'extData': [9370, '#ec6086', 0, '']},
{'name': '山东省', 'value': 30, 'extData': [9461, '#ec5e86', 0, '']},
{'name': '浙江省', 'value': 32, 'extData': [9612, '#ed5c87', 0, '']},
{'name': '辽宁省', 'value': 33, 'extData': [10140, '#ee5388', 0, '']},
{'name': '福建省', 'value': 35, 'extData': [11558, '#f33b8d', 0, '']},
{'name': '江苏省', 'value': 35, 'extData': [12260, '#f62f90', 0, '']}]
graphicData = [{
type: 'group',
left: 'center',
top: '60%',
bounding: 'raw', //重要，否则内容无法超过组
z: 100,
children: []
}]
graphicScatter = {
type: 'circle',
shape: {
r: 2
},
style: {
fill: 'white'
},
z: 100
}
graphicText = [{
type: 'text',
// left: 'center',
// top: 10,
z: 100,
style: {
fill: 'white',
text: '韩国',
font: 'bold 16px Microsoft YaHei',
textAlign: 'center'
}
}, {
type: 'text',
// left: 'center',
// top: 40,
z: 100,
style: {
fill: 'white',
text: '5766例',
font: 'bold 14px Microsoft YaHei',
textAlign: 'center',
}
}, {
type: 'text',
// left: 'center',
// top: 70,
z: 100,
style: {
fill: 'white',
text: '死亡36例',
font: 'bold 12px Microsoft YaHei',
textAlign: 'center'
}
}]
graphic_total_Text = [{
type: 'text',
right: -220,
bottom: 500,
z: 100,
style: {
fill: 'black',
text: '数据时间2018年1月',
font: 'bold 12px Microsoft YaHei',
textAlign: 'right'
}
}, {
type: 'text',
right: -220,
bottom: 475,
z: 100,
style: {
fill: 'black',
text: '中国有586个客运作业站点',
font: 'bold 18px Microsoft YaHei',
textAlign: 'right',
}
}]
graphicChildren = {
type: 'group',
// left: 'center',
// top: 'center',
position: [],
bounding: 'raw',
z: 100,
children: []
}
function convertData1() {
var maxScale = 1
var minScale = 0.1
var stepRadius = 2 * Math.PI / sourceData.length
var stepScale = (maxScale - minScale) / sourceData.length
for (var i = 0; i < sourceData.length; i++) {
sourceData[i].itemStyle = {
color: sourceData[i]["extData"][1],
borderWidth: 0
}
sourceData[i].label = {
show: i > 6 ? false : false,
position: i <= 5 ? "outer" : "inside",
// alignTo: "labelLine",
align: "right",
borderWidth: 1,
borderColor: "red",
alignTo: "edge",
margin: 650,
formatter: (a) => {
return a.data.extData[3]
}
}
sourceData[i].labelLine = {
show: i > 6 ? false : false,
// length: i <= 5 ? 5 * (i - 5) : 0,
// length2: i <= 5 ? 0 : 0,
lineStyle: {
type: "dashed"
}
}
var curRadius = (i + 0.5) * stepRadius
// var curArclen = 1
var curScale = i > 11 ? minScale + stepScale * (i) : 0.6 + stepScale * (i)
var startR = i > 11 ? sourceData[i]["value"] * 450 / sourceData.slice(-1)[0]["value"] * 0.95 : ((
sourceData[i]["value"] * 460 / sourceData.slice(-1)[0]["value"] + 20))
var curR = [startR, startR * (i > 33 ? 0.95 : (i > 11 ? 0.75 : 1.12)), startR * (i > 33 ? 0.95 : (i >
11 ? 0.8 : 1.17)) * (i > 33 ? 0.95 :
(i > 11 ? 0.8 : 1.17))]
var curPositions = []
var curChilds = []
var curCircles = []
for (var j = 0; j < 3; j++) {
var curX = Math.sin(curRadius) * curR[j]
var curY = -Math.cos(curRadius) * curR[j]
curPositions.push([curX, curY])
var curChild = JSON.stringify(graphicChildren)
curChild = JSON.parse(curChild)
curChild.position = [curX, curY]
curChild.rotation = i > 33 ? -((i + 0.5) / sourceData.length * 2 * Math.PI) : (i <= 11 ? -((i +
0.5) / sourceData.length * 2 * Math.PI) + Math.PI / 2 : 0)
curChild.scale = [curScale, curScale]
curgraphicText = JSON.parse(JSON.stringify(graphicText[j]))
curgraphicText.style.text = j == 0 ? sourceData[i]["name"] : (j == 1 ? (i > 11 ? sourceData[i]["value"] + "站点" : "") : (j == 2 && i > 33 ? (sourceData[i][
"extData"
][2] + "个") : (i <= 11 ? sourceData[i][
"extData"
][3] : "")))
// curgraphicText.style.text = j == 0 ? sourceData[i]["name"] : (j == 1 ? i > 11 ? sourceData[i][
// "extData"
// ][0] + "例" : "" : i > 33 ? sourceData[i][
// "extData"
// ][2] + "例" : "")
if (i <= 11) {
curgraphicText.style.fill = "black"
curgraphicText.style.textAlign = "left"
}
curChild.children = [curgraphicText]
curChilds.push(curChild)
// var curCircle = JSON.parse(JSON.stringify(graphicScatter))
// curCircle.position = [curX, curY]
// curCircles.push(curCircle)
// graphicData[0].children.push(curCircle)
graphicData[0].children.push(curChild)
}
console.log(i, sourceData[i]["name"], curRadius, curR, curPositions)
}
for (var m = 0; m < 3 * 2; m++) {
var cur_total_text = graphic_total_Text[m]
graphicData[0].children.push(cur_total_text)
}
return sourceData
}
option = {
title: {
text: '全国各省客运作业站点数统计',
// subtext: '纯属虚构',
left: 'center',
textStyle: {
//color: "red",
fontSize: 38
},
//backgroundColor: "rgb(199,16,16)",
top: "2%"
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
// legend: {
// left: 'center',
// top: 'bottom',
// data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
// },
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
graphic: graphicData,
series: [{
name: '客运作业站点数',
type: 'pie',
radius: [20, 450],
center: ['50%', '60%'],
label: {
show: true
},
roseType: 'area',
data: convertData1(),
rich: {
a: {
color: 'white',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
}
}
}]
};
截图如下
