先介绍echart:

官网： http://echarts.baidu.com  看名字就知道是百度出品的。

      ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。具体不说了，可以看官网的介绍。

demo如下：

　　1.

　　  

如图：直接引入echart.js就可以开发了。现在地址： http://echarts.baidu.com/download.html

　2.写一个盛放图表的div

　　 <div id="main" style="width: 600px;height:400px;"></div>

3.复制官方提供的api代码，自己可以修改：

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'}
]
}
],
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
})
</script>

效果如图：

我们看代码：这个图表需要传入的数据就是 我们的data数组，所以我们在实际开发的时候就需要传入需要的data；下面是另一组数据，来自模拟数据放入指定的数组中：

1.大体的结构：

这里是我们模拟的需要取数据的html结构：

下面的是js部分：

效果图这样：

做这个demo很简单,主要是框架api给的好，这里主要记录两点：

一.js取dom的数据时，两种数据，一次循环取出，放在不同的数组中，js如下：　

　　var categorie = $(".data_items ul li");
　　var categories = [],price =[];
　　for(var i = 0;i < categorie.length;i++){
　　　　//categorie[i]==><li>....</li> js 对象 转化为 jq对象
　　　　categories.push($(categorie[i]).find("span").html());
　　　　price.push($(categorie[i]).find("b").html());
　　}

categories和price是一个数组，是为下面需要的数据接口，定义的数据；需要注意的是。循环出来的 categorie[i] （每个Li）是js对象，需要用后面的jq 的find方法，需要用$("xxx")转化一下，push方法就不多啰嗦了，向数组压进数据，每循环一次，就压进一个。

二．在模拟的异步请求数据，用的是setTimeout函数，具体的函数调用看下面具体的代码

　　function fetchData(cb) {

　　　　// 通过 setTimeout 模拟异步加载
　　　　setTimeout(function () {
　　　　　　cb({
　　　　　　　　categories: categories,//纯属组
　　　　　　　　data: price// 纯属组
　　　　　　});
　　　　}, 1000);
　　}

ｌｏｗ　Ｂ　的所有代码如下：

ｃｏｄｅ：

　　　

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<div class="data_items">
<ul>
<li><span>衬衫</span>: <b>5</b></li>
<li><span>羊毛衫</span>: <b>30</b></li>
<li><span>雪纺衫</span>: <b>20</b></li>
<li><span>裤子</span>: <b>10</b></li>
<li><span>高跟鞋</span>: <b>15</b></li>
<li><span>袜子</span>: <b>65</b></li>
</ul>
</div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var categorie = $(".data_items ul li");
var categories = [],price =[];
for(var i = 0;i < categorie.length;i++){
//categorie[i]==><li>....</li> js 对象 转化为 jq对象
categories.push($(categorie[i]).find("span").html());
price.push($(categorie[i]).find("b").html());
}

function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
categories: categories,//纯属组
data: price// 纯属组
});
}, 1000);
}

// 初始 option
option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};

fetchData(function (data) {
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
</script>
</body>
</html>

echart的更多相关文章

  1. EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

  2. EChart使用

    EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...

  3. 网站中使用echart

    在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...

  4. WebGIS中利用AGS JS+eChart实现一些数据展示的探索

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...

  5. java 版本EChart使用

    一.简介 EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计.该种方式js在页面动态拼接json数据,再进行渲染.这种方法的优点是,灵活,可以随时进行修改.缺点 ...

  6. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  7. e-chart 本地加载中国地图

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. Echart的简单例子

    [转载自:http://echarts.baidu.com/echarts2/doc/start.html] <%@ page language="java" content ...

  9. EChart和G2比较

    1.上市时间:EChart已经久经沙场,G2算是新事物 2.源码:截止发文,在Github上 数量 EChart G2 commits 3086 8 branches 3 1 releases 43 ...

  10. Echart图表入门

    1.Echart是什么? Enterprise Charts的缩写,商业级数据图表,一个纯Javascript的图表库.更多的内容可以参考网上的资料 2.使用步骤 a.下载开发包 官网地址:http: ...

随机推荐

  1. Java加密与解密笔记(四) 高级应用

    术语列表: CA:证书颁发认证机构(Certificate Authority) PEM:隐私增强邮件(Privacy Enhanced Mail),是OpenSSL使用的一种密钥文件. PKI:公钥 ...

  2. java爬虫简单实现

    package WebSpider; import java.io.BufferedReader; import java.io.IOException; import java.io.InputSt ...

  3. SLAM入门之视觉里程计(2)：相机模型（内参数，外参数）

    相机成像的过程实际是将真实的三维空间中的三维点映射到成像平面(二维空间)过程,可以简单的使用小孔成像模型来描述该过程,以了解成像过程中三维空间到二位图像空间的变换过程. 本文包含两部分内容,首先介绍小 ...

  4. 基于 HTML5 WebGL 的 3D 服务器与客户端的通信

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...

  5. 栈stack（2）：栈的链表实现

    定义 从上一篇我们知道,栈(stack)是一个只允许一端进行删除插入操作的线性表.同时,我们联想到线性表的链式结构,其特点是用一组任意的存储单元存储线性表的数据元素,因此我们选择使用链表去实现栈,规定 ...

  6. Python学习日记：day4

    列表 li=['alex',[1,2,3] ,'wusir','egon','女神','taibai']#列表 l1 = li[0] print(l1)#alex l2 = li[1] print ( ...

  7. java 异常处理机制（java 编程思想）

    一.概念 "异常"这个词有"我对此感到意外"的意思.问题出现了,你也许并不清楚该如何处理,但你的确知道不应该置之不理:你要停下来,看看是不是有别人或在别的地方, ...

  8. 如何用VSCode愉快的写Python

    在学习Python的过程中,一直没有找到比较趁手的第三方编辑器,用的最多的还是Python自带的编辑器.由于本人用惯了宇宙第一IDE(Visual Studio),所以当Visual Studio C ...

  9. ADODB.Connection、ADODB.RecordSet

    1.数据库连接对象(ADODB. Connection)该对象用于与ODBC数据库建立连接,所有对数据库的操作均通过该连接进行.数据库连接对象ADODB. Connection的作用象Delphi中的 ...

  10. bzoj 2298: [HAOI2011]problem a

    Description 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同的分数) Input 第一行一个整数n ...