EChart

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

网址：

  1. http://echarts.baidu.com/
  2. https://github.com/ecomfe/echarts
  3. http://echarts.baidu.com/echarts2/index.html
  4. http://echarts.baidu.com/download.html

丰富的图表类型

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

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>

<html>

<header>

	<meta charset="utf-8">

	<!-- 引入 ECharts 文件 -->

	<script src="echarts.min.js"></script>

</header>

</html>

绘制一个简单的图表

<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->

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

</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="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>

EChart使用的更多相关文章

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

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

  2. 网站中使用echart

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

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

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

  4. java 版本EChart使用

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

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

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

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

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

  7. Echart的简单例子

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

  8. EChart和G2比较

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

  9. Echart图表入门

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

随机推荐

  1. UE4新手引导入门教程

    请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf

  2. VS15 preview 5打开文件夹自动生成slnx.VC.db SQLite库疑惑？求解答

    用VS15 preview 5打开文件夹(详情查看博客http://www.cnblogs.com/zsy/p/5962242.html中配置),文件夹下多一个slnx.VC.db文件,如下图: 本文 ...

  3. StringUtils的isBlank与isEmply

    1.public static boolean isEmpty(String str) 判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0 StringUtil ...

  4. C# Entity Framework并发处理

    原网站:C# Entity Framework并发处理 在软件开发过程中,并发控制是确保及时纠正由并发操作导致的错误的一种机制.从 ADO.NET 到 LINQ to SQL 再到如今的 ADO.NE ...

  5. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  6. Struts框架的核心业务

    Struts的核心业务 Struts核心业务有很多,这里主要介绍了比较简单一些的: 请求数据的处理,和数据自动封装,类型自动转换 1.Struts中数据处理 1.1.方式1:直接过去servletap ...

  7. 用Taurus.MVC 做个企业站（上）

    前言: 之前是打算写一篇文章叫:Taurus.MVC 从入门到精通,一篇完事篇! 后来转指一念,还是把教程集在这个企业站项目上吧!!! 企业站风格: 之前发过一个帮师妹写的企业站:最近花了几个夜晚帮师 ...

  8. .Net中的AOP系列之《间接调用——拦截方法》

    返回<.Net中的AOP>系列学习总目录 本篇目录 方法拦截 PostSharp方法拦截 Castle DynamicProxy方法拦截 现实案例--数据事务 现实案例--线程 .Net线 ...

  9. 虚拟机体验之 Xen 篇 —— 令人脑洞大开的奇异架构

    这一篇我要体验的虚拟机系统是 Xen.在虚拟机领域,Xen 具有非常高的知名度,其名字经常在各类文章中出现.同时 Xen 也具有非常高的难度,别说玩转,就算仅仅只是理解它,都不是那么容易.之所以如此, ...

  10. Leetcode 笔记 100 - Same Tree

    题目链接:Same Tree | LeetCode OJ Given two binary trees, write a function to check if they are equal or ...