旭日关系图
首先，推荐一个不错的Echarts Demo网站www.isqqw.com/ 让我可以快速的找到想要的图表，以及快速定位要修改的图表配置项。为了方便日后再碰到这种图表能不费吹灰之力便可画出想要的echarts图，我还是选择记录一下（每次画都忘-_- ）我自己画的旭日图在这里奥：www.isqqw.com/viewer?id=3…
这次记录的是一个之前听过但自己没做过的图-旭日图，这是一种关系图，类似饼图实现的圆环图，但比圆环图表功能丰富，能明显的看出数据的归属层级分类，看下面的图吧：
内圈是种类数据，外圈是种类数据的具体值，一对比就很明的看出数据的分类了。
图表代码
const {
redFlower, // 红花种类
whiteFlower, // 白花种类
lessThanStandardRate, // 小于标准
greaterThanStandardRate, // 大于标准
greaterThanOverallRate, // 大于整体占比
lessThanOverallRate, // 小于整体占比
}= {
redFlower:17, // 红花种类
whiteFlower:83, // 白花种类
lessThanStandardRate:20.83, // 小于标准
greaterThanStandardRate:79.17, // 大于标准
greaterThanOverallRate:65.52, // 大于整体占比
lessThanOverallRate:17.24, // 小于整体占比
}
option = {
series:[
{
type: 'sunburst',
nodeClick: false, // 是否允许旭日图点击 默认可以点击
center: ['50%', '50%'],
radius: ['50%', '60%'],
sort: 'null',
startAngle: 145,
silent: true, // 不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
labelLayout: {
moveOverlap: 'shiftY',//在标签重叠的时候是否挪动标签位置以防止重叠。shiftY：垂直方向依次位移，在垂直方向对齐时使用
hideOverlap: false,//是否隐藏重叠的标签
},
// 旭日图的分割线 可通过调节圆的大小实现空白间隙
// itemStyle: {
// borderColor: 'transparent',
// borderWidth: 0,
// borderRadius: 0,
// },
data: [{
name: '白花种类',
value: whiteFlower ?? 0,
itemStyle: { color: '#358EFE' },
// 标签
label: {
show: true,
borderColor: 'transparent',
borderWidth: 1,
padding: 6,
formatter: ['{a|{b}}', '{c|{c}%}'].join(''),//{c} 为数据值
// 给指定标签设置样式
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
c: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
},
},
},
//标签的视觉引导线配置。
labelLine: {
show: true,
showAbove: true,//是否显示在图形上方
length2: 6,//视觉引导项第二段的长度
minTurnAngle: 0,//通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。可以设置为 0 - 180 度。
},
children: [{
value: lessThanOverallRate ?? 0,
name: '百合',
itemStyle: { color: 'rgba(53, 142, 254, 0.20)' },
label: {
formatter: ['{a|{b}}', `{b|${lessThanStandardRate ?? 0}%}`, '\n', '{c|(整体占比 {c}%)}'].join(''),
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
b: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
c: {
align: 'left',
color: 'rgba(136, 136, 136, .9)',
fontSize: 12,
fontWeight: 400,
padding: [4, 0, 0, 0],
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
},
},
labelLine: {
show: true,
showAbove: true,
length2: 8,
},
},
{
value: greaterThanOverallRate ?? 0,
name: '茉莉',
itemStyle: { color: 'rgba(53, 142, 254, 0.50)' },
label: {
formatter: ['{a|{b}}', `{b|${greaterThanStandardRate ?? 0}%}`, '\n', '{c|(整体占比 {c}%)}'].join(''),
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
b: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
c: {
align: 'left',
color: 'rgba(136, 136, 136, .9)',
fontSize: 12,
padding: [4, 0, 0, 0],
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
},
},
labelLine: {
show: true,
showAbove: true,
length2: 8,
},
},
],
},
{
name: '红花种类',
value: redFlower ?? 0,
itemStyle: { color: '#12C2C1' },
label: {
show: true,
formatter: ['{a|{b}}', '{c|{c}%}'].join(''),
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
c: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
},
},
labelLine: {
show: true,
showAbove: true,
length2: 6,
},
children: [
{ value: parseFloat(100 - lessThanOverallRate - greaterThanOverallRate), name: '', itemStyle: { color: 'rgba(18, 194, 193, 0.60)' } }],
},
],
// 占据的位置 文字设置
// label: {
// rotate: 'tangential', // 文字水平(tangential)竖直(radial)
// color: '#fff',
// fontSize: 14,
// minAngle: 30, // 控制角度文本显示
// },
levels: [
// 这里是设置 每一层的样式，层级低于单独在data里面的
// 第一个空数据是 占据下钻的位置
{},
// 内圈
{
r0: '48%',
r: '63%',
// 鼠标移入高亮设置 设置了slient=true会失效
emphasis: {
focus: 'none',
},
label: {
position: 'outside',//标签的位置
distance: 22,//距离图形元素的距离
rotate: 0, // 文字水平(tangential)竖直(radial)
minAngle: 0,//当某个扇形块的角度小于该值（角度制）时，扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
//以下三个设置可以让距离比较靠近的label有一定的间距，与html标签样式有点区别的是，这里需要设置一个border后再设置padding，padding内边距才会起效果
borderColor: 'transparent',//
borderWidth: 1,
padding: 4,
},
},
// 外圈
{
r0: '63%',
r: '77%',
label: {
position: 'outside',
distance: 22,
rotate: 0, // 文字水平(tangential)竖直(radial)
alignTo: 'edge',
minAngle: 0,
borderColor: 'transparent',
borderWidth: 1,
padding: 4,
},
// 鼠标移入高亮设置
emphasis: {
focus: 'none',
},
},
],
},
]
};
End
这个图虽说不难，但自己做出来也着实费了一番心思，总结一下，后面总会用到的。顺便，别忘了去试试奥 ～www.isqqw.com/viewer?id=3…
