最近把编辑器从Sublime换成HBuilder,感觉好用很多啊,可能自己插件没弄好吧。不不过HBuilder的启动速度确实慢,放机械盘启动要7-13秒,还好有固态。
因为项目需要,这周上手了百度的Echarts,不得不说是百度的良心产品,功能很强大,除了自己定义图表格式,还能通过调用百度地图API进行图表如热点图之类的展示,另外由于是国产的,文档也很齐全,顺着文档把里面的设置过了一遍,把基本情况搞清楚了。
本文的主要内容 通过AJAX调用本地JSON文件生成数据放入图表中,图表用的线图,先上外观
功能是通过单选按钮选择数据源,JS中通过选择的值控制Ajax的请求url,然后点击显示按钮生成图表并改变图表标题,现在说实现步骤:
一、HTML
1.先把页面效果做出来,页面里需要的按钮,单选等,然后下方需要预定义一块DIV放图表,填充放在JS中实现。
2.引入js,用到了jquery-3.1.1.js、echarts.js和自己写的data1.js,样式为了好看些用了bootsrtap。
3.这里在单选按钮的value上存放了文件名,并将第一个radio设置了默认选中。
代码+源码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>游龙翔隼-Echarts</title>
<script type=”text/javascript” src=”js/jquery-3.1.1.js”></script>
<script type=”text/javascript” src=”js/echarts.js”></script>
<link rel=”stylesheet” href=”css/bootstrap.min.css” />
</head>
<body>
<div class=”form-control” style=”width: 300px;height: 100px;margin: 5px auto;padding: 20px;”>
<input type=”radio” class=”box” checked=”checked” name=”switchChart” id=”chk” value=”sale.json” />
<span for>2016年</span>
<input type=”radio” class=”box” name=”switchChart” id=”chk1″ value=”sale1.json” />
<span>2017年</span>
<input id=”showChart” class=”btn-primary” type=”button” value=”显示”/>
</div>
<div id=”main” style=”width: 600px;height: 400px;margin: 10px auto;”></div>
<script type=”text/javascript” src=”js/data1.js”></script>
</body>
</html>
二、JavaScript
代码+源码:
var myChart =echarts.init(document.getElementById(“main”));//初始化chart
var btn1=$(“#showChart”);
var chk=$(“.box”);
var txt=$(“span”);
//图表封装在此
btn1.click(function(){
myChart.showLoading(); //加载效果
for(var mark=0;mark<chk.length;mark++){
if(chk[mark].checked){
//alert(chk[mark].value);
//var source=chk[mark].value;
var tle=txt[mark].innerText;
console.log(tle);
var source=”json/”+chk[mark].value;
var names=[];
var ages=[];
$.ajax({
type:”get”,
url:source,
async:true,
dataType:”json”,
success:function(result){
console.log(“请求成功:”);
var tip = result.length;
for(var i=0;i<tip;i++){
names.push(result[i].name);
}
for(var i=0;i<tip;i++){
ages.push(result[i].age);
}
var option ={
// 标题
title:{
text:tle,
left:100,
borderColor:”#eee”,
borderWidth:2,
},
// 工具箱
toolbox:{
show:true,
feature:{
saveAsImage:{
show:true,
},
dataView:{
show:true,
},
restore:{
show:true,
},
dataZoom:{
show:true,
},
magicType:{
show:true,
type:[‘line’, ‘bar’, ‘stack’, ’tiled’],
}
},
},
// 触发器
tooltip:{
trigger:”item”,
},
// 图例
legend:{
data:[tle+”1-8月出票量”],
},
// X轴
xAxis:{
data:names
},
// Y轴
yAxis:{},
// 数据
series:[{
name:tle+”1-8月出票量”,
type:”line”,
data: ages
}]
}
//将设置好的option置入myChart
myChart.setOption(option);
//模拟等待时间
setTimeout(“myChart.hideLoading()”,800);
},
error:function(){
console.log(“failed”);
myChart.hideLoading();
}
})
}
}
})
三、JSON
sale.json
sale1.json
思路:通过radio的值改变ajax的请求路径,将对应的span内容作为图表的标题。实际项目中可以改为在AJAX请求过程中传入radio的值,让后台判断所需的数据。