<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="../../lib/5.5.0/echarts.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<script type="text/javascript">
//初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//图表配置。
let option = {
toolbox: {
show: true,
feature: {
saveAsImage: {
},
},
},
series: [
{
radius: ['15%', '80%'],
type: 'sunburst',
sort: undefined,
emphasis: {
focus: 'ancestor'
},
data: [
{
value: 8,
children: [
{
value: 4,
children: [
{
value: 2
},
{
value: 1
},
{
value: 1
},
{
value: 0.5
}
]
},
{
value: 2
}
]
},
{
value: 4,
children: [
{
children: [
{
value: 2
}
]
}
]
},
{
value: 4,
children: [
{
children: [
{
value: 2
}
]
}
]
},
{
value: 3,
children: [
{
children: [
{
value: 1
}
]
}
]
}
],
label: {
color: '#000',
textBorderColor: '#fff',
textBorderWidth: 2,
formatter: function (param) {
var depth = param.treePathInfo.length;
if (depth === 2) {
return 'radial';
} else if (depth === 3) {
return 'tangential';
} else if (depth === 4) {
return '0';
}
return '';
}
},
levels: [
{
},
{
itemStyle: {
color: '#CD4949'
},
label: {
rotate: 'radial'
}
},
{
itemStyle: {
color: '#F47251'
},
label: {
rotate: 'tangential'
}
},
{
itemStyle: {
color: '#FFC75F'
},
label: {
rotate: 0
}
}
]
}
]
};
//将图表对象和图表配置进行关联。
myChart.setOption(option);
</script>
</body>
</html>
ECharts旭日图-旭日图标签旋转.rar （3个子文件） 
图表 lib 5.5.0 
echarts.js 3.21MB echarts.min.js 1005KB svg geo 
index.html 5KB images json 资源评论
图表制作解说(目标1000个图表)
- 粉丝: 1902
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
