ECharts圖表的小工具

時間 2019-12-12

標籤 echarts 圖表工具简体版

原文原文鏈接

本文介紹一個echarts工具類EChart.js，用來製做統計圖表,基於echarts3。javascript

1、工具類特性以下：html

包含柱狀圖、折線圖和餅圖，能夠實現這三類統計圖之間的切換；
支持標題和副標題；
支持圖例；
支持保存爲圖片；
支持x軸，y軸名稱；
支持tooltip，而且數據中帶單位；
支持顯示數據標註；
支持x軸數據縮放；

注：構建echarts腳本的時候，須要包含柱狀圖、餅狀圖、折線圖、直角座標系、標題、圖例、提示框、標註、數據區域縮放、工具欄組件。java

2、接口說明以下：git

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
   }}echarts

]dom

說明：ide

數據爲數組；
數據子項：

　　　　name：數據名稱；工具

　　　　values：數據對象，其中key爲數據名稱；值爲數據值；spa

3、示例：

 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。