EchartsCShape: ECharts - C#类库 ECharts（http://echarts.baidu.com/）是一款开源、功能强大的数据可视化产品,紧跟着大数据时代的步伐! 无意中发现的，感觉不错，就网上学习了下，发现网上有java版的后台处理类库，可惜没C#版，于是就有了我的C#版的ECharts的Option构造类库。。。

#ECharts - C#类库

ECharts - C#类库百度Echarts，数据可视化是一款开源、功能强大的数据可视化产品,紧跟着大数据时代的步伐! 无意中发现的，感觉不错，就网上学习了下，发现网上有java版的后台处理类库，可惜没C#版，于是就有了。。。我的C#版的ECharts的Option构造类库。项目是我根据开源项目java版（版本2.2.0.2）编写移植的。。。一个供C#开发使用的ECharts的开发包，主要目的是方便在C#中构造ECharts中可能用到的全部数据结构，如完整的结构Option。

----------分割线---------- Option中的数据Series，包含Bar-柱状图，Line-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的所有图表。支持所有的Style类，如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支持多种Data数据类型，一个通用的Data数据，以及PieData,MapData,ScatterData,KData等针对性的数据结构。你可以使用本项目直接构造一个Option对象，转换为JSON后直接用js设置myChart.setOption(option)，或者你也可以在前端构造基本的Option对象，然后使用本项目来构造其中需要的任意某部分的数据，如使用Series支持的图表类型创建Series数据。

为了便于使用对应版本的ECcharts，本项目的版本号会使用和ECharts相同的版本号。

##Option说明

Option正式代码中使用，不需要任何依赖。
Option类重写了toString()方法,序列化:(Option类实例).ToString()...,支持两种function形式
Json序列化引用了Newtonsoft.Json

##function说明

两种function形式:

{
    formatter:function(value){
        return value.substring(0,8);
    }
}

//和

{
    formatter:(function(){
        return 'Temperature : <br/>{b}km : {c}°C';
    })()
}

序列化,处理字符串中的function和(function(){})()，除{}中的代码外，其他地方不允许有空格

##文档可以参考java版地址

http://git.oschina.net/free/ECharts/wikis/Home

##项目支持

###图表类型

Line - 折线（面积）图
Bar - 柱状（条形）图
Scatter - 散点（气泡）图
K - K线图
Pie - 饼（圆环）图
Radar - 雷达（面积）图
Chord - 和弦图
Force - 力导向布局图
Map - 地图
Gauge - 仪表盘
Funnel - 漏斗图
Island - 孤岛图（官方未提供，这里只有数据Island对象）

###ECharts组件

Axis - 坐标轴
Grid - 网格
Title - 标题
Tooltip - 提示
Legend - 图例
DataZoom - 数据区域缩放
DataRange - 值域漫游
Toolbox - 工具箱
Timeline - 时间线

##ECharts网址

http://echarts.baidu.com/

###例子，简单的柱状图 C#版

 Option option = new Option();
            option.Title("ECharts2 vs ECharts1", "Chrome下测试数据");
            option.Tooltip(Trigger.axis);
            option.Legend(
                "ECharts1 - 2k数据", "ECharts1 - 2w数据", "ECharts1 - 20w数据", "",
                "ECharts2 - 2k数据", "ECharts2 - 2w数据", "ECharts2 - 20w数据");
            option.Toolbox().show(true)
                .feature(
                    Tool.mark, Tool.dataView,
                    new MagicType(Magic.line, Magic.bar),
                    Tool.restore, Tool.saveAsImage);
            option.Calculable(true);
            option.Grid().y(70).y2(30).x2(20);
            option.XAxis(
                new CategoryAxis().data("Line", "Bar", "Scatter", "K", "Map"),
                new CategoryAxis()
                    .axisLine(new AxisLine().show(false))
                    .axisTick(new AxisTick().show(false))
                    .axisLabel(new AxisLabel().show(false))
                    .splitArea(new SplitArea().show(false))
                    .axisLine(new AxisLine().show(false))
                    .data("Line", "Bar", "Scatter", "K", "Map")
                );
            option.YAxis(new ValueAxis().axisLabel(new AxisLabel().formatter("{value} ms")));

            Bar b1 = new Bar("ECharts2 - 2k数据");
            b1.itemStyle().normal().color("rgba(193,35,43,1)").label().show(true);
            b1.data(40, 155, 95, 75, 0);

            Bar b2 = new Bar("ECharts2 - 2w数据");
            b2.itemStyle().normal().color("rgba(181,195,52,1)").label().show(true).textStyle().color("#27727B");
            b2.data(100, 200, 105, 100, 156);

            Bar b3 = new Bar("ECharts2 - 20w数据");
            b3.itemStyle().normal().color("rgba(252,206,16,1)").label().show(true).textStyle().color("#E87C25");
            b3.data(906, 911, 908, 778, 0);

            Bar b4 = new Bar("ECharts1 - 2k数据");
            b4.itemStyle()
                .normal()
                .color("rgba(193,35,43,0.5)")
                .label()
                .show(true)
                .formatter("function(a,b,c){return c>0 ? (c +'\n'):'';}");
            b4.data(96, 224, 164, 124, 0).xAxisIndex(1);

            Bar b5 = new Bar("ECharts1 - 2w数据");
            b5.itemStyle().normal().color("rgba(181,195,52,0.5)").label().show(true);
            b5.data(491, 2035, 389, 955, 347).xAxisIndex(1);

            Bar b6 = new Bar("ECharts1 - 20w数据");
            b6.itemStyle()
                .normal()
                .color("rgba(252,206,16,0.5)")
                .label()
                .show(true)
                .formatter("function(a,b,c){return c>0 ? (c +'+'):'';}");
            b6.data(3000, 3000, 2817, 3000, 0, 1242).xAxisIndex(1);

            option.Series(b1, b2, b3, b4, b5, b6);
            
           return option.ToString();

代码生成的json结果：

{
    "grid": {
        "x2": 20,
        "y2": 30,
        "y": 70
    },
    "legend": {
        "data": [
            "ECharts1 - 2k数据",
            "ECharts1 - 2w数据",
            "ECharts1 - 20w数据",
            "",
            "ECharts2 - 2k数据",
            "ECharts2 - 2w数据",
            "ECharts2 - 20w数据"
        ],
        "orient": "horizontal"
    },
    "title": {
        "text": "ECharts2 vs ECharts1",
        "subtext": "Chrome下测试数据",
        "textAlign": "center"
    },
    "toolbox": {
        "feature": {
            "mark": {
                "show": true,
                "title": {
                    "mark": "辅助线开关",
                    "markUndo": "删除辅助线",
                    "markClear": "清空辅助线"
                },
                "lineStyle": {
                    "color": "#1e90ff",
                    "type": "dashed",
                    "width": 2
                }
            },
            "dataView": {
                "show": true,
                "title": "数据视图",
                "readOnly": false,
                "lang": [
                    "数据视图",
                    "关闭",
                    "刷新"
                ]
            },
            "magicType": {
                "show": true,
                "title": {
                    "line": "折线图切换",
                    "bar": "柱形图切换",
                    "stack": "堆积",
                    "tiled": "平铺"
                },
                "type": [
                    "line",
                    "bar"
                ]
            },
            "restore": {
                "show": true,
                "title": "还原"
            },
            "saveAsImage": {
                "show": true,
                "title": "保存为图片",
                "type": "png",
                "lang": [
                    "点击保存"
                ]
            }
        },
        "orient": "horizontal",
        "show": true
    },
    "tooltip": {
        "trigger": "axis"
    },
    "calculable": true,
    "series": [
        {
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": true
                    },
                    "color": "rgba(193,35,43,1)"
                }
            },
            "name": "ECharts2 - 2k数据",
            "type": "bar",
            "data": [
                40,
                155,
                95,
                75,
                0
            ]
        },
        {
            "itemStyle": {
                "normal": {
                    "label": {
                        "textStyle": {
                            "color": "#27727B",
                            "align": "center",
                            "fontStyle": "normal"
                        },
                        "show": true
                    },
                    "color": "rgba(181,195,52,1)"
                }
            },
            "name": "ECharts2 - 2w数据",
            "type": "bar",
            "data": [
                100,
                200,
                105,
                100,
                156
            ]
        },
        {
            "itemStyle": {
                "normal": {
                    "label": {
                        "textStyle": {
                            "color": "#E87C25",
                            "align": "center",
                            "fontStyle": "normal"
                        },
                        "show": true
                    },
                    "color": "rgba(252,206,16,1)"
                }
            },
            "name": "ECharts2 - 20w数据",
            "type": "bar",
            "data": [
                906,
                911,
                908,
                778,
                0
            ]
        },
        {
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": true,
                        "formatter": function(a, b,c){
                            returnc>0?(c+'\n'): '';
                        }
                    },
                    "color": "rgba(193,35,43,0.5)"
                }
            },
            "name": "ECharts1 - 2k数据",
            "type": "bar",
            "data": [
                96,
                224,
                164,
                124,
                0
            ]
        },
        {
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": true
                    },
                    "color": "rgba(181,195,52,0.5)"
                }
            },
            "name": "ECharts1 - 2w数据",
            "type": "bar",
            "data": [
                491,
                2035,
                389,
                955,
                347
            ]
        },
        {
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": true,
                        "formatter": function(a,b,c){
                            returnc>0?(c+'+'): '';
                        }
                    },
                    "color": "rgba(252,206,16,0.5)"
                }
            },
            "name": "ECharts1 - 20w数据",
            "type": "bar",
            "data": [
                3000,
                3000,
                2817,
                3000,
                0,
                1242
            ]
        }
    ],
    "yAxis": [
        {
            "axisLabel": {
                "formatter": "{value} ms"
            },
            "nameLocation": "start",
            "type": "value"
        }
    ],
    "xAxis": [
        {
            "nameLocation": "start",
            "type": "category",
            "data": [
                "Line",
                "Bar",
                "Scatter",
                "K",
                "Map"
            ]
        },
        {
            "axisLabel": {
                "show": false
            },
            "axisLine": {
                "show": false
            },
            "axisTick": {
                "show": false
            },
            "nameLocation": "start",
            "splitArea": {
                "show": false
            },
            "type": "category",
            "data": [
                "Line",
                "Bar",
                "Scatter",
                "K",
                "Map"
            ]
        }
    ]
}

查看测试可把生产的json字符串复制到http://echarts.baidu.com/doc/example/bar1.html,替换`option`对象,点击`刷新`按钮就可看效果

cyj123 / EchartsCShape

简介

发行版

贡献者

近期动态

cyj123 / EchartsCShape .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

cyj123 / EchartsCShape