现在位置首页 / 项目实战 /正文

echarts .NET开源类库说明

作者: IT小兵 | 2016年4月13日| 热度:℃ | 评论: |参与:

关于echarts的教程,本站已经介绍了很多了,可以看下面的参考。echarts是基于js的开源插件,本文分享一下echarts .NET开源类库。主要是将echarts js中的数据对象,移植到了.net里面,方便我们在后台组织数据。


源码:

源码地址:https://github.com/idoku/EChartsSDK

示例地址:http://echarts.idoku.cn/

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

 

先放几张eharts的图感受一下:

                      折线图

                  柱状图

                散点图

 

            饼图

 

正文

ECharts .Net类库

当前版本1.0.1

Echarts

本项目是一个供.NET开发者使用的ECharts的开发包,主要目的是方便在.NET中构件Echarts中可能用的全部数据结构,完整的Option结构. ChartOption中的数据Series,包含Line-折线图,Bar-柱状图,Pie-饼图,Scatter-散点图等,支持Echarts中所有图表.支持所有Style类,如AreaStyle,ItemStyle,LineStyle等.支持多种Data数据类型,一个通用的Data数据,以及PieData,PolarData,TreeData等个性化数据结构.

你可以使用本项目直接构件一个Option对象,使用方法JsonTools.ObjectToJson2(option),(直接使用Json方式返回存在问题,因为function不是标准化的json格式,转换会报错).

 

图表类型

  • Line - 折线(面积)图

  • Bar - 柱状(条形)图

  • Scatter - 散点(气泡)图

  • K - K线图

  • Pie - 饼(圆环)图

  • Radar - 雷达(面积)图

  • Chord - 和弦图

  • Force - 力导向布局图

  • Map - 地图

  • Gauge - 仪表盘

  • Funnel - 漏斗图

  • Heatmap - 热力图

  • EventRiver - 事件河流图

  • Venn - 韦恩图

  • Tree - 树图

  • Treemap - 矩形树图

  • WordCloud - 词云

Echarts组件

  • Axis - 坐标轴

  • Grid - 网格

  • Title - 标题

  • Tooltip - 提示

  • Legend - 图例

  • DataZoom - 数据区域缩放

  • DataRange - 值域漫游

  • Toolbox - 工具箱

  • Timeline - 时间线

 

ChartOption说明

  1. ChartOption 是echarts的主要类.

  2. 使用JsonTools.ObjectToJson2方法返回给前端时,需要使用eval('(' + data + ')')转换为JSON结构.

 

Function说明

由于json标准中不包含function类型,一般json库都不支持这种类型,处理这种类型最简单的方式是转换json字符串时,对字符串进行处理.

读者可以自行使用其他自定义方式实现,本项目使用的.net自带的JRaw()方式.不管是:

"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来实现.

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']]
                        )
                    })()"))

下一篇介绍怎么使用echarts .net插件。



[利用c#+jquery+echarts生成统计报表(附源代码)]

[利用c#+jquery+echarts生成统计报表(附源代码)]

[修改echarts图表没有数据情况下的提示信息]

[asp.net 调用echarts显示图表控件随浏览器自适应解决方案]

[echarts简单例子]

[echarts+java/jsp实现报表统计]

[echarts mobile版饼图/柱状图/力导向图等demo及演示]

[echarts实现雷达图简单示例]

[Echarts教程--java使用demo]

[echarts2.0的部署和使用完整步骤]

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询