HTML5使用教程实例
程序员文章站
2022-03-12 20:54:39
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>
上一篇： HTML5实现桌面通知 提示功能
下一篇： 浅析四点网站优化提高网站用户粘性度的方法