当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5使用教程实例

HTML5使用教程实例

2017年12月30日  | 移动技术网IT编程  | 我要评论
HTML5使用教程实例 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Echarts加载测试</title>
   </head>
   <body>
      <p id="main" style="width: 900px; height: 500px;">
         
      </p>
      
      
   
      <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('main')); 
            
            //单独定义option框架，数据在下方修改，方便重绘图表
            var option = {
                     title: {
                        text: "测试图表（内容虚拟）"
                     },
                       tooltip: {
                           show: true
                       },
                       legend: {
                           data:[]
                       },
                       xAxis : [
                           {
                               type : 'category',
                               data : []
                           }
                       ],
                       yAxis : [
                           {
                               type : 'value'
                           }
                       ],
                       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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网