<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>旭日图 - 基于ECharts V4.2</title>
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<!--<header id="header">
<h3 class="title">旭日图 - 基于ECharts V4.2</h3>
</header>-->
<div id="container">
<div class="chart-div" id="sunChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-theme-shine.js"></script>
<script type="text/javascript">
$(function() {
//初始化报表对象并指定其风格
const sunChart = echarts.init(document.getElementById("sunChart"), 'shine');
const sunChartOpt = {
title: {
text: "上市公司行业分类",
subtext: "纯属虚构",
textStyle: {
color: "#fff"
},
subtextStyle: {
fontSize: 12
},
left: 15,
top: 15
},
tooltip: {
show: true
},
series: {
type: "sunburst",
radius: [0, "75%"],
center: ["50%", "52%"],
sort: null,
levels: [{}, {
r0: "15%",
r: "35%",
itemStyle: {
borderWidth: 0.8
},
label: {
align: "right",
fontSize: 10,
color: '#fff',
textBorderWidth: 0
}
}, {
r0: "35%",
r: "75%",
itemStyle: {
borderWidth: 0.8
},
label: {
position: 'outside',
padding: 3,
fontSize: 10,
color: 'auto',
textBorderWidth: 0
}
}]
}
};
sunChart.setOption(sunChartOpt);
//获取报表数据
$.ajax({
url: "data/industry.json",
dataType: "json"
}).done(function() {
$("#sunChart").addClass("chart-done");
}).done(function(data) {
//console.log(data);
//自定义特定数据项的样式风格
const itemStyle = {color: "#800080"};
data[2].itemStyle = itemStyle;
for(let i in data[2].children) {
data[2].children[i].itemStyle = itemStyle;
}
//渲染报表数据
sunChart.setOption({
series: {
data: data
}
});
}).fail(function(jqXHR) {
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
});
//浏览器窗口发生变化时，重置报表大小
$(window).resize(function() {
sunChart.resize();
});
});
</script>
</body>
</html>
基于ECharts V4.2的旭日图设计与实现.rar （9个子文件） 
基于ECharts V4.2的旭日图设计与实现 css 
app.css 2KB img 
header.png 45KB bg.png 208KB
thumb.jpg 96KB data industry.json 6KB
index.html 3KB js jquery-3.3.1.min.js 85KB echarts.min.js 727KB echarts-theme-shine.js 4KB资源评论
