ECharts简单的使用
super
2019-01-22 17:23
4206
<!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> </body> </html>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//异步加载
function getData()
{
myChart.showLoading();//自带加载动画 不要可删
$.post("get.php", {param:"参数"}, function(returnData)
{
myChart.hideLoading();//隐藏加载动画
myChart.setOption({
xAxis:{
name: '时间',
data: returnData.time
},
series: [{
// 根据名字对应到相应的系列
name: '数量',
data: returnData.data
}]
});
})
}
</script><?php
if(!empty($_POST))
{
//查询...
$timeArray = ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6'];
$dataArray = ['500', '200', '300', '500', '800', '1000'];
return ['time'=>$timeArray, 'data'=>$dataArray];
}
?>0 条讨论
