从外部文件读入数组,做柱状图
数据文件内容如下:
[{
"categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
"data": [5, 20, 36, 10, 10, 20]
}]
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入js,本程序中,本文件和js在同一目录下 -->
<script src="echarts.min.js"></script>
<script type="text/javascript" src = "jquery.js"></script>
</head>
<body>
<div id = "main" style="width:600px;height: 400px;"></div>
<script type="text/javascript">
//$(document).ready(function(){
var myChart = echarts.init(document.getElementById('main'));
//异步加载数据
myChart.showLoading();
// 读取外部文件
$.getJSON('data/data.json').done(function (data) {
var option = {
title:{text:'异步数据加载'},
tooltip:{},
toolbox: {
show : true,
feature : {
magicType: {show: true, type: ['force', 'chord']},
saveAsImage : {show: true}
}
},
legend:{data:['销量']},
xAxis:{
data: data[0].categories
},
yAxis:{
type : 'value'
},
// 根据名字对应到相应的系列
series:[{
name:'销量',
type:'bar',//图形类型,bar是柱状图
data: data[0].data
}]
};
// 为echarts对象加载数据
myChart.setOption(option)
});
myChart.hideLoading();
</script>
</body>
</html>