echarts是百度开发的一款商业级、开源免费的前端图表组件，具体可访问其主页：http://echarts.baidu.com/

echarts目前已经发布了2.0版本，使用起来非常的方便，并且效果强大。这里简单记下echarts如何使用及本地部署情况。

注：早期的版本为了使用echarts还要下载一个名为zender的canvas库，而echarts-2.0.1集成了zender，所以大家无需再单独下载zender。

1.下载echarts-2.0.1

echarts最新可用的版本下载地址：http://echarts.baidu.com/build/echarts-2.0.1.zip，下载解压后如下：

该zip包是echarts完整的说明文档和echarts源程序，之前没接触过的同学可以打开index.html了解一下（当然这些内容在其在线主页上也能看到）。

2.下载esl.js

esl.js是echarts的加载器，用来初始化和配置echarts，下载地址：http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js

*下载到本地的esl.js本身对路径没什么要求，不过我还是按照url创建了本地路径ecom/esl/1-6-10/esl.js，所以后面的引用上我用的是这个路径。

3.部署echarts

其实很简单，就是把刚才下载echarts-2.0.1包内的build文件夹和刚才下载的esl.js放在一个目录下即可，如图：

其中，test.html是我从echarts主页上复制下来的一个示例程序，该程序是一个地图型(map)数据呈现图表。在此，拿来验证本地部署的情况。

test.html代码我也在此贴一下：

  1. <!DCOTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>echarts testing page</title>
  6.         <script src="./ecom/esl/1-6-10/esl.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="main" style="height:400px;"></div>
  10.         <script type="text/javascript">
  11.             require.config({
  12.                 paths:{
  13.                     "echarts":"build/echarts",
  14.                     "echarts/chart/map":"build/echarts-map"
  15.                 }
  16.             });
  17.  
  18.             //using
  19.             require(
  20.                 [
  21.                     "echarts",
  22.                     "echarts/chart/map"
  23.                 ],
  24.                 function(ec){
  25.                     var myChart=ec.init(document.getElementById("main"));
  26.                     var option = {
  27.                         title : {
  28.                             text: 'iphone销量',
  29.                             subtext: '纯属虚构',
  30.                             x:'center'
  31.                         },
  32.                         tooltip : {
  33.                             trigger: 'item'
  34.                         },
  35.                         legend: {
  36.                             orient: 'vertical',
  37.                             x:'left',
  38.                             data:['iphone3','iphone4','iphone5']
  39.                         },
  40.                         dataRange: {
  41.                             min: 0,
  42.                             max: 2500,
  43.                             x: 'left',
  44.                             y: 'bottom',
  45.                             text:['高','低'],           // 文本，默认为数值文本
  46.                             calculable : true
  47.                         },
  48.                         toolbox: {
  49.                             show : true,
  50.                             orient : 'vertical',
  51.                             x: 'right',
  52.                             y: 'center',
  53.                             feature : {
  54.                                 mark : {show: true},
  55.                                 dataView : {show: true, readOnly: false},
  56.                                 restore : {show: true},
  57.                                 saveAsImage : {show: true}
  58.                             }
  59.                         },
  60.                         series : [
  61.                             {
  62.                                 name: 'iphone3',
  63.                                 type: 'map',
  64.                                 mapType: 'china',
  65.                                 roam: true,
  66.                                 itemStyle:{
  67.                                     normal:{label:{show:true}},
  68.                                     emphasis:{label:{show:true}}
  69.                                 },
  70.                                 data:[
  71.                                     {name: '北京',value: Math.round(Math.random()*1000)},
  72.                                     {name: '天津',value: Math.round(Math.random()*1000)},
  73.                                     {name: '上海',value: Math.round(Math.random()*1000)},
  74.                                     {name: '重庆',value: Math.round(Math.random()*1000)},
  75.                                     {name: '河北',value: Math.round(Math.random()*1000)},
  76.                                     {name: '河南',value: Math.round(Math.random()*1000)},
  77.                                     {name: '云南',value: Math.round(Math.random()*1000)},
  78.                                     {name: '辽宁',value: Math.round(Math.random()*1000)},
  79.                                     {name: '黑龙江',value: Math.round(Math.random()*1000)},
  80.                                     {name: '湖南',value: Math.round(Math.random()*1000)},
  81.                                     {name: '安徽',value: Math.round(Math.random()*1000)},
  82.                                     {name: '山东',value: Math.round(Math.random()*1000)},
  83.                                     {name: '新疆',value: Math.round(Math.random()*1000)},
  84.                                     {name: '江苏',value: Math.round(Math.random()*1000)},
  85.                                     {name: '浙江',value: Math.round(Math.random()*1000)},
  86.                                     {name: '江西',value: Math.round(Math.random()*1000)},
  87.                                     {name: '湖北',value: Math.round(Math.random()*1000)},
  88.                                     {name: '广西',value: Math.round(Math.random()*1000)},
  89.                                     {name: '甘肃',value: Math.round(Math.random()*1000)},
  90.                                     {name: '山西',value: Math.round(Math.random()*1000)},
  91.                                     {name: '内蒙古',value: Math.round(Math.random()*1000)},
  92.                                     {name: '陕西',value: Math.round(Math.random()*1000)},
  93.                                     {name: '吉林',value: Math.round(Math.random()*1000)},
  94.                                     {name: '福建',value: Math.round(Math.random()*1000)},
  95.                                     {name: '贵州',value: Math.round(Math.random()*1000)},
  96.                                     {name: '广东',value: Math.round(Math.random()*1000)},
  97.                                     {name: '青海',value: Math.round(Math.random()*1000)},
  98.                                     {name: '西藏',value: Math.round(Math.random()*1000)},
  99.                                     {name: '四川',value: Math.round(Math.random()*1000)},
  100.                                     {name: '宁夏',value: Math.round(Math.random()*1000)},
  101.                                     {name: '海南',value: Math.round(Math.random()*1000)},
  102.                                     {name: '台湾',value: Math.round(Math.random()*1000)},
  103.                                     {name: '香港',value: Math.round(Math.random()*1000)},
  104.                                     {name: '澳门',value: Math.round(Math.random()*1000)}
  105.                                 ]
  106.                             },
  107.                             {
  108.                                 name: 'iphone4',
  109.                                 type: 'map',
  110.                                 mapType: 'china',
  111.                                 itemStyle:{
  112.                                     normal:{label:{show:true}},
  113.                                     emphasis:{label:{show:true}}
  114.                                 },
  115.                                 data:[
  116.                                     {name: '北京',value: Math.round(Math.random()*1000)},
  117.                                     {name: '天津',value: Math.round(Math.random()*1000)},
  118.                                     {name: '上海',value: Math.round(Math.random()*1000)},
  119.                                     {name: '重庆',value: Math.round(Math.random()*1000)},
  120.                                     {name: '河北',value: Math.round(Math.random()*1000)},
  121.                                     {name: '安徽',value: Math.round(Math.random()*1000)},
  122.                                     {name: '新疆',value: Math.round(Math.random()*1000)},
  123.                                     {name: '浙江',value: Math.round(Math.random()*1000)},
  124.                                     {name: '江西',value: Math.round(Math.random()*1000)},
  125.                                     {name: '山西',value: Math.round(Math.random()*1000)},
  126.                                     {name: '内蒙古',value: Math.round(Math.random()*1000)},
  127.                                     {name: '吉林',value: Math.round(Math.random()*1000)},
  128.                                     {name: '福建',value: Math.round(Math.random()*1000)},
  129.                                     {name: '广东',value: Math.round(Math.random()*1000)},
  130.                                     {name: '西藏',value: Math.round(Math.random()*1000)},
  131.                                     {name: '四川',value: Math.round(Math.random()*1000)},
  132.                                     {name: '宁夏',value: Math.round(Math.random()*1000)},
  133.                                     {name: '香港',value: Math.round(Math.random()*1000)},
  134.                                     {name: '澳门',value: Math.round(Math.random()*1000)}
  135.                                 ]
  136.                             },
  137.                             {
  138.                                 name: 'iphone5',
  139.                                 type: 'map',
  140.                                 mapType: 'china',
  141.                                 itemStyle:{
  142.                                     normal:{label:{show:true}},
  143.                                     emphasis:{label:{show:true}}
  144.                                 },
  145.                                 data:[
  146.                                     {name: '北京',value: Math.round(Math.random()*1000)},
  147.                                     {name: '天津',value: Math.round(Math.random()*1000)},
  148.                                     {name: '上海',value: Math.round(Math.random()*1000)},
  149.                                     {name: '广东',value: Math.round(Math.random()*1000)},
  150.                                     {name: '台湾',value: Math.round(Math.random()*1000)},
  151.                                     {name: '香港',value: Math.round(Math.random()*1000)},
  152.                                     {name: '澳门',value: Math.round(Math.random()*1000)}
  153.                                 ]
  154.                             }
  155.                         ]
  156.                     };
  157.  
  158.                     //loading data
  159.                     myChart.setOption(option);
  160.                 }
  161.             );
  162.         </script>
  163.     </body>
  164. </html>

打开浏览器（chrome），看下这个页面显示如何：

看看，效果不错吧。另外，echarts几乎支持所有常见的图表模型，想了解更多可自行访问echarts主页。

本文使用的环境配置也打包好了，如有需要可点击下载：点我下载！

PS：echarts在网页内的的初始化和配置可查看贴出的test.html的script部分，略微思考下想必就能明白。

如果你测试的时候发现图表显示不出来那多半问题是路径没有配置对。

echarts的部署和使用的更多相关文章

  1. ECharts本地部署

      将下载的包解压,再将包内文件copy到C:\inetpub\wwwroot下 在html中做如下引用: <script type="text/javascript" sr ...

  2. 使用echarts开发电子屏数据展示页面

    背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...

  3. 子沐代码段——Flask+Mysql+Echarts可视化

    前言 子沐不久前,使用Scrapy爬取了智联招聘的职位数据,并部署到服务器上,设置了定时任务.数据量日益庞大.子沐在想,数据不过只是存在数据库里,并没有什么意义,所以子沐萌发一个想法,那就是做一个可视 ...

  4. ECharts组件应用样例代码

    一.从Echarts官网上下载最新版本组件 Echarts是百度开发的开源Web图表组件,界面美观,使用简单.组件下载地址:http://echarts.baidu.com/echarts2/doc/ ...

  5. Nginx+uwsgi+Django 的web应用环境部署-完整记录

    Python作为当前最火爆最热门,也是最主要的Web开发语言之一,在其二十多年的历史中出现了数十种Web框架,比如Django.Tornado.Flask.Twisted.Bottle和Web.py等 ...

  6. echarts初探：了解模块化

    什么是echarts?这是官网:http://echarts.baidu.com/ 简单的说就是百度提供的一些画图表的库,用它你可以简便的画出一些你想要的图表效果. 虽然蛮好用的,但对于不知道模块化的 ...

  7. 流量分析系统----讲解-echarts模拟迁移(结合china.js)

    百度 Echarts 地图->模拟迁徙,实现自动切换地图 小航哥注释: 1.本文主要是把模拟迁移的流程讲了一遍,讲的很好.具体实现参考航哥这篇随笔“流量分析系统----实现-echarts模拟迁 ...

  8. Echarts 异步数据加载遇到的问题

    看了Echarts官网异步加载数据的Demo var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 ...

  9. ELK6.3.2+filebeat部署过程

    ELK安装部署 elk作为公司的日志收集检索的方案的首选,是必要的工具,下面介绍一下elk的安装部署方法,以及一些报错的解决方法:(使用的是ubuntu16.04,jdk使用1.8,ELK的版本为6. ...

随机推荐

  1. SQLCODE=-668, SQLSTATE=57016, SQLERRMC=7

    当前表出于 装入暂挂状态,使用重组命令(reorg) 不起作用,报SQL-104, 然后从网上百度了大量解除 DB2暂挂的命令均不好使,最后采用了对表的runstats单个优化,也是类似reorg的单 ...

  2. 029 hibernate抓取策略

    实例A引用实例B,B如果是代理的话(比如多对一关联中):如果遍历A的查询结果集(假设有10条记录),在遍历A的时候,访问B变量,将会导致n次查询语句的发出!这个时候,如果在B一端的class上配置ba ...

  3. Virtualbox让kali虚拟机共享主机的无线网络连接

    今天在测试虚拟机下安装kali系统时,遇到一个问题,默认安装完kali系统后,虚拟机不能上网.虚拟机网络配置使用的是默认的网络地址转换(NAT)选项. 网上查了很多,都说使用NAT模式时虚拟机不用做任 ...

  4. .net Core1.0 邮件发送

    今天一天早,公司需要将之前的.net Core项目增加一个预处理机制,就是当程序出现异常后给我们的开发人员发送邮件,因为今天写些关于.netCore上发送邮件. 根据查阅资料发现在目前的Core1.0 ...

  5. HttpClien Get&Post

    新公司上班第二周,开始进军.Net Core,这方面的东西比较新,所以已经封装好的东西比较少,比如HttpClien之类的开源类库,找了NuGet好久,没有找到,所以先写个简陋的来用着先. 引用: u ...

  6. a标签实现文件下载

    如果想通过纯前端技术实现文件下载,直接把a标签的href属性设置为文件路径即可,如下: <a href="https://cdn.shopify.com/s/files/1/1545/ ...

  7. JS中的函数传参

    前言: 函数分为有参有返回值,有参无返回值,无参无返回值,无参有返回值:那么对于无参数的函数你想使用函数的调用怎么办呢?如果你想封装一个代码,实现多种功能,但是形参大于实参或者实参大于形参又该如何?本 ...

  8. mysql之 mysql 5.6不停机主从搭建（一主一从基于GTID复制）

    环境说明:版本 version 5.6.25-log 主库ip: 10.219.24.25从库ip:10.219.24.22os 版本: centos 6.7已安装热备软件:xtrabackup 防火 ...

  9. Javascript中的数组去重-indexof方法

    在Javascript中,有时我们会用到数组去重.我在这里给大家介绍一下本人认为最简单实用的一种方法-indexOf()去重. var arr = [1,1,1,2,2,2,3,3,4,5,6,2,1 ...

  10. grunt中常见的插件

    /** * 需要用到的文件夹有 js(src) css image html */ gulp是一种自动化构建工具,可以增强我们的工作流程,他是基于 Node.js 构建的,与gruntjs相比,gul ...