未完成echarts 饼配置项内容和展示
配置项如下
var colorList = ['rgba(0, 138, 255, 1)', 'rgba(255, 155, 48, 1)', 'rgba(0, 180, 76, 1)', 'rgba(151, 101, 254, 1)']
var colorListLabel = ['rgba(224, 245, 255, 1)', 'rgba(252, 248, 227, 1)', 'rgba(227, 252, 231, 1)', 'rgba(226, 225, 255, 1)', ]
//var colorList = ["rgba(56, 155, 255, 0.6)", "rgba(255, 155, 48, 0.6)", "rgba(0, 180, 76, 0.6)", "rgba(151, 101, 254, 0.6)"];
function getRich() {
let result = {}
colorLine.forEach((v, i) => {
result[`hr${i}`] = {
backgroundColor: colorLine[i],
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12]
}
result[`a${i}`] = {
padding: [8, -60, -20, -20],
color: colorLine[i],
fontSize: 12
}
})
return result
}
data = [{
'name': '30人及以下',
'value': 5775
}, {
'name': '31-60人',
'value': 4628
}, {
'name': '61-90人',
'value': 2508
}, {
'name': '90人及以上',
'value': 1025
}].sort((a, b) => {
return b.value - a.value
})
// data.map((item, index) => {
// item.label = {
// show: true,
// position: 'outside',
// backgroundColor: colorListLabel[index],
// borderRadius: 5,
// padding: [5, 10, 3, 10],
// color: colorList[index],
// textStyle:{
// fontSize:15
// }
// }
// item.labelLine = {
// lineStyle: {
// color: 'transparent'
// }
// }
// })
// let data1 = [{
// 'name': '30人及以下',
// 'value': 50
// }, {
// 'name': '31-60人',
// 'value': 20
// }, {
// 'name': '61-90人',
// 'value': 15
// }, {
// 'name': '90人及以上',
// 'value': 10
// }].sort((a, b) => {
// return b.value - a.value
// })
let seriesData1 = data.map((item,index)=>{
return {
...item,
value:Math.sqrt(item.value),
actValue:item.value,
label : {
show: true,
position: 'outside',
backgroundColor: colorListLabel[index],
borderRadius: 5,
padding: [5, 10, 3, 10],
color: colorList[index],
textStyle:{
fontSize:15
}
},labelLine:{
lineStyle: {
color: 'transparent'
}
}
}
})
let seriesData2 = data.map((item,index)=>{
return {
...item,
value:Math.sqrt(item.value,20),
actValue:item.value,
label : {
show: true,
position: 'outside',
backgroundColor: colorListLabel[index],
borderRadius: 5,
padding: [5, 10, 3, 10],
color: colorList[index],
textStyle:{
fontSize:15
},
formatter: params=>{
console.log(params)
return params.data.actValue
}
},labelLine:{
lineStyle: {
color: 'transparent'
}
}
}
})
// data1.map((item, index) => {
// item.label = {
// show: true,
// position: 'outside',
// backgroundColor: colorListLabel[index],
// borderRadius: 5,
// padding: [5, 10, 3, 10],
// color: colorList[index],
// textStyle:{
// fontSize:15
// },
// formatter: params=>{
// console.log(params)
// return params.value
// }
// }
// item.labelLine = {
// lineStyle: {
// color: 'transparent'
// }
// }
// })
function _pie() {
let dataArr = [];
for (var i = 0; i < 150; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 1,
itemStyle: {
normal: {
color: "rgba(223, 223, 223, 1)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
option = {
series: [
{
type: 'pie',
zlevel: 1,
color: "rgba(223, 223, 223, 1)",
silent: true,
radius: ['65.5%', '66%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [1]
},
{
type: 'pie',
zlevel: 2,
silent: true,
radius: ['51.5%', '52%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie()
},
{
type: 'pie',
zlevel: 2,
silent: true,
radius: ['41.5%', '42%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie()
},
{
type: 'pie',
color: '#D0D0D0',
zlevel: 2,
silent: true,
radius: ['31.5%', '32%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie()
},
{
type: 'pie',
zlevel: 2,
color: '#D0D0D0',
silent: true,
radius: ['19.2%', '20%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie()
},
{
type: 'pie',
radius: ['20%', '60%'],
center: ['50%', '50%'],
clockwise: true,
avoidLabelOverlap: true,
data:seriesData1,
roseType: 'area',
itemStyle: {
normal: {
color: (item) => {
return colorList[item.dataIndex]
}
}
}
},
{
type: 'pie',
radius: '30%',
center: ['50%', '50%'],
clockwise: true,
avoidLabelOverlap: true,
data:seriesData2,
roseType: 'area',
itemStyle: {
normal: {
color: 'transparent'
}
},
zlevel: 100,
z:100
}
]
}
截图如下
