一、简介
　　ECharts是一个来自百度的开源的javascript图标库。通过ECharts我们可以呈现出多种类型的图表。ECharts底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。
ECharts 下载地址为：http://echarts.baidu.com/index.html。

　　使用如下：

　　1、下载Echarts，示例版本为echarts-2.2.1,下载之后解压。目录结构如下：

　　doc目录下的是相关文档。extension是进行扩展的示例。src目录下是源码文件。test目录下是相关测试。build目录下有dist与source目录。使用的echarts只需要dist目录下的所有文件。将dist目录下的文件拷贝到我们的工作目录echarts中。

　　2、在网页中引入如下js即可使用。

<script src="js/jquery-1.10.2.min.js"></script>

<script src="echarts/echarts-all.js"></script>

二、示例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <meta name="description" content="ECharts">

     <title>地图示例</title>

 </head>

 <body>

     <div   id="map"  style="height: 400px; width:500px" ></div>

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

 <script src="echarts-all.js"></script>

 <script type="text/javascript">

 var map = echarts.init(document.getElementById('map'));

 $(function(){

     var option = {

         title : {

             text: '年度异常统计地区图',//标题

             x:'center'//位置

         },

         tooltip : {

             trigger: 'item'

         },

         legend: {

             orient: 'vertical',//位置水平或垂直

             x:'left',//位置，left、center、right

             data:['统计值']

         },

         dataRange: {//数据区间

             min: 0,//最小值

             max: 1000,//最大值

             x: 'left',//位置

             y: 'bottom',//位置

             //show:false,//是否可见

             orient:'horizontal',//位置水平或垂直

             text:['高','低'],

             color : ['#1e90ff','#f0ffff'],  // 颜色

             calculable : true

         },

        /* toolbox: {

             show: true,

             orient : 'vertical',

             x: 'right',

             y: 'center',

             feature : {

                 mark : {show: true},

                 dataView : {show: true, readOnly: false},

                 restore : {show: true},

                 saveAsImage : {show: true}

             }

         },*/

         series : [

             {

                 name: '统计值',

                 type: 'map',//图表类型

                 mapType: 'china',//地图类型

                 roam: false,

                 itemStyle:{

                     normal:{

                         label:{show:true},

                         areaStyle:{color:'red'}

                     },

                     emphasis:{label:{show:true}}

                 },

                 data:[//数值

                     {name: '北京',value: Math.round(Math.random()*1000)},

                     {name: '天津',value: Math.round(Math.random()*1000)},

                     {name: '上海',value: Math.round(Math.random()*1000)},

                     {name: '重庆',value: Math.round(Math.random()*1000)},

                     {name: '河北',value: Math.round(Math.random()*1000)},

                     {name: '河南',value: Math.round(Math.random()*1000)},

                     {name: '云南',value: Math.round(Math.random()*1000)},

                     {name: '辽宁',value: Math.round(Math.random()*1000)},

                     {name: '黑龙江',value: Math.round(Math.random()*1000)},

                     {name: '湖南',value: Math.round(Math.random()*1000)},

                     {name: '安徽',value: Math.round(Math.random()*1000)},

                     {name: '山东',value: Math.round(Math.random()*1000)},

                     {name: '新疆',value: Math.round(Math.random()*1000)},

                     {name: '江苏',value: Math.round(Math.random()*1000)},

                     {name: '浙江',value: Math.round(Math.random()*1000)},

                     {name: '江西',value: Math.round(Math.random()*1000)},

                     {name: '湖北',value: Math.round(Math.random()*1000)},

                     {name: '广西',value: Math.round(Math.random()*1000)},

                     {name: '甘肃',value: Math.round(Math.random()*1000)},

                     {name: '山西',value: Math.round(Math.random()*1000)},

                     {name: '内蒙古',value: Math.round(Math.random()*1000)},

                     {name: '陕西',value: Math.round(Math.random()*1000)},

                     {name: '吉林',value: Math.round(Math.random()*1000)},

                     {name: '福建',value: Math.round(Math.random()*1000)},

                     {name: '贵州',value: Math.round(Math.random()*1000)},

                     {name: '广东',value: Math.round(Math.random()*1000)},

                     {name: '青海',value: Math.round(Math.random()*1000)},

                     {name: '西藏',value: Math.round(Math.random()*1000)},

                     {name: '四川',value: Math.round(Math.random()*1000)},

                     {name: '宁夏',value: Math.round(Math.random()*1000)},

                     {name: '海南',value: Math.round(Math.random()*1000)},

                     {name: '台湾',value: Math.round(Math.random()*1000)},

                     {name: '香港',value: Math.round(Math.random()*1000)},

                     {name: '澳门',value: Math.round(Math.random()*1000)}

                 ]

             }

         ]

     };

     map.setOption(option); 

     map.on("click", function(event){//点击事件

         alert(event.name + event.value);

         console.log(event);

     });

 });

 </script>

 </body>

 </html>

　　效果如下：

ECharts 之一——入门的更多相关文章

  1. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  2. ECharts简单入门

    图1和图2是手机上显示的效果, 图3是电脑浏览器显示的效果. 如何使用ECharts? 1.下载echarts.js 2.引入echarts.js <script type="text ...

  3. ECharts快速入门

    一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...

  4. ECharts简单入门demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Echarts轻松入门，内附踩坑秘籍

    首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...

  6. Echarts快速入门---------v客学院技术分享

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  7. 图表控件== 百度 echarts的入门学习

    花了3天的时间 去学习跟试用之前两款的图表控件 hightcharts(商业,人性化,新手非常方便试用,图表少了点) 跟chartjs==>搭配vue更好 控件,整体而言都还可以. http:/ ...

  8. echarts -01 入门

    1.效果图 2. code <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. 百度echarts极速入门

    1.http://echarts.baidu.com/ 进入官网 2.打开官方示例 3.随便打开一个列子并打开f12浏览器调试模式,找到例子的iframe地址 4.打开地址 5.下载例子,so eas ...

随机推荐

  1. QCustomplot使用分享(六) 坐标轴和网格线

    一.概述 前边已经写了5篇对QCustomPlot的讲解,看过上述的几篇文章后,基本就能做一些简单的使用了,但是如果想要做到高度的控制图表,那么坐标轴将是很重要的一部分,因为坐标轴就是图表的一个参考系 ...

  2. Scrum 项目 7.0

    ------------------7.0------------------------------ Sprint回顾 1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:设定 ...

  3. IDM主机上安装融合应用程序配置框架

    IDM主机上安装融合应用程序配置框架   安装Oracle融合应用程序>设置>身份和访问管理节点安装融合应用程序配置框架 由于我们使用Oracle VirtualBox虚拟机这一次,我们在 ...

  4. 【C#】OOP之多态那点事

    前言: 对菜鸟开发者的忠告:花一万个小时练习 Coding,不要浪费一万小时无谓地 Debugging(也就说看代码) 看上面的UML图,我们创建一个抽象的Instrument类,类中有一个抽象方法p ...

  5. 进入IT企业必读的200个.NET面试题

    点击打开链接 点击打开链接 版权声明:本文为博主原创文章,未经博主允许不得转载.

  6. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  7. ASP.NET几种页面数据绑定的用法及区别: <%#、 <%=、 <% 、<%@

    < %#... %>: 是在绑定控件DataBind()方法执行时被执行,用于数据绑定 如: < %# Container.DataItem("tit") %&g ...

  8. windbg定位死锁

    操作系统对死锁的描述如下: 所谓死锁:是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去. 那么为什么会产生死锁呢? 1.因为系统资源不足. ...

  9. C++之多态的一个例子

    [例12.1] 先建立一个Point(点)类,包含数据成员x,y(坐标点).以它为基类,派生出一个Circle(圆)类,增加数据成员r(半径),再以Circle类为直接基类,派生出一个Cylinder ...

  10. 一些js小题（一）

    一些js小题,掌握这些对于一些常见的面试.笔试题应该很有帮助: var a=10; function aa(){ alert(a); } function bb(){ aa(); } bb();//1 ...