HTML5使用教程实例
导读：收集整理的这篇文章主要介绍了html5教程-HTML5使用教程实例，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 HTML5使用教程实例 <...
收集整理的这篇文章主要介绍了html5教程-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;
ilegendData.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使用教程实例
!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;
ilegendData.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教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5使用教程实例
本文地址： https://pptw.com/jishu/587193.html