HTML 5使用教程实例
<!DOCTY PE ht ML > <html> <head> < ;m eta charset="UTF-8"> <t IT le>Echarts加载测试</title> </head> <body> <p id="m ai n" style="width: 900px; h ei ght: 500px;"> </p> <script type="text/javascript" src="js/ jq uery-2.1.1.js" ></script> <script type="text/javascript" src="js/plu gin s/echarts/echarts-all.js" ></script> <script type="text/javascript"> // 基于准备好的dom，初始化echarts图表 VAR myChart = echarts.init(document.getElementById(& # 39;main')); //单独定义option框架，数据在下方修改，方便重绘图表 var option = { title: { text: "测试图表（内容虚拟）" }, tooltip: { show: true }, legend: { data:[] }, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value' } ], series : [ { "n am e":"", "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> &nbs p;
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 -t est/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>
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5使用教程实例 全部内容，希望文章能够帮你解决 html5教程-HTML5使用教程实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5使用教程实例的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219349