0
点赞
收藏
分享

微信扫一扫

141Echarts - 树图(From Top to Bottom Tree)

素锦时年_1b00 2022-03-24 阅读 65


效果图

141Echarts - 树图(From Top to Bottom Tree)_初始化

源代码

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="dist/extension/dataTool.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1024px;height:768px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;

myChart.showLoading();
$.get('data/flare.json', function(data) {
myChart.hideLoading();

myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
type: 'tree',

data: [data],

left: '2%',
right: '2%',
top: '8%',
bottom: '20%',

symbol: 'emptyCircle',

orient: 'vertical',

expandAndCollapse: true,

label: {
normal: {
position: 'top',
rotate: -90,
verticalAlign: 'middle',
align: 'right',
fontSize: 9
}
},

leaves: {
label: {
normal: {
position: 'bottom',
rotate: -90,
verticalAlign: 'middle',
align: 'left'
}
}
},

animationDurationUpdate: 750
}]
});
});

//myChart.setOption(option);
</script>
</body>

</html>



举报

相关推荐

0 条评论