首页 > 程序开发 > web前端 > HTML 5 >

HTML5使用教程实例

2017-09-15

HTML5使用教程实例。

HTML5使用教程实例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Echarts加载测试</title>
   </head>
   <body>
      <div id="main" style="width: 900px; height: 500px;">
         
      </div>
      
      
   
      <script type="text/javascript" src="js/jquery-2.1.1.js" ></script>
      <script type="text/javascript" src="js/plugins/echarts/echarts-all.js" ></script>
      <script type="text/javascript">
            // 基于准备好的dom,初始化echarts图表
            var myChart = echarts.init(document.getElementById(&#39;main&#39;)); 
            
            //单独定义option框架,数据在下方修改,方便重绘图表
            var option = {
                     title: {
                        text: "测试图表(内容虚拟)"
                     },
                       tooltip: {
                           show: true
                       },
                       legend: {
                           data:[]
                       },
                       xAxis : [
                           {
                               type : &#39;category&#39;,
                               data : []
                           }
                       ],
                       yAxis : [
                           {
                               type : &#39;value&#39;
                           }
                       ],
                       series : [
                           {
                               "name":"",
                               "type":"bar",
                               "data":[]
                           },
                           {
                               "name":"",
                               "type":"bar",
                               "data":[]
                           },
                           {
                               "name":"",
                               "type":"bar",
                               "data":[]
                           }
                       ]
                      };
               
           
           $.ajax({
            type:"post",
            url:"/php-test/app/ajaxTest.php",  //php文件路径,可自行配置
            async:true,
            dataType: "json",
            success: function(data){
               console.log(data);
               
               //此处因为x轴和项目名称都没有设置,所有需要将数据处理成需要的格式,当然,开发中可能某些部分是固定值,可以取消相应操作
               
               //设置lengend数据:天语、小米、奇酷
               var legendData = [];
               for(var d in data){
                  legendData.push(d);
               }
               console.log(legendData);
               option.legend.data = legendData;
               
               //给x轴添加类别:周一、周二、周三
               option.xAxis[0].data = data[legendData[0]].day;
               
               //给series赋值并添加数据
               for(var i=0; i<legendData.length; i++){
                  option.series[i].name = legendData[i];
                  option.series[i].data = data[legendData[i]].value;
               }
               
               //因为数据是通过Ajax请求得到的,setOption必须在数据处理结束后执行,所以需要写在此处
               //当然,如果把Ajax设置成同步,可以写在下方,不过,那样对页面加载不好,我更喜欢这种方式
                myChart.setOption(option); 
            },
            error: function(e){
               console.error(e);
            }
         })
                 
      </script>
   </body>
</html>

相关文章
最新文章
热点推荐