ECharts简单的使用
super
2019-01-22 17:23
3488
<!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 条讨论