前端开发框架旭日图使用示例(仅供参考)
1. 旭日图类型
- 1.表现形式
提示
数据格式固定，所以才能画出下图中的效果
- 2.配置
js
// 接口数据
const res = {
data:[
{"children":[
{"children":[],"name":"成功分拣","value":990351},
{
"children":[
{"name":"收容","value":110039},{"name":"丢失","value":0}
],
"name":"未成功分拣"
}
],
"name":"上机邮件"},
{
"children":[
{
"children":[
{"name":"贵品","value":55019},
{"name":"异性件","value":55019}
],"name":"人工分拣"}
],
"name":"未上机"
}
]
}
// 图表配置
option = {
series: {
type: 'sunburst',
data: [
{
name: res.data[0].name,
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: 'rgba(35,213,255,0.4)',
},
children: [
{
name: res.data[0].children[0].name,
value: Number(res.data[0].children[0].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: 'rgba(35,213,255,0.1)',
},
children: [],
},
{
name: res.data[0].children[1].name,
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: 'rgba(230,81,82,0.6)',
},
children: [
{
name: res.data[0].children[1].children[0].name,
value: Number(res.data[0].children[1].children[0].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: '#e65152',
},
},
{
name: res.data[0].children[1].children[1].name,
value: Number(res.data[0].children[1].children[1].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: '#e65152',
},
},
],
},
],
},
{
name: res.data[1].name,
itemStyle: {
color: '#e65152',
},
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
children: [
{
name: res.data[1].children[0].name,
itemStyle: {
color: '#e65152',
},
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
children: [
{
name: res.data[1].children[0].children[0].name,
value: Number(res.data[1].children[0].children[0].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: '#e65152',
},
},
{
name: res.data[1].children[0].children[1].name,
value: Number(res.data[1].children[0].children[1].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: '#e65152',
},
},
],
},
],
},
],
radius: [20, '95%'],
itemStyle: {
borderWidth: 1,
borderColor: '#23d5ff',
},
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(29,30,121,0.70)',
borderColor: 'rgba(29,30,121,0.70)',
padding: 0,
extraCssText: 'background: rgba(29,30,121,0.70)',
formatter: function (params) {
let html = ` <p style='background: #0C4D91;border-radius: 4px 4px 0 0; text-indent:9px;line-height: 30px;font-size: 16px; color: #FFFFFF;'>
上机情况</p>`;
html +=
'<p style="margin-left:9px;margin-right:9px;">' +
'<span style="display:inline-block;margin-right:4px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
params.color +
'"></span>' +
'<span style="font-size: 16px; color: #23D5FF;">' +
params.data.name +
' : </span>' +
'<span style="font-size: 16px; color: #ffffff;">' +
params.data.value +
'</span>' +
'</p>';
return html;
},
},
grid: {
top: 0,
left: 0,
bottom: 0,
right: 0,
},
}
}2. 旭日图类型
- 1.表现形式
提示
数据格式固定，所以才能画出下图中的效果
- 2.配置
js
// 接口数据
const res = {
data:[
{
"children":[
{"children":[],"name":"总包经转","value":220078},
{"children":[],"name":"开拆-分拣-集包","value":440156}
],
"name":"总包"
},
{"children":[{"name":"散件外走","value":330117}],"name":"散件"}]
}
// 图表配置
option = {
series: {
type: 'sunburst',
data: [
{
name: res.data[0].name,
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: 'rgba(35,213,255,0.4)',
},
children: [
{
name: res.data[0].children[0].name,
value: Number(res.data[0].children[0].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: 'rgba(35,213,255,0.1)',
},
children: [],
},
{
name: res.data[0].children[1].name,
value: Number(res.data[0].children[1].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
itemStyle: {
color: 'rgba(35,213,255,0.1)',
},
children: [],
},
],
},
{
name: res.data[1].name,
itemStyle: {
color: 'rgba(23, 242,195,0.4)',
},
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
children: [
{
name: res.data[1].children[0].name,
value: Number(res.data[1].children[0].value),
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
children: [],
},
],
},
],
radius: [20, '95%'],
itemStyle: {
borderWidth: 1,
borderColor: '#23d5ff',
color: 'rgba(23, 242,195,0.4)',
},
label: {
fontSize: '12px',
color: '#ffffff',
rotate: 0,
align: 'center',
},
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(29,30,121,0.70)',
borderColor: 'rgba(29,30,121,0.70)',
padding: 0,
extraCssText: 'background: rgba(29,30,121,0.70)',
formatter: function (params) {
let html = ` <p style='background: #0C4D91;border-radius: 4px 4px 0 0; text-indent:9px;line-height: 30px;font-size: 16px; color: #FFFFFF;'>
集包情况</p>`;
html +=
'<p style="margin-left:9px;margin-right:9px;">' +
'<span style="display:inline-block;margin-right:4px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
params.color +
'"></span>' +
'<span style="font-size: 16px; color: #23D5FF;">' +
params.data.name +
' : </span>' +
'<span style="font-size: 16px; color: #ffffff;">' +
params.data.value +
'</span>' +
'</p>';
return html;
},
},
}
}