小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

echarts .NET類庫開源

 ThinkTank_引擎 2016-03-26

前言：

　　２０１２年從長沙跑到深圳，２０１６年又從深圳回到長沙，兜兜轉(zhuǎn)轉(zhuǎn)一圈，又回到了原點．４年在深圳就呆了一家公司，回長沙也是因為深圳公司無力為繼，長沙股東老板挽留，想想自己年紀也不小了．就回來了，在長沙工作幾月，也沒什么太多的不適應．不用趕著項目上線，不用加班，想想其實也不錯.　

　　從１２年在長沙就想寫點開源的東西，不過實在不敢獻丑．這次機緣巧合，有個朋友一個項目需要用到大量報表，我找到百度的開源echarts項目（感謝開源，４年工作以來用到很多很好的開源項目，對工作助力頗多），看著就挺舒服的，又看到了＠abel533寫的java類庫，萌生了想寫一個.net類庫的想法．項目后來沒做下去了，但是echart類庫倒是堅持寫下來了．斷斷續(xù)續(xù)幾個月的時間，終于有點樣子了．之所以寫這篇博客，是因為最近在園子里看到很多看衰.net的文章，我無法判斷對錯,也不想引起爭論,不過我只是簡單喜歡編程的人,能夠做自己喜歡的事就好,其實好的環(huán)境需要大家一起營造，我也想為.net陣營做一些有意義的事情．

 

源碼：

源碼地址：https://github.com/idoku/EChartsSDK

示例地址：http://echarts./

echart地址：http://echarts.baidu.com/

 

先放幾張eharts的圖感受一下：

　　　　　　　　　　　　　　　　　　　　　　折線圖

　　　　　　　　　　　　　　　　　　柱狀圖

　　　　　　　　　　　　　　　　散點圖

 

　　　　　　　　　　　　餅圖

 

正文

ECharts .Net類庫

當前版本1.0.1

Echarts

本項目是一個供.NET開發(fā)者使用的ECharts的開發(fā)包,主要目的是方便在.NET中構件Echarts中可能用的全部數(shù)據(jù)結構,完整的Option結構. ChartOption中的數(shù)據(jù)Series,包含Line-折線圖,Bar-柱狀圖,Pie-餅圖,Scatter-散點圖等,支持Echarts中所有圖表.支持所有Style類,如AreaStyle,ItemStyle,LineStyle等.支持多種Data數(shù)據(jù)類型,一個通用的Data數(shù)據(jù),以及PieData,PolarData,TreeData等個性化數(shù)據(jù)結構.

你可以使用本項目直接構件一個Option對象,使用方法JsonTools.ObjectToJson2(option),(直接使用Json方式返回存在問題,因為function不是標準化的json格式,轉(zhuǎn)換會報錯).

 

圖表類型

  • Line - 折線（面積）圖
  • Bar - 柱狀（條形）圖
  • Scatter - 散點（氣泡）圖
  • K - K線圖
  • Pie - 餅（圓環(huán)）圖
  • Radar - 雷達（面積）圖
  • Chord - 和弦圖
  • Force - 力導向布局圖
  • Map - 地圖
  • Gauge - 儀表盤
  • Funnel - 漏斗圖
  • Heatmap - 熱力圖
  • EventRiver - 事件河流圖
  • Venn - 韋恩圖
  • Tree - 樹圖
  • Treemap - 矩形樹圖
  • WordCloud - 詞云

Echarts組件

  • Axis - 坐標軸
  • Grid - 網(wǎng)格
  • Title - 標題
  • Tooltip - 提示
  • Legend - 圖例
  • DataZoom - 數(shù)據(jù)區(qū)域縮放
  • DataRange - 值域漫游
  • Toolbox - 工具箱
  • Timeline - 時間線

 

ChartOption說明

  1. ChartOption 是echarts的主要類.
  2. 使用JsonTools.ObjectToJson2方法返回給前端時,需要使用eval('(' + data + ')')轉(zhuǎn)換為JSON結構.

 

Function說明

由于json標準中不包含function類型,一般json庫都不支持這種類型,處理這種類型最簡單的方式是轉(zhuǎn)換json字符串時,對字符串進行處理.

讀者可以自行使用其他自定義方式實現(xiàn),本項目使用的.net自帶的JRaw()方式.不管是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"formatter": function(params) {
        // for text color
        var color = colorList[params[0].dataIndex];
        var res = '<div style="color:' + color + '">';
        res += '<strong>' + params[0].name + '消費（元）</strong>'
        for (var i = 0, l = params.length; i < l; i++) {
            res += '<br/>' + params[i].seriesName + ' : ' + params[i].value
        }
        res += '</div>';
        return res;
        },

　　

和

復制代碼
"color": (function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'green'],[1, 'yellow']]
                        )
                    })(),
復制代碼

 

都可以利用JRaw來實現(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
option.ToolTip().Trigger(TriggerType.axis)
                .BackgroundColor("rgba(255,255,255,0.7)")
                .Formatter(new JRaw(@"function(params) {
            // for text color
            var color = colorList[params[0].dataIndex];
            var res = '<div style=""color:' + color + '"">';
            res += '<strong>' + params[0].name + '消費（元）</strong>'
            for (var i = 0, l = params.length; i < l; i++) {
                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value
            }
            res += '</div>';
            return res;
            }"))
  
            style.Emphasis().BarBorderColor("green").BarBorderWidth(5)
                .Color(new JRaw(@"(function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'red'],[1, 'orange']]
                        )
                    })()"))

　　

                                                          

EchartsWeb

本項目通過ASP.NET MVC和ASP.NET web api模擬了echarts官網(wǎng)網(wǎng)站中的全部示例,主要目的是方便大家參考使用和調(diào)整結構.

地址:http://echarts./

 

1.簡單Line示例

演示地址: http://echarts./home/example?api=line1

 

例子中給出的json結構.

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
{
  "calculable": true,
  "title": {
    "text": "未來一周天氣變化",
    "subtext": "純虛構數(shù)據(jù)",
    "show": true
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": [
      "最高溫度",
      "最低溫度"
    ]
  },
  "xAxis": [
    {
      "data": [
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日"
      ],
      "boundaryGap": false,
      "type": "category"
    }
  ],
  "yAxis": [
    {
      "type": "value",
      "axisLabel": {
        "formatter": "{value} ℃"
      }
    }
  ],
  "series": [
    {
      "data": [
        13,
        10,
        12,
        10,
        13,
        13,
        14
      ],
      "type": "line",
      "name": "最高溫度",
      "markPoint": {
        "data": [
          {
            "name": "最大值",
            "type": "max"
          },
          {
            "name": "最小值",
            "type": "min"
          }
        ]
      },
      "markLine": {
        "data": [
          {
            "name": "平均值",
            "type": "average"
          }
        ]
      }
    },
    {
      "data": [
        3,
        -1,
        1,
        -1,
        3,
        3,
        4
      ],
      "type": "line",
      "name": "最低溫度",
      "markPoint": {
        "data": [
          {
            "name": "周最低",
            "value": -1,
            "xAxis": 1,
            "yAxis": -0.5
          }
        ]
      },
      "markLine": {
        "data": [
          {
            "name": "平均值",
            "type": "average"
          }
        ]
      }
    }
  ]
}

　　

 

對應的源碼:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
[AcceptVerbs("GET", "POST")]
     [ActionName("line1")]
     public string StdLine()
     {
         IList<string> weeks = ChartsUtil.Weeks();
         IList<int> datas1 = ChartsUtil.Datas(7, 10, 15);
         IList<int> datas2 = ChartsUtil.Datas(7, -2, 5);
         int min = datas2.Min();
         int index = datas2.IndexOf(min);
         ChartOption option = new ChartOption();
         option.title = new Title()
         {
             show = true,
             text = "未來一周天氣變化",
             subtext = "純虛構數(shù)據(jù)"
         };
         option.tooltip = new ToolTip()
         {
             trigger = TriggerType.axis
         };
         option.legend = new Legend()
         {
             data = new List<object>(){
                "最高溫度",
                "最低溫度"
              }
         };
         option.calculable = true;
         option.xAxis = new List<Axis>()
         {
             new CategoryAxis()
             {                   
                 type = AxisType.category,                   
                 boundaryGap= false,
                 data = new List<object>(weeks)
             }
         };
         option.yAxis = new List<Axis>()
         {
             new ValueAxis()
             {
                 type = AxisType.value,
                 axisLabel = new AxisLabel(){
                  formatter=new JRaw("{value} ℃").ToString()
                 }
             }
         };
         option.series = new List<object>()
         {
                 new Line()
                 {
                     name = "最高溫度",
                     type =  ChartType.line,
                     data =  datas1,
                     markPoint =  new MarkPoint()
                     {
                             data = new List<object>()
                             {
                                 new MarkData()
                                 {
                                      name = "最大值",
                                      type= MarkType.max,                                                                                                                          
                                 },
                                 new MarkData()
                                 {
                                      name = "最小值",
                                      type= MarkType.min,
                                 }
                             }
                     },
                     markLine = new MarkLine()
                     {
                             data = new List<object>()
                             {
                                  new MarkData()
                                  {
                                       name = "平均值",
                                       type = MarkType.average
                                  }
                             }
                    }
           },
           new Line(){
             name="最低溫度",
             type = ChartType.line,
             data = datas2,
             markPoint= new MarkPoint(){
              data = new List<object>(){
                 new MarkData(){
                  name="周最低",
                  value = min,
                  xAxis = index,
                  yAxis = min+0.5,
                 }       
              }
             },
            markLine = new MarkLine(){
             data = new List<object>(){
                new MarkData(){
                 type = MarkType.average,
                 name = "平均值"
                }
             }
            }
           }
         };
         var result = JsonTools.ObjectToJson2(option);
         return result;
     }

　　

 

2.使用function的bar示例.

演示地址: http://echarts./home/example?api=bar10#              

 

給出的json代碼:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
{
  "title": {
    "text": "溫度計式圖表",
    "subtext": "Form ExcelHome",
    "sublink": ": {

　　

 

對應的源碼:

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
[AcceptVerbs("GET", "POST")]
        [ActionName("bar10")]
        public string TemperatureBar()
        {
            ChartOption option = new ChartOption();
            option.Title().Text("溫度計式圖表").Subtext("Form ExcelHome").
                Sublink(");

　　

博客總結:

　　排版真是硬傷~~~因為在項目期間,百度將echarts版本升級到了3.0,但是我已經(jīng)實現(xiàn)了一半,所以就沒有使用新的3.0來實現(xiàn).而且上面說到的項目沒有做下去,所以我是參考了@abel533的寫法,實際中使用會碰到什么問題暫時不清楚,如果有園友使用中碰到什么問題,歡迎與我交流.第一次做開源項目,歡迎大家批評指正.

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多