数据可视化-ECharts Html项目实战（11）
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.getJSON('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/flare.json', function (data) {
myChart.hideLoading();
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [data],
top: '5%',
left: '7%',
bottom: '2%',
right: '20%',
symbolSize: 7,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
myChart.setOption(option);
});
if (option && myChart.setOption) {
myChart.setOption(option);
}
</script>
</body>
</html>这段代码使用了ECharts的树形图(tree)来可视化一个名为flare.json的数据集。它展示了如何通过Ajax请求获取数据，并在回调函数中初始化ECharts实例。代码简洁，注重教学，适合作为数据可视化项目的入门示例。
评论已关闭