let data = [
{
"name": "林准金层往高",
"children": [
{
"name": "自农长山来的备",
"value": 1233
},
{
"name": "特重拉给布米",
"value": 1
},
{
"name": "众族面",
"value": 1
},
{
"name": "不领书市外越",
"value": 1
},
{
"name": "越低除种",
"value": 1
},
{
"name": "新道为力斗",
"value": 1
},
{
"name": "政五两传他般",
"value": 1
},
{
"name": "开里改明",
"value": 1
},
{
"name": "率难代",
"value": 1
},
{
"name": "治角断号越格",
"value": 1
},
{
"name": "往劳头便圆",
"value": 1
},
{
"name": "开次用速",
"value": 1
}
]
},
{
"name": "资光样天",
"children": [
{
"name": "我青集自",
"value": 1
},
{
"name": "身后为七况",
"value": 1
},
{
"name": "真起压空南",
"value": 1
},
{
"name": "类身示证张",
"value": 1
},
{
"name": "安维一",
"value": 1
},
{
"name": "感二角说",
"value": 1
},
{
"name": "众如于米利研事",
"value": 1
},
{
"name": "因较通子",
"value": 1
},
{
"name": "立装联思县",
"value": 1
},
{
"name": "作打政",
"value": 1
},
{
"name": "程少育书",
"value": 1
},
{
"name": "例开情县党受他",
"value": 1
}
]
},
{
"name": "入好向意",
"children": [
{
"name": "争动改动团已需",
"value": 1
},
{
"name": "白别金周",
"value": 1
},
{
"name": "众龙维自它",
"value": 1
},
{
"name": "养之处个她委广",
"value": 1
},
{
"name": "住建比百立",
"value": 1
},
{
"name": "值安任",
"value": 1
},
{
"name": "江越劳以提有",
"value": 1
},
{
"name": "变江组比元南",
"value": 1
},
{
"name": "变引还张般他",
"value": 1
},
{
"name": "断变带基设回",
"value": 1
},
{
"name": "形矿文北名",
"value": 1
},
{
"name": "温老识总织热阶",
"value": 1
}
]
}
]
option = init(data)
function init(data) {
let category;
//初始角度从最上方顺时针开始
//右边数字放在label后面 左边数字放再label前面
//蓝光圈半径
const blueAngle = 25;
const color = ['#0a324d', '#2b1f46', '#061d53'];
const dotColor = ['#2cd28c', '#ec5c5f', '#216de6'];
const dotColorList = initDotColor(data);
function initDotColor(data) {
let res = [];
let length = 0;
data.forEach((item, index) => {
const preLength = length;
length += item.children.length * 2;
res = res.concat(new Array(length - preLength).fill(dotColor[index]));
});
return res;
}
initData();
function initData() {
data.forEach((item, index) => {
item.children.forEach((item1, index) => {
item1.value = [1, item1.value || ''];
});
});
}
const length =
data.reduce((sum, item, index) => {
return sum + item.children.length;
}, 0) * 2;
category = Array.from({ length }, (v, k) => k);
//奇数
var customData = category.filter(item => item % 2).map(item => [40, item]);
//label点击
// myChart.on('click', function (params) {
// console.log(params);
// });
return {
backgroundColor: '#05103a',
polar: {},
grid: {
top: 0,
left: 0,
},
angleAxis: {
type: 'category',
data: category,
boundaryGap: false,
splitLine: {
show: false,
},
axiosTick: { show: false },
axisLabel: { show: false },
axisLine: {
show: false,
},
},
radiusAxis: {
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
splitNumber: 1,
axisLabel: {
show: false,
},
},
color,
series: [
{
type: 'custom',
coordinateSystem: 'polar',
renderItem: function(params, api) {
const [x3, y3, r3, a3] = api.coord([26, 0]);
return {
type: 'circle',
shape: {
cx: params.coordSys.cx,
cy: params.coordSys.cy,
r: r3,
},
style: {
fill: 'transparent',
lineWidth: blueAngle,
stroke: '#05184a',
},
silent: true,
styleEmphasis: {
shadowColor: '#2bce89',
shadowBlur: 20,
fill: '#2bce89',
lineWidth: 4,
stroke: '#2bce89',
},
};
},
data: [0],
},
{
type: 'custom',
coordinateSystem: 'polar',
zlevel: -1,
renderItem: function(params, api) {
const index = api.value(1);
const [x, y] = api.coord([31, index]);
const color = dotColorList[index];
return {
type: 'circle',
shape: {
cx: x,
cy: y,
r: 3,
},
style: {
fill: color,
align: 'center',
verticalAlign: 'middle',
},
styleEmphasis: {
shadowColor: color,
shadowBlur: 20,
fill: color,
lineWidth: 4,
stroke: color,
},
};
},
data: customData,
},
{
type: 'sunburst',
// startAngle: 0,
data,
radius: [0, '95%'],
sort: undefined,
highlightPolicy: 'ancestor',
label: {
color: '#9b9fb0',
position: 'inside',
textBorderWidth: 0,
silent: false,
formatter: params => {
return `${params.name} ${params.value[1] || ''}`;
},
},
downplay: {
label: {
formatter: params => {
return `${params.name} ${params.value[1] || ''}`;
},
},
},
emphasis: {
label: {
formatter: params => {
return `${params.name} ${params.value[1] || ''}`;
},
},
},
levels: [
{},
{
r0: '0%',
// r0: '10%',
r: '35%',
itemStyle: {
borderWidth: 0,
// color: 'transparent'
},
},
{
r0: '49%',
r: '50%',
label: {
silent: false,
textBorderWidth: 0,
fontSize: 8,
position: 'outside',
distance: 10,
color: '#9b9fb0',
},
itemStyle: {
silent: true,
color: 'transparent',
textBorderWidth: 0,
borderWidth: 6,
borderColor: 'transparent',
borderCap: 'round',
shadowBlur: 0,
},
},
],
},
{
type: 'custom',
coordinateSystem: 'polar',
renderItem: function(params, api) {
//线 点中心
const index = api.value(1);
const [x1, y1] = api.coord([25.5, index]);
const [x2, y2] = api.coord([27, index]);
//圆弧开始结束
const start = index - 1;
const end = index + 1;
const [x3, y3, r3, a3] = api.coord([24, start]);
const [x4, y4, r4, a4] = api.coord([24, end]);
return {
type: 'group',
children: [
{
type: 'arc',
shape: {
cx: params.coordSys.cx,
cy: params.coordSys.cy,
r0: 0,
r: r3,
startAngle: a4 + 0.05,
endAngle: a3 - 0.05,
},
style: {
stroke: 'rgba(102, 111, 139,.5)',
fill: 'transparent',
lineWidth: 1.5,
},
},
{
type: 'line',
shape: {
x1,
y1,
x2,
y2,
},
style: {
stroke: 'rgba(102, 111, 139,.5)',
lineWidth: 1.5,
},
},
],
};
},
data: customData,
},
],
};
}
myChart.on('click', function (params) {
console.log(params);
});