本文介绍一个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. K8S学习笔记之将Google的gcr.io、k8s.gcr.io 换为国内镜像

    0x00 添加docker官方的国内镜像 sudo tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": ...

  2. python的__str__()和__repr__()方法

    __str__()和__repe__()方法定义一个值通过print打印时返回时的显示样式 l=list('hello') print(l) #['h', 'e', 'l', 'l', 'o'] cl ...

  3. 本地win7ping VM linux ipv6地址问题

    前述 在windows和linux同时安装ipv6之后,系统将会自动分配一个link-local(链接本地)地址也就是ifconfig -a看到的一行[inet6 addr: fe80::20c:29 ...

  4. mint-ui之datetime-picker使用

    一基本使用<template> <mt-datetime-picker ref="picker" type="time" v-model=&q ...

  5. Python3基础 list del 从内存中删除整个列表

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

  6. java 动态代理总结

    首先:定义一个接口// 只能是一个接口 例: package DongTai; public interface dongtai { public void show(); } 接着:定义一个被代理类 ...

  7. linux基础之条件测试

    关键词: 数值测试 字符串测试 文件测试 测试命令有三种方式: test EXPRESSION [ EXPRESSION ] [[ EXPRESSION ]] 注意:EXPRESSION前后有空白字符 ...

  8. Ubuntu 18.04 休眠后无法唤醒的解决办法

    解决办法:安装laptop-mode-tools工具包. 1.检查是否安装了grep laptop-mode-tools 工具包 $ dpkg -l | grep laptop-mode-tools ...

  9. kafka丢失和重复消费数据

    Kafka作为当下流行的高并发消息中间件,大量用于数据采集,实时处理等场景,我们在享受他的高并发,高可靠时,还是不得不面对可能存在的问题,最常见的就是丢包,重发问题. 1.丢包问题:消息推送服务,每天 ...

  10. centos7重新调整分区大小

    As others have pointed out, XFS filesystem cannot be shrunk. So your best bet is to backup /home, re ...