ECharts图表的小工具

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

一、工具类特性如下：

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

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

二、接口说明如下：

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

图表数据格式示例如下：

[{name:"个数",values:
        {
            "a":1,
            "b":2
        }},{name:"面积",values:
   {
        "a":0.1,
        "b":0.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图表的小工具

最新文章

热门文章