国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服
ECharts使用心得總結(jié)（二）

Echarts使用心得總結(jié)（二）

前言：

前一段時(shí)間一直都挺忙的，各種事，也沒(méi)來(lái)得及每周的總結(jié)，趁著晚上的一點(diǎn)時(shí)間把項(xiàng)目中用的Echart中常用的各種圖表給抽象總結(jié)了一下，趁著周末跟大家分享一下。之前寫(xiě)過(guò)一篇相關(guān)的文章，當(dāng)時(shí)主要是講了如何引入、使用Echart，最新的Echart版本已經(jīng)發(fā)布，之前講的很多文件都可以刪除了，下邊會(huì)一一給大家細(xì)講。

為了更好的講解如何使用這個(gè)圖形渲染插件，我會(huì)通過(guò)創(chuàng)建一個(gè)解決方案的形式一點(diǎn)點(diǎn)給大家講解清楚。

1.  EChart最新的文檔目錄。

首先創(chuàng)建一個(gè)解決方案，目錄如下：

 

之前的一篇文章中講到如果要使用Echarts還要下載相關(guān)的ZRender的渲染包，最新的版本已經(jīng)將這些合并在一起了，只需要引用圖中紅框標(biāo)注的echarts文件夾下的文件即可。各文件的作用如下：

l  Echarts-map.js :主要用來(lái)渲染跟地圖相關(guān)

l  Echarts.js :基本的常規(guī)圖形相關(guān)

l  Esl.js :圖像引擎

Statics文件夾下的ECharts.js文件，為我自己抽象總結(jié)出來(lái)的用于Echarts的配置文件加載、數(shù)據(jù)處理、初始化各種圖像類(lèi)型的配置、圖像渲染的一些方法。

2.  抽象之后的Echarts。

根據(jù)Echarts官網(wǎng)的講解，我把Echarts的使用歸結(jié)為一下的幾個(gè)步驟，同時(shí)這些步驟相應(yīng)的實(shí)現(xiàn)對(duì)應(yīng)到Statics文件夾下的Echarts.js，該文件的主要代碼目錄如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Var ECharts={
ChartConfig:function(container,option){ …..},//加載Echarts配置文件
ChartDataFormate:{….},//數(shù)據(jù)格式化
ChartOptionTemplates:{….},//初始化常用的圖表類(lèi)型
Charts:{ RenderChart:function(option){….},//渲染圖表
RenderMap:function(option){…}//渲染地圖
}
}；

　　

2.1 Echarts配置文件的引入

在開(kāi)始使用時(shí)，首先需要引入Echarts 的配置文件，也就是要加載基本的圖像類(lèi)型，我們可以在每一個(gè)頁(yè)面都引入，但是這樣抽象化程度不高，重復(fù)使用率也不高，只需要有一個(gè)配置項(xiàng)在每次引用的時(shí)候加載一下即可，對(duì)應(yīng)到具體的代碼實(shí)現(xiàn)，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
ChartConfig: function (container, option) { //container:為頁(yè)面要渲染圖表的容器，option為已經(jīng)初始化好的圖表類(lèi)型的option配置
        var chart_path = "/Statics/echarts/echarts"; //配置圖表請(qǐng)求路徑
        var map_path = "/Statics/echarts/echarts-map";//配置地圖的請(qǐng)求路徑
        require.config({//引入常用的圖表類(lèi)型的配置
            paths: {
                echarts: chart_path,
                'echarts/chart/bar': chart_path,
                'echarts/chart/pie': chart_path,
                'echarts/chart/line': chart_path,
                'echarts/chart/k': chart_path,
                'echarts/chart/scatter': chart_path,
                'echarts/chart/radar': chart_path,
                'echarts/chart/chord': chart_path,
                'echarts/chart/force': chart_path,
                'echarts/chart/map': map_path
            }
        });
        this.option = { chart: {}, option: option, container: container };
        return this.option;
    }

　　

2.2 數(shù)據(jù)格式化

為了能夠更好的展現(xiàn)各種的數(shù)據(jù)，在進(jìn)行圖表的option配置之前，需要先對(duì)從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行格式化。后臺(tái)返回的數(shù)據(jù)必須是json格式的數(shù)據(jù)，且數(shù)據(jù)類(lèi)型只能為以下兩種類(lèi)型:

       Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]

       Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]

具體的代碼實(shí)現(xiàn)如下：

　　

1

　　

2.3 各種圖表類(lèi)型的配置初始化

在通過(guò)2.2步驟將從后臺(tái)獲得的數(shù)據(jù)進(jìn)行初始化之后，我們就可以進(jìn)行圖表的option的配置了，在這里我主要對(duì)常用的餅圖、柱圖（單一、分組、堆積柱圖）、折線圖（分組、堆積折線圖）、柱圖+折線（增幅）圖、中國(guó)地圖等圖進(jìn)行了配置項(xiàng)的初始化。具體實(shí)現(xiàn)如下：

　　

　　

 

2.4 圖形的渲染

在配置好圖表類(lèi)型的option之后，就可進(jìn)行圖表的渲染了，具體的代碼實(shí)現(xiàn)如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Charts: {
        RenderChart: function (option) {
            require([
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/chart/pie',
                'echarts/chart/k',
                'echarts/chart/scatter',
                'echarts/chart/radar',
                'echarts/chart/chord',
                'echarts/chart/force',
                'echarts/chart/map'
              ],
              function (ec) {
                  echarts = ec;
                  if (option.chart && option.chart.dispose)
                      option.chart.dispose();
                  option.chart = echarts.init(option.container);
                  window.onresize = option.chart.resize;
                  option.chart.setOption(option.option, true);
              });
        },
        ……..//渲染其他的圖表類(lèi)型，如：地圖
        ……..
        }

　　

3.  具體頁(yè)面的使用

經(jīng)過(guò)2步驟中的一些列的配置、處理、初始化，我們就可以具體的使用了，在每一個(gè)aspx頁(yè)面使用之前，我們首先需要在頁(yè)面的標(biāo)題引入以下的文件：

    

1
2
3
4
5
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="/Statics/echarts/esl.js" type="text/javascript"></script>
<script src="/Statics/ECharts.js" type="text/javascript"></script>

　　

引入之后就可進(jìn)行使用了，下面演示幾個(gè)常用的圖表的使用：

首頁(yè)每個(gè)aspx頁(yè)面上都有一個(gè)div用來(lái)做渲染圖表的容器，如下：

<div id="echart" style="width:100%; height:400px;"></div>

 

3.1 餅圖

3.1.1 實(shí)現(xiàn)代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
    $(
      function () {
          var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];
          var option = ECharts.ChartOptionTemplates.Pie(data);
          var container = $("#echart")[0];
          opt = ECharts.ChartConfig(container, option);
          ECharts.Charts.RenderChart(opt);
      }
    );
</script>

　　

 

3.1.2 展示效果

 

3.2 柱圖

3.2.1 實(shí)現(xiàn)代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script type="text/javascript">
    $(
      function () {
          var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];
          var option = ECharts.ChartOptionTemplates.Bar(data);
          var container = $("#echart")[0];
          opt = ECharts.ChartConfig(container, option);
          ECharts.Charts.RenderChart(opt);
      }
);
$(
      function () {
          var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];
          var option = ECharts.ChartOptionTemplates.Bars(data,'Love');
          var container = $("#echart")[0];
          opt = ECharts.ChartConfig(container, option);
          ECharts.Charts.RenderChart(opt);
  
          var option = ECharts.ChartOptionTemplates.Bars(data, 'Love', true);
          var container = $("#echart1")[0];
          opt = ECharts.ChartConfig(container, option);
          ECharts.Charts.RenderChart(opt);
      }
    );
  
</script>

　　

3.2.2展示效果

 

 

3.3 折線圖

3.3.1 實(shí)現(xiàn)代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script type="text/javascript">
        $(function () {
            var data = [
            { name: '2013-01', group: 'olive', value: 116 },
            { name: '2013-01', group: 'momo', value: 115 },
            { name: '2013-01', group: 'only', value: 222 },
            { name: '2013-01', group: 'for', value: 324 },
            { name: '2013-02', group: 'olive', value: 156 },
            { name: '2013-02', group: 'momo', value: 185 },
            { name: '2013-02', group: 'only', value: 202 },
            { name: '2013-02', group: 'for', value: 34 },
            { name: '2013-03', group: 'olive', value: 16 },
            { name: '2013-03', group: 'momo', value: 51 },
            { name: '2013-03', group: 'only', value: 22 },
            { name: '2013-03', group: 'for', value: 84 }
            ];
            var opt = HighChart.ChartOptionTemplates.Line(data, 'Love-Rate', "折線圖示例");
            var container = $("#container");
            HighChart.RenderChart(opt, container);
        });
       $(
      function () {
          var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];
          var option = ECharts.ChartOptionTemplates.Lines(data,'lines',false);
          var container = $("#echart")[0];
          opt = ECharts.ChartConfig(container, option);
          ECharts.Charts.RenderChart(opt);
  
          var option = ECharts.ChartOptionTemplates.Lines(data, 'lines', true);
          var container = $("#echart1")[0];
          opt = ECharts.ChartConfig(container, option);
          ECharts.Charts.RenderChart(opt);
      }
    );
  
    </script>

　　

3.3.2展示效果

 

 

3.4 柱圖+折線（增幅）圖

3.4.1 展示效果

 

3.5 地圖

3.5.3 展示效果

 

到這里，基本就把echart的抽象跟使用講完了，因?yàn)闀r(shí)間的關(guān)系，還有一些圖形的配置、數(shù)據(jù)處理沒(méi)有列出代碼，但是基本上實(shí)現(xiàn)都差不多。希望能給大家?guī)?lái)一些幫助和啟發(fā)。后續(xù)會(huì)繼續(xù)推出HightCharts的抽象使用，敬請(qǐng)期待。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP，閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
利用ajax，數(shù)據(jù)庫(kù)制作2級(jí)聯(lián)動(dòng)菜單
原生Js級(jí)別聯(lián)動(dòng)下拉實(shí)現(xiàn)
關(guān)于Ext.form.ComboBox的使用
二級(jí)聯(lián)動(dòng)
init.rc分析
免費(fèi)的新聞代碼大全
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服