echarts3 相信大家都了解吧，是百度研发的

ECharts 特性介绍

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

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

首先去官网下载

http://echarts.baidu.com/dist/echarts.js

简单的柱状图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

【echarts3】--1 简单入门的更多相关文章

  1. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  4. emacs最简单入门，只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  5. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  6. Docker 简单入门

    Docker 简单入门 http://blog.csdn.net/samxx8/article/details/38946737

  7. Springmvc整合tiles框架简单入门示例（maven）

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  8. git简单入门

    git简单入门 标签(空格分隔): git git是作为程序员必备的技能.在这里就不去介绍版本控制和git产生的历史了. 首先看看常用的git命令: git init git add git comm ...

  9. 程序员，一起玩转GitHub版本控制，超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

  10. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

随机推荐

  1. IOS成长之路-用NSXMLParser实现XML解析

    再次对xml进行解析,又有了些理解,如果有不对的地方,请给小弟指出,谢谢! <?xml version="1.0" encoding="UTF-8"?&g ...

  2. Oracle临时表空间组

    Oracle 10g之前,同一用户的多个会话只可以使用同一个临时表空间,因为在给定的时间只有一个临时表空间默认给用户,为了解决这个潜在的瓶颈,Oracle支持临时表空间组即包含多个临时表空间的集合.临 ...

  3. 关于jwplayer 处理进度条禁止快进的处理方法。

    今天在处理一个关于jwplayer  第一次播放禁止快进,但是可以后退的一个需求.开始在网上去查一些方法,有几个方法是换皮肤,禁止点击,但是和我的初衷不是很一致,还有一种方式是官网查看了API接口的方 ...

  4. mysql myisam转innodb的2种方法

      mysql myisam转innodb的2种方法 mysql中的myisam和innodb有什么区别.一个好比便利店,一个好比大型购物中心,他们是为了适应不同的场合而存在的.当流量比较小,我们可以 ...

  5. linux_软件安装策略和升级策略

    运维3大原则:可靠.稳定.简单 尝试新的软件,一切都是未知的,也就是说不可靠,不可预测也就意味的不稳定,解决问题,通过百度和谷歌工具有可能找不到解决方法,只能通过官方文档来解决问题,大大增加了排错时间 ...

  6. PHP获取字符串编码与转码

    (⊙o⊙)-编辑器保存的是utf8的文档取出来的字符串是gbk编码?问题很多,字符串转换为utf8的话在浏览器输出乱码 $e=mb_detect_encoding($d,array('GB2312', ...

  7. 【转】shell字符串截取

    shell字符串的截取的问题: 一.Linux shell 截取字符变量的前8位,有方法如下: 1.expr substr “$a” 1 8 2.echo $a|awk ‘{print substr( ...

  8. 【转】利用matlab生成随机数函数

    原文地址:利用matlab生成随机数函数 rand(n):生成0到1之间的n阶随机数方阵  rand(m,n):生成0到1之间的m×n的随机数矩阵 (现成的函数) betarnd:贝塔分布的随机数生成 ...

  9. SQL语句-delete语句

    delete语句 delete语句用于删除表中已经存在的整行数据 Tbl_name关键词代表删除数据的目标表 Where子句代表被删除数据的满足条件,如果没有where子句则代 表所有表数据都删除 O ...

  10. Android webView包装WebAPP

    前言 Android webView 兼容体验真的差到了极点!! 前一阵子,老板要讲 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包, 原理是很简单 ...