ECharts图表的小工具

本文介绍一个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为数据名称；值为数据值；

三、示例：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <script type="text/javascript" src="/jslib/echarts/echarts3.min.js"></script>
 5 <script type="text/javascript" src="/jslib/echarts/EChart.js"></script>
 6 </head>
 7 <body>
 8 
 9 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
10 <div id="main" style="height:400px"></div>
11 
12 </body>
13 </html>
页面代码

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

 1 var myChart;
 2 $(document).ready(function(){
 3     
 4     var data=[{name:"2014年销量",values:
 5             { // yfileds[0]
 6                 "衬衫":1,
 7                 "羊毛衫":2,
 8                 "雪纺衫":3,
 9                 "裤子":4,
10                 "高跟鞋":5,
11                 "袜子":6
12             }},{name:"2015年销量",values:
13             {    // yfileds[1]
14                 "衬衫":2,
15                 "羊毛衫":3,
16                 "雪纺衫":4,
17                 "裤子":5,
18                 "高跟鞋":6,
19                 "袜子":7
20             }},{name:"2016年销量",values:
21             {    // yfileds[1]
22                 "衬衫":1,
23                 "羊毛衫":5,
24                 "雪纺衫":2,
25                 "裤子":6,
26                 "高跟鞋":7,
27                 "袜子":6
28             }}
29             ];
30     
31     // 基于准备好的dom，初始化echarts实例
32     myChart = new EChart({
33         title:"各类服装年度销量统计",
34            subTitle:"2014-2016",
35         yName:"销量",
36         xName:"服装类型",
37         containerID:"main",
38         data:data,
39         unit:"套",
40         click:function(p_params){
41             alert(p_params.name);
42         },
43         xViewRange:[0,24]
44        });
45     
46     myChart.show("bar");
47 });
js代码

效果图：

 

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

posted @ 2016-08-13 14:49  向_日_葵  阅读(3013)  评论(0)  编辑  收藏  举报