最近把编辑器从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的值，让后台判断所需的数据。

Echarts笔记——使用AJAX填充数据的更多相关文章

  1. jquery mobile开发笔记之Ajax提交数据（转）

    http://my.oschina.net/xiahuawuyu/blog/81763 这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对 ...

  2. ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

    ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...

  3. ajax请求数据动态填充之文档与字符串区别手法

    success: function(data){ if(data.status==200){ var realName=data.doc.realName; $("#yishiul" ...

  4. 基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）

    前言 我们先跟随百度百科了解一下什么是"数据可视化 [1]". 数据可视化,是关于数据视觉表现形式的科学技术研究. 其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来 ...

  5. 小笔记(一)：ajax传递数组及将ajax返回数据赋值

    当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...

  6. ExtJS学习笔记2：响应事件、使用AJAX载入数据

    响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 v ...

  7. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  8. ECharts 从后台动态获取数据 （asp.net）

    (一) 使用工具 visual studio 2017:Web开发:asp.net (代码中的js引用路径以及ajax方法调用的url,记得修改哦) (二) 准备工作(此处写给和我一样小白) 1.动态 ...

  9. .NET MVC 学习笔记（六）— 数据导入

    .NET MVC 学习笔记(六)—— 数据导入 在程序使用过程中,有时候需要新增大量数据,这样一条条数据去Add明显不是很友好,这时候最好就是有一个导入功能,导入所需要的数据,下面我们就一起来看一下导 ...

随机推荐

  1. STM 8s 外部中断寄存器无法写入

    虽然说单片机开发就是对手册的研究,但是开发过程中,还是要做些笔记的,方便以后注意那些坑. 工作要求所以接触了一下STM328s00f3这个芯片,配置外部中断的时候遇到了一点问题 PS:IAR这个开发软 ...

  2. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  3. SparkMLib分类算法之朴素贝叶斯分类

    SparkMLib分类算法之朴素贝叶斯分类 (一)朴素贝叶斯分类理解 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法.简单来说,朴素贝叶斯分类器假设样本每个特征与其他特征都不相关.举个例子, ...

  4. 多媒体开发库 之 SDL 详解

    SDL 简介 SDL(Simple DirectMedia Layer)是一套开放源代码的跨平台多媒体开发库,使用C语言写成.SDL提供了数种控制图像.声音.输出入的函数,让开发者只要用相同或是相似的 ...

  5. js实现谷歌坐标转百度坐标

    js实现谷歌坐标转百度坐标 谷歌坐标转百度坐标 实现算法如下(以js为例,其他语言调整就行): //$lat 维度:$lng 经度  function GCJTobaidu($lat, $lng){ ...

  6. 数据库插入数据失败，log提示不能将值 NULL 插入列 'id'

    已经记不住具体的log信息了,意思就是ID如果没有设置为自增长的情况下就不能插入数据,而建表时ID字段是设置为"not null",所以就不能顺利插入数据. 解决方法有两种: ①建 ...

  7. bootstrapValidator 使用（包含入门demo，常用方法，以及常用的规则）

    一   什么是bootstrapValidator?    -- 一个基于 jquery,boostrap 的表单验证框架....简单实用上手快,页面美观还过得去,不废话了,直接撸. 二  boots ...

  8. iHover – 30+ 纯 CSS3 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建(包括文件),便于修改变量.有模块化的代码, ...

  9. .Net Core 图片文件上传下载

    当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...

  10. 用excel公式生成有规律的代码，减少编程工作量

    1.在excel中如何输入公式 在excel表格中输入 & 符号是字符串的连接符,比如: 在excel表格中输入  ="sherlock"&"mina&q ...