本文介绍一个echarts工具类EChart.js，用来制作统计图表,基于echarts3。

一、工具类特性如下：

  1. 包含柱状图、折线图和饼图，可以实现这三类统计图之间的切换；
  2. 支持标题和副标题；
  3. 支持图例；
  4. 支持保存为图片；
  5. 支持x轴，y轴名称；
  6. 支持tooltip，并且数据中带单位；
  7. 支持显示数据标注；
  8. 支持x轴数据缩放；

注：构建echarts脚本的时候，需要包含柱状图、饼状图、折线图、直角坐标系、标题、图例、提示框、标注、数据区域缩放、工具栏组件。

二、接口说明如下：

  1. containerID：html容器的id【string】；
  2. title：图表标题【string】；
  3. subTitle：图表子标题【string】；
  4. xName：x轴名称【string】；
  5. yName：y轴名称【string】；
  6. unit：y轴单位【string】；
  7. click：图表click事件【function】；
  8. xViewRange：x轴显示范围【[min,max]】；
  9. yViewRange：y轴显示范围【[min,max]】；
  10. data：图表数据；
  11. function：show(p_type):显示图表。p_type【string】,值为"bar","line","pie"中的一个值；

图表数据格式示例如下：

[{name:"个数",values:
        {
            "a":1,
            "b":2
        }},{name:"面积",values:
    {  
        "a":0.1,
        "b":0.2
    }}

]

说明：

  1. 数据为数组；
  2. 数据子项：

　　　　name：数据名称；

　　　　values：数据对象，其中key为数据名称；值为数据值；

三、示例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <script type="text/javascript" src="/jslib/echarts/echarts3.min.js"></script>

 <script type="text/javascript" src="/jslib/echarts/EChart.js"></script>

 </head>

 <body>

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

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

 </body>

 </html>

页面代码

页面引入echarts库echarts3.min.js和工具类EChart.js，在body中为echarts准备一个容器<div id="main"></div>

 var myChart;

 $(document).ready(function(){

     var data=[{name:"2014年销量",values:

             { // yfileds[0]

                 "衬衫":1,

                 "羊毛衫":2,

                 "雪纺衫":3,

                 "裤子":4,

                 "高跟鞋":5,

                 "袜子":6

             }},{name:"2015年销量",values:

             {    // yfileds[1]

                 "衬衫":2,

                 "羊毛衫":3,

                 "雪纺衫":4,

                 "裤子":5,

                 "高跟鞋":6,

                 "袜子":7

             }},{name:"2016年销量",values:

             {    // yfileds[1]

                 "衬衫":1,

                 "羊毛衫":5,

                 "雪纺衫":2,

                 "裤子":6,

                 "高跟鞋":7,

                 "袜子":6

             }}

             ];

     // 基于准备好的dom，初始化echarts实例

     myChart = new EChart({

         title:"各类服装年度销量统计",

            subTitle:"2014-2016",

         yName:"销量",

         xName:"服装类型",

         containerID:"main",

         data:data,

         unit:"套",

         click:function(p_params){

             alert(p_params.name);

         },

         xViewRange:[0,24]

        });

     myChart.show("bar");

 });

js代码

效果图：

代码地址：http://git.oschina.net/wander_chang/ECharts_tools

ECharts图表的小工具的更多相关文章

  1. 微信小程序在ios下Echarts图表不能滑动的解决方案

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...

  2. WPF根据Oracle数据库的表，生成CS文件小工具

    开发小工具的原因: 1.我们公司的开发是客户端用C#,服务端用Java,前后台在通讯交互的时候,会用到Oracle数据库的字段,因为服务器端有公司总经理开发的一个根据Oracle数据库的表生成的cla ...

  3. Echarts图表常用功能配置，Demo示例

    先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...

  4. 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

    站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...

  5. 转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？

    一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...

  6. [Android Memory] Android性能测试小工具Emmagee

    转载:http://blog.csdn.net/anlegor/article/details/22895993 Emmagee是网易杭州QA团队开发的用于测试指定android应用性能的小工具.该工 ...

  7. ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）

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

  8. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  9. ECharts图表——封装通用配置

    前言 前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因.或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改.五天一大改 因此 ...

随机推荐

  1. CentOS ping: unknown host 解决方法

    如果ping命令返回如下错误,那主要的可能性就是系统的DNS设置有误 [root@CentOS5 ~]# ping www.sina.com.cn ping: unknown host www.sin ...

  2. JavaScript中冒泡与事件委托

    冒泡 事件触发后事件流的三个阶段按顺序依次是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 大盒子包裹小盒子,两个盒子都分别添加点击事件,当点击小盒子,两个盒子的事件都会触发. 事件委托 下级元素委托上 ...

  3. 5.sql2008分组与嵌套

    1.Group by基本介绍;2.Having的使用;3.分组综合应用;4.子查询基本介绍;5.In/Exists/Any/Some/All;6.子查询综合应用; 1.Group by基本介绍:依据B ...

  4. Spring 学习——Aware接口

    Aware 作用 Spring中提供了一些以Aware结尾的接口,实现了Aware接口的Bean在初始化后,可以通过一些接口获取相应的资源. 通过Aware接口,可以对Spring的资源进行一些操作( ...

  5. Python3 tkinter基础 Entry insert delete 点击按钮 向输入框赋值 或 清空

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. 2199: [Usaco2011 Jan]奶牛议会 2-sat

    链接 https://www.luogu.org/problemnew/show/P3007 https://www.lydsy.com/JudgeOnline/problem.php?id=2199 ...

  7. Elasticsearch-->Get Started--> Exploring Your Data

    Exploring Your Data Sample Dataset Now that we’ve gotten a glimpse of the basics, let’s try to work ...

  8. (zhuan) 自然语言处理中的Attention Model：是什么及为什么

    自然语言处理中的Attention Model:是什么及为什么 2017-07-13 张俊林 待字闺中 要是关注深度学习在自然语言处理方面的研究进展,我相信你一定听说过Attention Model( ...

  9. $on在构造器外部添加事件(通过$emit进行外部调用)$once执行一次的事件(通过$emit进行外部调用)$off关闭事件

    $on 在构造器外部添加事件. $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法. 如果按钮在作用域外部,可以利用$emit来执行. html <div id=&quo ...

  10. Linux下使用wget下载FTP服务器文件

    wget -nH -m --ftp-user=your_username --ftp-password=your_password ftp://your_ftp_host/* 使用命令下载ftp上的文 ...