脚本宝典收集整理的这篇文章主要介绍了html5教程-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>
<!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>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-HTML5使用教程实例全部内容，希望文章能够帮你解决html5教程-HTML5使用教程实例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。