本文介绍一个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. Java线程同步与锁

    一.synchronized synchronized锁什么?锁对象.可能锁对象包括: this, 临界资源对象,Class类对象. 1,同步方法 synchronized T methodName( ...

  2. 关于使用spring mvc或者resteasy构建restful服务的差别与比较

    resteasy 是 jboss的一个开源java api for restful service(JSR 311,sun 2008年发布,最新GA版本是2.0, JAX-RS 2.0 (JSR-33 ...

  3. log4j配置目标到mongodb

    首先,具体采用什么技术作为集中式存储方案在99%的应用中应该来说并没有多大区别,最重要的是要定期清理不必要的日志,以及日志格式设计(也可以重写org.log4mongo.MongoDbPatternL ...

  4. shell实现自动部署两台tomcat项目+备份

    就做个记录吧, 其实也没啥好说的. 主机 #!/bin/bash TODAY=$(date -d 'today' +%Y-%m-%d-%S) MIP="192.168.180.24" ...

  5. Jbarcode 条形码生成工具

    一.准备jar包 https://sourceforge.net/projects/jbcode/?source=typ_redirect 二.编写工具类 package com.example.de ...

  6. HTML DOM open() 方法

    HTML DOM Window 对象 定义和用法 open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. 语法 window.open(URL,name,features,replace ...

  7. Bootstrap3基础 img-responsive 响应式图片

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. 强大的Django后台管理

    Django 后台 django的后台我们只要加少些代码,就可以实现强大的功能.与后台相关文件:每个app中的 admin.py 文件与后台相关 下面示例是做一个后台添加博客文章的例子: 新建一个 名 ...

  9. 237. 程序自动分析 【map+并查集】

    程序自动分析 描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…x1,x2,x3,…代表程序中出现的变量,给定n个形 ...

  10. yum仓库中源的配置与使用

    yum 主要功能是更方便的添加/删除/更新RPM 包,自动解决包的倚赖性问题,便于管理大量系统的更新问题. yum 可以同时配置多个资源库(Repository),简洁的配置文件(/etc/yum.c ...