Echarts集成json外部文件获取数据（一）
Echarts集成json外部文件获取数据（一）
散点图为例
编写html代码
也可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分钟上手之散点图</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="height: 500px;width: 1000px;" id="main"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
$.get('js/aqi-beijing.json', function (data) {
myChart.setOption({
title : {
/*text : '睡眠质量监测',
textStyle:{
fontSize:12,
}*/
},
tooltip : {
trigger : 'axis'
},
xAxis : {
data: data.map(function (item) {
return item[0];
})
},
yAxis : {
splitLine : {
show : false
}
},
/* toolbox : {
left : 'center',
feature : {
dataZoom : {
yAxisIndex : 'none'
},
restore : {},
saveAsImage : {}
}
},*/
dataZoom : [ {
startValue : '2014-06-01'
}, {
type : 'inside'
} ],
visualMap : {
top : 10,
right : 10,
pieces : [ {
gt : 1,
lte : 2,
label:'浅睡',
color : '#ff9933'
}, {
gt : 2,
lte : 3,
label:'深睡',
color : '#cc0033'
}, {
gt : 3,
lte : 4,
label:'熟睡',
color : '#660099'
} ],
outOfRange : {
color : '#999'
}
},
series : {
name : '睡眠',
type : 'line',
data: data.map(function (item) {
return item[1];
}),
markLine : {
silent : true,
data : [ {
yAxis : 1
}, {
yAxis : 2
}, {
yAxis : 3
} ]
}
}
});
})
myChart.setOption(option)
</script>
</body>
</html>
引入外部json文件，位于同目录下的Js文件夹
数据为json数据，可以根据情况进行数据修改，数据过大，删了大部分留下小部分作为展示
aqi-beijing.json
截图展示
心得
多看几个echarts图，你会发现数据都来源于data，简单的echarts图的数据很容易看懂，越复杂的数据的data就越多越复杂，echarts入门还是看官网，案例给的很详细，已经到了拿来就用的地步，你要做的就是消化练习。
根据json文件的格式数据，嵌套进echarts里面，echarts都是通过json格式获取数据。
下面会出一个springboot+mybatis+echarts的小的数据展示
查看11道真题和解析
