当前位置：首页 > news >正文

ECharts图表的小工具

news 来源：原创 2024/5/18 11:50:10

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

三、示例：

 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 });