echart简介_动力节点Java学院整理

1. 插件的下载

以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要ZRender的,但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现,建议大家在下载ECharts时同时也要下载ZRender。

ECharts下载地址: http://echarts.baidu.com/

ZRender下载地址:http://ecomfe.github.io/zrender/index.html

下载之后解压各自的文件目录结构如下:

ECharts:

 ZRender:

2. 插件的引用

首先,新建一个Web应用程序,然后添加刚刚下载的文件,具体的目录结构如下:

这里有以下几点需要说明:

  • 所有的跟ECharts有关的文件全部都在echarts文件夹下
  • echarts文件夹的内容分为两部分

1) 一部分是以echarts开头的js文件,这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件,也就是1.中的图中红框标注的js下的文件。如下:

2)另一部分是一个名为zrender的文件夹,这里需要特别注意的是该文件夹的命名必须为zrender,因为在echarts的js文件中对zrender的引用都是以zrender为根目录的,zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容,如下:

3. 在页面中的具体使用

按照上边的步骤配置过之后,我们就可以在页面中引用了,这里我主要是演示地图控件的使用方式,因为地图的引用跟其他的基本图形的引用不太一样。其他的图形的呈现也会做一个简要的演示。

MapChart

首先在跟2中的echarts文件夹同一个目录(也就是Modules文件夹)下添加一个aspx页或html页,需要注意的是,如果是在aspx页中使用echarts时,需要把要渲染的div放在form标签之外,否则图形是显示不出来的。

在head标签中添加对echarts的引用如下:

<head runat="server">
  <title></title>
  <script src="echarts/esl.js" type="text/javascript"></script>
</head> 

在body标记中,form标记之外,添加一个div,用来做图表渲染的容器。如下:

<body> 

<div id="main"style="height:500px;border:1px solid #ccc;padding:10px;"></div> 

…………… 

…………… 

</body> 

在上面中添加的div标记下,添加如下的js代码段,如下:

 <script type="text/javascript"> 

    //为模块加载器配置echarts的路径,这里主要是配置map图表的路径,其他的图表跟map的配置还不太一样,下边也会做另一种类型的图表事例。
这里引用的主要是echarts文件夹下的echarts-map文件,而其他类型的图表引用的都是echarts文件夹下的echarts文件。 

    require.config({ 

      paths: { 

        echarts:'./echarts/echarts', 

        'echarts/chart/map':'./echarts/echarts-map' 

      } 

    }); 

   //动态加载echarts,在回掉函数中使用,要注意保持按需加载结构定义图表路径 

    require( 

    [ 

      'echarts', 

      'echarts/chart/map' 

    ], 

    function (ec) { 

      varmyChart=ecinit(documentgetElementById('main')); 

      //option主要是图标的一些设置,这不是这篇文章的重点,关于具体的设置可以参考官方的文档说明文档 

option= { 

        title: { 

          text:'iphone销量', 

          subtext:'纯属虚构', 

          x:'center' 

        }, 

        tooltip: { 

          trigger:'item' 

        }, 

        legend: { 

          orient:'vertical', 

          x:'left', 

          data: ['iphone3','iphone4','iphone5'] 

        }, 

        dataRange: { 

          min:0, 

          max:2500, 

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

          calculable:true, 

          textStyle: { 

            color:'orange' 

          } 

        }, 

        toolbox: { 

          show:true, 

          orient:'vertical', 

          x:'right', 

          y:'center', 

          feature: { 

            mark:true, 

            dataView: { readOnly:false }, 

            restore:true, 

            saveAsImage:true 

          } 

        }, 

        series: [ 

    { 

      name:'iphone3', 

      type:'map', 

      mapType:'china', 

      selectedMode: 'single', 

      itemStyle: { 

        normal: { label: { show:true },color:'#ffd700' },// for legend 

        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) } 

      ] 

    }, 

    { 

      name:'iphone4', 

      type:'map', 

      mapType:'china', 

      selectedMode: 'single', 

      itemStyle: { 

        normal: { label: { show:true },color:'#ff8c00' },// for legend 

        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:'iphone5', 

      type:'map', 

      mapType:'china', 

      selectedMode: 'single', 

      itemStyle: { 

        normal: { label: { show:true },color:'#da70d6' },// for legend 

        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) } 

      ] 

    }
  ]
      };
       //以下的这段代码主要是用来处理用户的选择,应用场景是可以做地图的交互,比如点击地图上的某一个省,获取相应的省的指标变化等。
       //需要特别注意的是,如果需要点击某一省作地图的操作交互的话,还需要为series属性的每一项添加一个selectedMode属性,这里的属性值为 'single'即单选,也可多选
  varecConfig= require('echarts/config');
      myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) {
        varselected=param.selected;
        varmapSeries=option.series[0];
        vardata= [];
        varlegendData= [];
        varname;
        for (varp=0,len=mapSeries.data.length; p<len; p++) {
          name=mapSeries.data[p].name;
          mapSeries.data[p].selected=selected[name];
          if (selected[name]) {
            alert(name); //这里只是简单的做一个事例说明,弹出用户所选的省,如需做其他的扩展,可以在这里边添加相应的操作  

          }
        }
      });
      myChart.setOption(option);
    }
  );
  </script>

完成以上操作之后,效果如下图所示:

LineChart

除了地图图表之外的其他的图标的使用方式都差不多。事实上其他的图表跟地图图表的区别在于对配置文件的引用。这里只做一个折线图的示例,其它的示例都是一样的。

<scripttype="text/javascript"> 

    require.config({ 

      paths: { 

        echarts:'./echarts/echarts', 

        'echarts/chart/bar':'./echarts/echarts',//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外,
其他的图形引用的配置文件都为echarts,这也是一般的图形跟地图的区别 

        'echarts/chart/line':'./echarts/echarts' 

      } 

    }); 

    require( 

    [ 

      'echarts', 

      'echarts/chart/bar', 

      'echarts/chart/line' 

    ], 

    function (ec) { 

      varmyChart=ecinit(documentgetElementById('main')); 

      option= { 

        tooltip: { 

          trigger:'axis' 

        }, 

        legend: { 

          data: ['邮件营销','联盟广告','视频广告','直接问','搜索引擎'] 

        }, 

        toolbox: { 

          show:true, 

          feature: { 

            mark:true, 

            dataView: { readOnly:false }, 

            magicType: ['line','bar'], 

            restore:true, 

            saveAsImage:true 

          } 

        }, 

        calculable:true, 

        xAxis: [ 

    { 

      type:'category', 

      boundaryGap:false, 

      data: ['周一','周二','周三','周四','周五','周六','周日'] 

    } 

  ], 

        yAxis: [ 

    { 

      type:'value', 

      splitArea: { show:true } 

    } 

  ], 

        series: [ 

    { 

      name:'邮件营销', 

      type:'line', 

      stack:'总量', 

      data: [120,132,101,134,90,230,210] 

    }, 

    { 

      name:'联盟广告', 

      type:'line', 

      stack:'总量', 

      data: [220,182,191,234,290,330,310] 

    }, 

    { 

      name:'视频广告', 

      type:'line', 

      stack:'总量', 

      data: [150,232,201,154,190,330,410] 

    }, 

    { 

      name:'直接访问', 

      type:'line', 

      stack:'总量', 

      data: [320,332,301,334,390,330,320] 

    }, 

    { 

      name:'搜索引擎', 

      type:'line', 

      stack:'总量', 

      data: [820,932,901,934,1290,1330,1320] 

    } 

  ] 

      };           

      myChart.setOption(option); 

    } 

  ); 

  </script> 

  <divid="main1"style="height:500px;border:1px solid #ccc;padding:10px;"></div>   

  <scripttype="text/javascript"> 

    require.config({ 

      paths: { 

        echarts:'./echarts/echarts', 

        'echarts/chart/bar':'./echarts/echarts', 

        'echarts/chart/line':'./echarts/echarts' 

      } 

    }); 

    require( 

    [ 

      'echarts', 

      'echarts/chart/bar', 

      'echarts/chart/line' 

    ], 

    function (ec) { 

      varmyChart=ecinit(documentgetElementById('main1')); 

      option= { 

        title: { 

          text:'未来一周气温变化', 

          subtext:'纯属虚构' 

        }, 

        tooltip: { 

          trigger:'axis' 

        }, 

        legend: { 

          data: ['最高气温'最低气温'] 

        }, 

        toolbox: { 

          show:true, 

          feature: { 

            mark:true, 

            dataView: { readOnly:false }, 

            magicType: ['line','bar'], 

            restore:true, 

            saveAsImage:true 

          } 

        }, 

        calculable:true, 

        xAxis: [ 

    { 

      type:'category', 

      boundaryGap:false, 

      data: ['周一','周二','周三','周四','周五','周六','周日'] 

    } 

  ], 

        yAxis: [ 

    { 

      type:'value', 

      axisLabel: { 

        formatter:'{value} ' 

      }, 

      splitArea: { show:true } 

    } 

  ], 

        series: [ 

    { 

      name:'最高气温', 

      type:'line', 

      itemStyle: { 

        normal: { 

          lineStyle: { 

            shadowColor:'rgba(0,0,0,4)' 

          } 

        } 

      }, 

      data: [11,11,15,13,12,13,10] 

    }, 

    { 

      name:'最低气温', 

      type:'line', 

      itemStyle: { 

        normal: { 

          lineStyle: { 

            shadowColor:'rgba(0,0,0,4)' 

          } 

        } 

      }, 

      data: [-2,1,2,5,3,2,0] 

    } 

  ] 

      };           

      myChart.setOption(option); 

    } 

  ); 

  </script> 

  <divid="main2"style="height:500px;border:1px solid #ccc;padding:10px;"></div>   

  <scripttype="text/javascript"> 

    require.config({ 

      paths: { 

        echarts:'./echarts/echarts', 

        'echarts/chart/bar':'./echarts/echarts', 

        'echarts/chart/line':'./echarts/echarts' 

      } 

    }); 

    require( 

    [ 

      'echarts', 

      'echarts/chart/bar', 

      'echarts/chart/line' 

    ], 

    function (ec) { 

      varmyChart=ec.init(document.getElementById('main2')); 

      option= { 

        title: { 

          text:'某楼盘销售情况', 

          subtext:'纯属虚构' 

        }, 

        tooltip: { 

          trigger:'axis' 

        }, 

        legend: { 

          data: ['意向','预购','成交'] 

        }, 

        toolbox: { 

          show:true, 

          feature: { 

            mark:true, 

            dataView: { readOnly:false }, 

            magicType: ['line','bar'], 

            restore:true, 

            saveAsImage:true 

          } 

        }, 

        calculable:true, 

        xAxis: [ 

    { 

      type:'category', 

      boundaryGap:false, 

      data: ['周','周二','周三','周四','周五','周六','周日'] 

    } 

  ], 

        yAxis: [ 

    { 

      type:'value' 

    } 

  ], 

        series: [ 

    { 

      name:'成交', 

      type:'line', 

      smooth:true, 

      itemStyle: { normal: { areaStyle: { type:'default'}} }, 

      data: [10,12,21,54,260,830,710] 

    }, 

    { 

      name:'预购', 

      type:'line', 

      smooth:true, 

      itemStyle: { normal: { areaStyle: { type:'default'}} }, 

      data: [30,182,434,791,390,30,10] 

    }, 

    { 

      name:'意向', 

      type:'line', 

      smooth:true, 

      itemStyle: { normal: { areaStyle: { type:'default'}} }, 

      data: [1320,1132,601,234,120,90,20] 

    } 

  ] 

      };           

      myChart.setOption(option); 

    } 

  ); 

  </script>

完成以上操作之后效果图如下:

(0)

相关推荐

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示      源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方

  • echarts3 使用总结(绘制各种图表,地图)

    由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正 一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生

  • jsp使用ECharts动态在地图上标识点

    ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的. 首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标. 地图类型的图表需要关注的元素 title:标题,显示这个地图所表示的名称 title: { text: '清大云

  • echart简介_动力节点Java学院整理

    1. 插件的下载 以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要ZRender的,但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的.为了避免不要的问题出现,建议大家在下载ECharts时同时也要下载ZRender. ECharts下载地址: http://echarts.baidu.com/ ZRender下载地址:http://ecomfe.github.io/zrender/index.htm

  • Nginx简介_动力节点Java学院整理

    1.什么是Nginx Nginx来自俄罗斯的Igor Sysoev在为Rambler Media(http://www.rambler.ru/)工作期间,使用C语言开发了Nginx.Nginx作为Web服务器,一直为俄罗斯著名的门户网站Rambler Media提供着出色.稳定的服务. Igor Sysoev将Nginx的代码开源,并且赋予其最自由的2-clause BSD-like license许可证.由于Nginx使用基于事件驱动的架构能够并发处理百万级别的TCP连接,高度模块化的设计和自

  • Java Map简介_动力节点Java学院整理

    Map简介 将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值.此接口取代 Dictionary 类,后者完全是一个抽象类,而不是一个接口. Map 接口提供三种collection 视图,允许以键集.值集或键-值映射关系集的形式查看某个映射的内容.映射顺序 定义为迭代器在映射的 collection 视图上返回其元素的顺序.某些映射实现可明确保证其顺序,如 TreeMap 类:另一些映射实现则不保证顺序,如HashMap 类. 注:将可变对象用作映射键时必须格外小心.当对

  • Java中Object toString方法简介_动力节点Java学院整理

    一.Object类介绍  Object类在Java里面是一个比较特殊的类,JAVA只支持单继承,子类只能从一个父类来继承,如果父类又是从另外一个父类继承过来,那他也只能有一个父类,父类再有父类,那也只能有一个,JAVA为了组织这个类组织得比较方便,它提供了一个最根上的类,相当于所有的类都是从这个类继承,这个类就叫Object.所以Object类是所有JAVA类的根基类,是所有JAVA类的老祖宗.所有的类,不管是谁,都是从它继承下来的. 二.toString方法介绍  一个字符串和另外一种类型连接

  • Java Set简介_动力节点Java学院整理

    1. 概述   Java 中的Set和正好和数学上直观的集(set)的概念是相同的.Set最大的特性就是不允许在其中存放的元素是重复的.根据这个特点,我们就可以使用Set 这个接口来实现前面提到的关于商品种类的存储需求.Set 可以被用来过滤在其他集合中存放的元素,从而得到一个没有包含重复新的集合. 2. 常用方法 按照定义,Set 接口继承 Collection 接口,而且它不允许集合中存在重复项.所有原始方法都是现成的,没有引入新方法.具体的 Set 实现类依赖添加的对象的 equals()

  • RandomAccessFile简介_动力节点Java学院整理

    RandomAccessFile RandomAccessFile 是随机访问文件(包括读/写)的类.它支持对文件随机访问的读取和写入,即我们可以从指定的位置读取/写入文件数据. 需要注意的是,RandomAccessFile 虽然属于java.io包,但它不是InputStream或者OutputStream的子类:它也不同于FileInputStream和FileOutputStream. FileInputStream 只能对文件进行读操作,而FileOutputStream 只能对文件进

  • Java字符编码简介_动力节点Java学院整理

    1. 概述 本文主要包括以下几个方面:编码基本知识,Java,系统软件,url,工具软件等. 在下面的描述中,将以"中文"两个字为例,经查表可以知道其GB2312编码是"d6d0 cec4",Unicode编码为"4e2d 6587",UTF编码就是"e4b8ad e69687".注意,这两个字没有iso8859-1编码,但可以用iso8859-1编码来"表示". 2. 编码基本知识 最早的编码是iso88

  • Java7之forkjoin简介_动力节点Java学院整理

    Java7引入了Fork Join的概念,来更好的支持并行运算.顾名思义,Fork Join类似与流程语言的分支,合并的概念.也就是说Java7 SE原生支持了在一个主线程中开辟多个分支线程,并且根据分支线程的逻辑来等待(或者不等待)汇集,当然你也可以fork的某一个分支线程中再开辟Fork Join,这也就可以实现Fork Join的嵌套. 有两个核心类ForkJoinPool和ForkJoinTask. ForkJoinPool实现了ExecutorService接口,起到线程池的作用.所以

  • Java List简介_动力节点Java学院整理

    Java中可变数组的原理就是不断的创建新的数组,将原数组加到新的数组中,下文对Java List用法做了详解.  List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3,角标2上也可以有个3)因为该集合体系有索引  ArrayList:底层的数据结构使用的是数组结构(数组长度是可变的百分之五十延长)(特点是查询很快,但增删较慢)线程不同步  LinkedList:底层的数据结构是链表结构(特点是查询较慢,增删较快)  Vector:底层是数组数据结构 线

  • jQuery Autocomplete简介_动力节点Java学院整理

    jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大.最灵活的Autocomplete,它支持本地的Array/JSON数组.通过ajax请求的Array/JSON数组.JSONP.以及Function(最灵活)等方式来获取数据. 支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ["bjpowernode","动力节点"

随机推荐