echarts 旭日图sunburst[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1、配置数据
 	数据结构上,内圈是外圈的父节点
	[
		{
		 	value:n,   
		 		数值,根据同层所有数值的占比,构成百分比圆环,不写为内部第一层children的数值和
		 		若设置的值大于内部第一层的数值,即表示有未显示的内容,具体表示图会压缩同层其他环占比
		 	name:'显示内容',
		 	link:'点击此节点可跳转的超链接',	nodeClick值为'link'时才生效
		 	target = 'blank|self',			nodeClick值为'link'时才生效
		 	r:n|n%,		该层圆环的内半径,设置后radius无效
		 	r0:n|n%,	该层圆环的外半径,设置后radius无效
		 	children:[
			 {
			 	value:n,
				name:'显示内容'
			 }
			]
		},
		{
			value:n,
			name:''
		}
	]

2、配置series
 series:[
	{
	    type:'sunburst',
	    center:['50%','50%'],
	    radius = [0, '75%'],  内半径,外半径
        sort:function(nodeA, nodeB) {  对数值进行排序后再展示
          return -nodeA.getValue() + nodeB.getValue()
        },
        highlightPolicy:'ancestor',  高亮是圆环显示形式
        	'descendant'，则会高亮该扇形块和后代元素，其他元素将被淡化
        	'ancestor'，则会高亮该扇形块和祖先元素；
            'self' 则只高亮自身；
            'none' 则不会淡化其他元素。
       nodeClick:'zoomToNode'	点击节点后缩放到节点
	       	false：节点点击无反应
			'link'：如果节点数据中有 link 点击节点后会进行超链接跳转。
	   sort:'desc|asc|null'	扇形块根据数据value的排序方式,如果未指定value,则其值为子元素value之和
		 	function(nodeA, nodeB) {
			    return nodeA.getValue() - nodeB.getValue();
			}
	   label:{
	   	 rotate:'radial'	径向旋转
	   	 	'tangential' 	切向旋转
	   	 	n数字
	   },
       levels:[  设置各个层级圆环样式
		{
			第一层表示,点击后中间空白圆圈的样式,即点击返回的圆圈
			itemStyle:{}
		},
		{
			第二层设置最内层圆环的样式
			label:{},
			itemStyle:{},
			emphasis:{}, 高亮样式
			highlight:{}, 鼠标悬停后相关扇形块的配置项
			downplay:{ 从本层开始,未悬停区域的颜色
				label:{},
				itemStyle:{}
			}
		}
	   ]

	}
 ]

效果图:

点击后:

代码示例:

<template>
<div id="app">
<div class='map'>
</div>
<div class='map2'>
</div>
<div>
<button @click="add">修改</button>
<button @click="highLight">高亮</button>
</div>
<!-- <router-view/> -->
</div>
</template>
<script>
import echarts from 'echarts';
import axios from 'axios';
export default { 

name: 'App',
data()
{ 

return{ 

myMap:'',
pieData:[{ 
name:'淘宝',value:'11231'},{ 
name:'京东',value:'22673'},{ 
name:'唯品会',value:'6123'},{ 
name:'1号店',value:'8989'},{ 
name:'聚美优品',value:'6700'}]
}
},
methods:{ 

add()
{ 

this.pieData.push({ 
name:'苏宁',value:'9999'})
var option={ 

series:[
{ 

data:this.pieData
}
]
}
this.myMap.setOption(option);
},
highLight()
{ 

this.myMap.dispatchAction({ 

type: 'highlight',
// seriesIndex:0,
dataIndex: 2,
})
}
},
mounted:async function(){ 

var myMap=echarts.init(document.querySelector('.map'));
this.myMap=myMap;
var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
var yData1=[88,92,63,77,94,80,72,86];
var yData2=[80,90,60,70,90,70,62,76];
// var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
var radaData=[{ 
name: '华为手机1',value: [80, 90, 80, 82, 90]},{ 
name: '中兴手机1',value: [70, 82, 75, 70, 78]}]
var dataMax = [
{ 

name: '易用性',
max: 100
},
{ 

name: '功能',
max: 100
},
{ 

name: '拍照',
max: 100
},
{ 

name: '跑分',
max: 100
},
{ 

name: '续航',
max: 100
}
]
var option = { 

legen:{ 

show:true,
},
series:[{ 

type:'sunburst',
sort:function(nodeA, nodeB) { 

return -nodeA.getValue() + nodeB.getValue()
},
highlightPolicy:'ancestor',
data:
[{ 

name: 'parent1',
value: 10,          // 可以不写父元素的 value，则为第一层子元素之和；
// 如果写了，并且大于子元素之和，可以用来表示还有其他子元素未显示
children: [
{ 

value: 5,
name: 'child1',
children: [{ 

value: 8,  //根据第一层节点的value数值,来进行占比绘制,若第一层无value,则根据第一层子节点的value进行占比
name: 'grandchild1',
}]
}, 
{ 

value: 3,
name: 'child2',
}
],
itemStyle: { 

// parent1 的图形样式，不会被后代继承
},
label: { 

// parent1 的标签样式，不会被后代继承
}
}, { 

name: 'parent2',
value: 8,
children:[{ 

value:8,
name:'p2child'
}]
}],
levels:[{ 
  //第一层表示,点击后中间空白圆圈的样式,即返回圆圈
itemStyle:{ 

color:'orange'
},
emphasis:{ 

itemStyle:{ 

// color:'blue'
}
}
},
{ 

itemStyle:{ 

color:'purple'
},
downplay:{ 
  //从本层开始,未悬停区域的颜色
itemStyle:{ 

color:'green'
}
}
},
{ 

downplay:{ 

itemStyle:{ 

color:'black'
}
}
}
]
}]
};
myMap.setOption(option);
}
}
</script>
<style>
.map{ 

height:400px;
width: 100%;
/* width:700px; */
}
.map2{ 

height:400px;
width: 100%;
/* width:700px; */
}
</style>

第三张图配置项:

var option = { 

series: { 

type: 'sunburst',
data: [{ 

name: 'A',
value: 10,
children: [{ 

value: 3,
name: 'Aa'
}, { 

value: 5,
name: 'Ab'
}]
}, { 

name: 'B',
children: [{ 

name: 'Ba',
value: 4
}, { 

name: 'Bb',
value: 2
}]
}, { 

name: 'C',
value: 3
}]
}
};

第四张图代码示例:

var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
var bgColor = '#2E2733';
var itemStyle = { 

star5: { 

color: colors[0]
},
star4: { 

color: colors[1]
},
star3: { 

color: colors[2]
},
star2: { 

color: colors[3]
}
};
var data = [{ 

name: '虚构',
itemStyle: { 

color: colors[1]
},
children: [{ 

name: '小说',
children: [{ 

name: '5☆',
children: [{ 

name: '疼'
}, { 

name: '慈悲'
}, { 

name: '楼下的房客'
}]
}, { 

name: '4☆',
children: [{ 

name: '虚无的十字架'
}, { 

name: '无声告白'
}, { 

name: '童年的终结'
}]
}, { 

name: '3☆',
children: [{ 

name: '疯癫老人日记'
}]
}]
}, { 

name: '其他',
children: [{ 

name: '5☆',
children: [{ 

name: '纳博科夫短篇小说全集'
}]
}, { 

name: '4☆',
children: [{ 

name: '安魂曲'
}, { 

name: '人生拼图版'
}]
}, { 

name: '3☆',
children: [{ 

name: '比起爱你，我更需要你'
}]
}]
}]
}, { 

name: '非虚构',
itemStyle: { 

color: colors[2]
},
children: [{ 

name: '设计',
children: [{ 

name: '5☆',
children: [{ 

name: '无界面交互'
}]
}, { 

name: '4☆',
children: [{ 

name: '数字绘图的光照与渲染技术'
}, { 

name: '日本建筑解剖书'
}]
}, { 

name: '3☆',
children: [{ 

name: '奇幻世界艺术\n&RPG地图绘制讲座'
}]
}]
}, { 

name: '社科',
children: [{ 

name: '5☆',
children: [{ 

name: '痛点'
}]
}, { 

name: '4☆',
children: [{ 

name: '卓有成效的管理者'
}, { 

name: '进化'
}, { 

name: '后物欲时代的来临'
}]
}, { 

name: '3☆',
children: [{ 

name: '疯癫与文明'
}]
}]
}, { 

name: '心理',
children: [{ 

name: '5☆',
children: [{ 

name: '我们时代的神经症人格'
}]
}, { 

name: '4☆',
children: [{ 

name: '皮格马利翁效应'
}, { 

name: '受伤的人'
}]
}, { 

name: '3☆'
}, { 

name: '2☆',
children: [{ 

name: '迷恋'
}]
}]
}, { 

name: '居家',
children: [{ 

name: '4☆',
children: [{ 

name: '把房子住成家'
}, { 

name: '只过必要生活'
}, { 

name: '北欧简约风格'
}]
}]
}, { 

name: '绘本',
children: [{ 

name: '5☆',
children: [{ 

name: '设计诗'
}]
}, { 

name: '4☆',
children: [{ 

name: '假如生活糊弄了你'
}, { 

name: '博物学家的神秘动物图鉴'
}]
}, { 

name: '3☆',
children: [{ 

name: '方向'
}]
}]
}, { 

name: '哲学',
children: [{ 

name: '4☆',
children: [{ 

name: '人生的智慧'
}]
}]
}, { 

name: '技术',
children: [{ 

name: '5☆',
children: [{ 

name: '代码整洁之道'
}]
}, { 

name: '4☆',
children: [{ 

name: 'Three.js 开发指南'
}]
}]
}]
}];
for (var j = 0; j < data.length; ++j) { 

var level1 = data[j].children;
for (var i = 0; i < level1.length; ++i) { 

var block = level1[i].children;
var bookScore = [];
var bookScoreId;
for (var star = 0; star < block.length; ++star) { 

var style = (function (name) { 

switch (name) { 

case '5☆':
bookScoreId = 0;
return itemStyle.star5;
case '4☆':
bookScoreId = 1;
return itemStyle.star4;
case '3☆':
bookScoreId = 2;
return itemStyle.star3;
case '2☆':
bookScoreId = 3;
return itemStyle.star2;
}
})(block[star].name);
block[star].label = { 

color: style.color,
downplay: { 

opacity: 0.5
}
};
if (block[star].children) { 

style = { 

opacity: 1,
color: style.color
};
block[star].children.forEach(function (book) { 

book.value = 1;
book.itemStyle = style;
book.label = { 

color: style.color
};
var value = 1;
if (bookScoreId === 0 || bookScoreId === 3) { 

value = 5;
}
if (bookScore[bookScoreId]) { 

bookScore[bookScoreId].value += value;
}
else { 

bookScore[bookScoreId] = { 

color: colors[bookScoreId],
value: value
};
}
});
}
}
level1[i].itemStyle = { 

color: data[j].itemStyle.color
};
}
}
option = { 

backgroundColor: bgColor,
color: colors,
series: [{ 

//radius: ['0%', '70%'],
type: 'sunburst',
center: ['50%', '48%'],
data: data,
sort: function (a, b) { 

if (a.depth === 1) { 

return b.getValue() - a.getValue();
}
else { 

return a.dataIndex - b.dataIndex;
}
},
label: { 

rotate: 'radial',
color: bgColor
},
itemStyle: { 

borderColor: bgColor,
borderWidth: 2
},
levels: [{ 
}, { 

r0: 0,
r: 40,
label: { 

rotate: 0
}
}, { 

r0: 40,
r: 105
}, { 

r0: 115,
r: 140,
itemStyle: { 

shadowBlur: 2,
shadowColor: colors[2],
color: 'transparent'
},
label: { 

rotate: 'tangential',
fontSize: 10,
color: colors[0]
}
}, { 

r0: 140,
r: 145,
itemStyle: { 

shadowBlur: 80,
shadowColor: colors[0]
},
label: { 

position: 'outside',
textShadowBlur: 5,
textShadowColor: '#333'
},
downplay: { 

label: { 

opacity: 0.5
}
}
}]
}]
};