├── pack.bat ├── nuget.exe ├── Magicodes.ECharts.Demo ├── Views │ ├── _ViewStart.cshtml │ ├── Shared │ │ ├── Error.cshtml │ │ └── _Layout.cshtml │ ├── Home │ │ ├── ChartDemo.cshtml │ │ └── Index.cshtml │ └── Web.config ├── favicon.ico ├── Global.asax ├── Scripts │ ├── _references.js │ ├── plugins │ │ └── echart │ │ │ └── theme │ │ │ ├── vintage.js │ │ │ ├── roma.js │ │ │ ├── dark.js │ │ │ ├── shine.js │ │ │ ├── macarons.js │ │ │ └── infographic.js │ ├── components │ │ └── magicodes.echart.js │ ├── respond.min.js │ ├── respond.matchmedia.addListener.min.js │ ├── jquery.validate.unobtrusive.min.js │ ├── respond.js │ └── respond.matchmedia.addListener.js ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── App_Start │ ├── FilterConfig.cs │ ├── RouteConfig.cs │ └── BundleConfig.cs ├── Content │ └── Site.css ├── Global.asax.cs ├── Controllers │ └── HomeController.cs ├── Properties │ └── AssemblyInfo.cs ├── Web.Debug.config ├── Web.Release.config ├── packages.config ├── Web.config └── Project_Readme.html ├── Magicodes.ECharts使用教程.docx ├── pack.Magicodes.ECharts.bat ├── Magicodes.ECharts ├── ValueTypes │ ├── ITopValue.cs │ ├── ILeftValue.cs │ ├── IRightValue.cs │ ├── IBottomValue.cs │ ├── ISymbolValue.cs │ ├── INumberOrStringValue.cs │ ├── INumberOrArrayNumberValue.cs │ ├── ArrayNumberValue.cs │ ├── IValue.cs │ ├── DoubleValue.cs │ ├── StringValue.cs │ ├── AlignValue.cs │ ├── SymbolValue.cs │ ├── NumberValue.cs │ └── VerticalAlignValue.cs ├── packages.config ├── Axis │ ├── LineStyleTypes.cs │ ├── LineStyle.cs │ ├── AxisLine.cs │ ├── XAxisPosition.cs │ ├── NameLocations.cs │ ├── YAxisPosition.cs │ ├── AxisTypes.cs │ ├── YAxis.cs │ └── XAxis.cs ├── CommonDefinitions │ ├── Orients.cs │ ├── Align.cs │ ├── TextStyles.cs │ ├── TextAlign.cs │ ├── VerticalAlign.cs │ ├── Symbols.cs │ ├── Label.cs │ └── ToolBoxFeature.cs ├── Components │ ├── TimeLine │ │ ├── TimeLineTypes.cs │ │ ├── ControlPositions.cs │ │ └── TimeLine.cs │ ├── ToolTip │ │ ├── TooltipTriggerEvents.cs │ │ ├── TooltipTriggerTypes.cs │ │ └── Tooltip.cs │ ├── Legend │ │ ├── LegendData.cs │ │ └── Legend.cs │ ├── ToolBox │ │ └── ToolBox.cs │ ├── Title │ │ └── Title.cs │ ├── Grid │ │ └── Grid.cs │ └── DataZoom │ │ └── DataZoom.cs ├── Series │ ├── BarSeries.cs │ ├── Mark │ │ ├── MarkPointDataTypes.cs │ │ ├── MarkData.cs │ │ ├── MarkLine.cs │ │ └── MarkPoint.cs │ ├── LineSeries.cs │ ├── SeriesTypes.cs │ └── Series.cs ├── TimelineOptions.cs ├── Properties │ └── AssemblyInfo.cs ├── JsonConverter │ └── ValueConverter.cs ├── EChartsOptions.cs └── Magicodes.ECharts.csproj ├── pack.Magicodes.ECharts.Mvc.bat ├── Magicodes.ECharts.Mvc ├── packages.config ├── MvcExtension.cs ├── Properties │ └── AssemblyInfo.cs ├── Results │ └── JavaScriptJsonResult.cs └── Magicodes.ECharts.Mvc.csproj ├── README.md ├── Magicodes.ECharts.sln ├── .gitattributes └── .gitignore /pack.bat: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/pack.bat -------------------------------------------------------------------------------- /nuget.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/nuget.exe -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Views/_ViewStart.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | Layout = "~/Views/Shared/_Layout.cshtml"; 3 | } 4 | -------------------------------------------------------------------------------- /Magicodes.ECharts使用教程.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts使用教程.docx -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts.Demo/favicon.ico -------------------------------------------------------------------------------- /pack.Magicodes.ECharts.bat: -------------------------------------------------------------------------------- 1 | call ./pack.bat "Magicodes.ECharts.nupkg" "Magicodes.ECharts/Magicodes.ECharts.csproj" 2 | @pause 3 | 4 | -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/ITopValue.cs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts/ValueTypes/ITopValue.cs -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Global.asax: -------------------------------------------------------------------------------- 1 | <%@ Application Codebehind="Global.asax.cs" Inherits="Magicodes.ECharts.Demo.MvcApplication" Language="C#" %> 2 | -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/ILeftValue.cs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts/ValueTypes/ILeftValue.cs -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/IRightValue.cs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts/ValueTypes/IRightValue.cs -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/_references.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts.Demo/Scripts/_references.js -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/IBottomValue.cs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts/ValueTypes/IBottomValue.cs -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/ISymbolValue.cs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts/ValueTypes/ISymbolValue.cs -------------------------------------------------------------------------------- /pack.Magicodes.ECharts.Mvc.bat: -------------------------------------------------------------------------------- 1 | call ./pack.bat "Magicodes.ECharts.Mvc.nupkg" "Magicodes.ECharts.Mvc/Magicodes.ECharts.Mvc.csproj" 2 | @pause 3 | 4 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /Magicodes.ECharts/packages.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xin-lai/Magicodes.ECharts/HEAD/Magicodes.ECharts.Demo/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/LineStyleTypes.cs: -------------------------------------------------------------------------------- 1 | namespace Magicodes.ECharts.Axis 2 | { 3 | /// 4 | /// 坐标轴线线的类型。 5 | /// 6 | public enum LineStyleTypes 7 | { 8 | solid, dashed, dotted 9 | } 10 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/INumberOrStringValue.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace Magicodes.ECharts.ValueTypes 8 | { 9 | public interface INumberOrStringValue 10 | { 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/INumberOrArrayNumberValue.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace Magicodes.ECharts.ValueTypes 8 | { 9 | public interface INumberOrArrayNumberValue 10 | { 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/App_Start/FilterConfig.cs: -------------------------------------------------------------------------------- 1 | using System.Web; 2 | using System.Web.Mvc; 3 | 4 | namespace Magicodes.ECharts.Demo 5 | { 6 | public class FilterConfig 7 | { 8 | public static void RegisterGlobalFilters(GlobalFilterCollection filters) 9 | { 10 | filters.Add(new HandleErrorAttribute()); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Views/Shared/Error.cshtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 错误 7 | 8 | 9 |
10 |

错误。

11 |

处理你的请求时出错。

12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/LineStyle.cs: -------------------------------------------------------------------------------- 1 | namespace Magicodes.ECharts.Axis 2 | { 3 | public class LineStyle 4 | { 5 | /// 6 | /// 坐标轴线线的颜色。 7 | /// 8 | public string Color { get; set; } 9 | public double? Width { get; set; } 10 | /// 11 | /// 坐标轴线线的类型。 12 | /// 13 | public LineStyleTypes Type { get; set; } 14 | } 15 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Mvc/packages.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/ArrayNumberValue.cs: -------------------------------------------------------------------------------- 1 | using Magicodes.ECharts.JsonConverter; 2 | using Newtonsoft.Json; 3 | using System; 4 | using System.Collections.Generic; 5 | using System.Linq; 6 | using System.Text; 7 | using System.Threading.Tasks; 8 | 9 | namespace Magicodes.ECharts.ValueTypes 10 | { 11 | /// 12 | /// 小数数组 13 | /// 14 | [JsonConverter(typeof(ValueConverter))] 15 | public class ArrayNumberValue : IValue, INumberOrArrayNumberValue 16 | { 17 | public double[] Value { get; set; } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Content/Site.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 50px; 3 | padding-bottom: 20px; 4 | } 5 | 6 | /* Set padding to keep content from hitting the edges */ 7 | .body-content { 8 | padding-left: 15px; 9 | padding-right: 15px; 10 | } 11 | 12 | /* Override the default bootstrap behavior where horizontal description lists 13 | will truncate terms that are too long to fit in the left column 14 | */ 15 | .dl-horizontal dt { 16 | white-space: normal; 17 | } 18 | 19 | /* Set width on the form input elements since they're 100% wide by default */ 20 | input, 21 | select, 22 | textarea { 23 | max-width: 280px; 24 | } 25 | -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/AxisLine.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace Magicodes.ECharts.Axis 8 | { 9 | public class AxisLine 10 | { 11 | /// 12 | /// 是否显示坐标轴轴线。 13 | /// 14 | public bool? Show { get; set; } 15 | /// 16 | /// X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。 17 | /// 18 | public bool? OnZero { get; set; } 19 | /// 20 | /// 坐标轴线 21 | /// 22 | public LineStyle LineStyle { get; set; } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Global.asax.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.Mvc; 6 | using System.Web.Optimization; 7 | using System.Web.Routing; 8 | 9 | namespace Magicodes.ECharts.Demo 10 | { 11 | public class MvcApplication : System.Web.HttpApplication 12 | { 13 | protected void Application_Start() 14 | { 15 | AreaRegistration.RegisterAllAreas(); 16 | FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 17 | RouteConfig.RegisterRoutes(RouteTable.Routes); 18 | BundleConfig.RegisterBundles(BundleTable.Bundles); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Magicodes.ECharts 2 | Magicodes.ECharts是心莱团队基于百度EChart封装的开源的.NET类库，以便让用户更快更便捷的上手开发EChart图表。 3 | 相关资料请访问我们的官方博客。 4 | * 使用教程：http://www.cnblogs.com/codelove/p/5969036.html 5 | * 官方博客：http://www.cnblogs.com/codelove/ 6 | * 相关开源库地址：https://github.com/xin-lai 7 | * 我们的官网：http://xin-lai.com 8 | 9 | # 在开始之前，您需要了解以下内容： 10 | * Magicodes.ECharts是基于百度EChart封装的开源的.NET类库，封装的目的便于使用强类型语言约束后台代码，以便于更好维护和重构代码，并且封装自身业务 11 | * Magicodes.EChartsJS是基于knockoutJs封装的组件，结合Magicodes.ECharts能够很方便的利用Ajax加载Echart图表 12 | * 目前Magicodes.ECharts已经支持大部分图表，但是尚不能支持所有图表和所有情形 13 | * 本着按需设计的原则，在遇到不支持的情形，希望您能够自行扩展并贡献自己的代码。众人拾材火焰高，Magicodes.ECharts在不断地实践中会更加完善的 14 | * 在设计上，我们不会过多设计，但是后续版本可能会不断地进行重构 15 | 16 | 源码中提供了一些Demo，在开始之前，请进行阅读。 17 | 18 | 19 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/App_Start/RouteConfig.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.Mvc; 6 | using System.Web.Routing; 7 | 8 | namespace Magicodes.ECharts.Demo 9 | { 10 | public class RouteConfig 11 | { 12 | public static void RegisterRoutes(RouteCollection routes) 13 | { 14 | routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 15 | 16 | routes.MapRoute( 17 | name: "Default", 18 | url: "{controller}/{action}/{id}", 19 | defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 20 | ); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Views/Home/ChartDemo.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | ViewBag.Title = "Magicodes.ECharts"; 3 | } 4 | 5 |
6 |
7 |

Demo1

8 |
9 |
10 |
11 |

Demo2

12 |
13 |
14 |
15 | @section Scripts 16 | { 17 | 22 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/IValue.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : IValue.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.ValueTypes 17 | { 18 | public interface IValue 19 | { 20 | TVlaueType Value { get; set; } 21 | } 22 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/XAxisPosition.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : XAxisPosition.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Axis 17 | { 18 | /// 19 | /// x 轴的位置。 20 | /// 21 | public enum XAxisPosition 22 | { 23 | bottom, 24 | top 25 | } 26 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/Orients.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Orients.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | /// 19 | /// 图例列表的布局朝向 20 | /// 21 | public enum Orients 22 | { 23 | horizontal, 24 | vertical 25 | } 26 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/TimeLine/TimeLineTypes.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : TimeLineTypes.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Components.TimeLine 17 | { 18 | /// 19 | /// TimeLine类型 20 | /// 21 | public enum TimeLineTypes 22 | { 23 | slider 24 | } 25 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/NameLocations.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : NameLocations.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Axis 17 | { 18 | /// 19 | /// 坐标轴名称显示位置。 20 | /// 21 | public enum NameLocations 22 | { 23 | end, 24 | start, 25 | middle 26 | } 27 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/Align.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Align.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | /// 19 | /// 水平对齐 20 | /// 21 | public enum Align 22 | { 23 | left, 24 | center, 25 | right 26 | } 27 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/TextStyles.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : TextStyles.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | /// 19 | /// 文本样式 20 | /// 21 | public class TextStyles 22 | { 23 | public string Color { get; set; } 24 | } 25 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/TextAlign.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : TextAlign.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | /// 19 | /// 标题文本水平对齐 20 | /// 21 | public enum TextAlign 22 | { 23 | left, 24 | center, 25 | right 26 | } 27 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/VerticalAlign.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : VerticalAlign.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | /// 19 | /// 垂直对齐 20 | /// 21 | public enum VerticalAlign 22 | { 23 | top, 24 | middle, 25 | bottom 26 | } 27 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Controllers/HomeController.cs: -------------------------------------------------------------------------------- 1 | using Magicodes.ECharts; 2 | using Magicodes.ECharts.Axis; 3 | using Magicodes.ECharts.Components.Title; 4 | using Magicodes.ECharts.Mvc.Results; 5 | using Magicodes.ECharts.Series; 6 | using Magicodes.ECharts.Series.Mark; 7 | using Magicodes.ECharts.ValueTypes; 8 | using Magicodes.ECharts.Mvc; 9 | using System; 10 | using System.Collections.Generic; 11 | using System.Linq; 12 | using System.Web; 13 | using System.Web.Mvc; 14 | using Magicodes.ECharts.CommonDefinitions; 15 | 16 | namespace Magicodes.ECharts.Demo.Controllers 17 | { 18 | public class HomeController : Controller 19 | { 20 | public ActionResult Index() 21 | { 22 | return View(); 23 | } 24 | 25 | public ActionResult ChartDemo() 26 | { 27 | return View(); 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/YAxisPosition.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : YAxisPosition.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Axis 17 | { 18 | /// 19 | /// y 轴的位置。默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。 20 | /// 21 | public enum YAxisPosition 22 | { 23 | left, 24 | right 25 | } 26 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/TimeLine/ControlPositions.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : ControlPositions.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Components.TimeLine 17 | { 18 | /// 19 | /// 表示『播放』按钮的位置。可选值：'left'、'right'。 20 | /// 21 | public enum ControlPositions 22 | { 23 | left, 24 | right 25 | } 26 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/BarSeries.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : BarSeries.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Series 17 | { 18 | /// 19 | /// 柱状/条形图 20 | /// 21 | public class BarSeries : Series 22 | { 23 | public BarSeries() 24 | { 25 | Type = SeriesTypes.bar; 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/Symbols.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Symbols.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | /// 19 | /// 标记的图形。 20 | /// 21 | public enum Symbols 22 | { 23 | pin, 24 | circle, 25 | rect, 26 | roundRect, 27 | triangle, 28 | diamond, 29 | arrow 30 | } 31 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/DoubleValue.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : DoubleValue.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.JsonConverter; 17 | using Newtonsoft.Json; 18 | 19 | namespace Magicodes.ECharts.ValueTypes 20 | { 21 | /// 22 | /// 小数值 23 | /// 24 | [JsonConverter(typeof(ValueConverter))] 25 | public class DoubleValue : ILeftValue, ITopValue, IRightValue, IBottomValue, IValue 26 | { 27 | public double Value { get; set; } 28 | } 29 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/ToolTip/TooltipTriggerEvents.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : TooltipTriggerEvents.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Components.ToolTip 17 | { 18 | /// 19 | /// 提示框组件触发事件 20 | /// 21 | public enum TooltipTriggerEvents 22 | { 23 | /// 24 | /// 鼠标移动时触发。 25 | /// 26 | mousemove, 27 | 28 | /// 29 | /// 鼠标点击时触发。 30 | /// 31 | click 32 | } 33 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/ToolTip/TooltipTriggerTypes.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : TooltipTriggerTypes.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Components.ToolTip 17 | { 18 | /// 19 | /// 提示框组件触发类型 20 | /// 21 | public enum TooltipTriggerTypes 22 | { 23 | /// 24 | /// 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 25 | /// 26 | item, 27 | 28 | /// 29 | /// 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 30 | /// 31 | axis 32 | } 33 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/Mark/MarkPointDataTypes.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : MarkPointDataTypes.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Series.Mark 17 | { 18 | /// 19 | /// 特殊的标注类型，用于标注最大值最小值等。 20 | /// 21 | public enum MarkPointDataTypes 22 | { 23 | /// 24 | /// 最小值 25 | /// 26 | min, 27 | 28 | /// 29 | /// 最大值 30 | /// 31 | max, 32 | 33 | /// 34 | /// 平均值 35 | /// 36 | average 37 | } 38 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // 有关程序集的常规信息是通过以下项进行控制的 6 | // 控制。更改这些特性值可修改 7 | // 与程序集关联的信息。 8 | [assembly: AssemblyTitle("Magicodes.ECharts.Demo")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("Magicodes.ECharts.Demo")] 13 | [assembly: AssemblyCopyright("版权所有(C) 2016")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // 将 ComVisible 设置为 false 将使此程序集中的类型 18 | // 对 COM 组件不可见。如果需要 19 | // 从 COM 访问此程序集中的某个类型，请针对该类型将 ComVisible 特性设置为 true。 20 | [assembly: ComVisible(false)] 21 | 22 | // 如果此项目向 COM 公开，则下列 GUID 用于 typelib 的 ID 23 | [assembly: Guid("ade3fd17-79ff-4e45-89c7-bc4c7a17f5a1")] 24 | 25 | // 程序集的版本信息由下列四个值组成: 26 | // 27 | // 主版本 28 | // 次版本 29 | // 内部版本号 30 | // 修订版本 31 | // 32 | // 你可以指定所有值，也可以让修订版本和内部版本号采用默认值， 33 | // 方法是按如下所示使用 "*": 34 | [assembly: AssemblyVersion("1.0.0.0")] 35 | [assembly: AssemblyFileVersion("1.0.0.0")] 36 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/StringValue.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : StringValue.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.JsonConverter; 17 | using Newtonsoft.Json; 18 | 19 | namespace Magicodes.ECharts.ValueTypes 20 | { 21 | /// 22 | /// 字符串值 23 | /// 24 | [JsonConverter(typeof(ValueConverter))] 25 | public class StringValue : ILeftValue, ITopValue, IRightValue, IBottomValue, ISymbolValue, IValue, INumberOrStringValue 26 | { 27 | public StringValue(string value = null) 28 | { 29 | Value = value; 30 | } 31 | public string Value { get; set; } 32 | } 33 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/TimelineOptions.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : TimelineOptions.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Collections.Generic; 17 | 18 | namespace Magicodes.ECharts 19 | { 20 | /// 21 | /// timeline配置项 22 | /// timeline 和其他组件有些不同，它需要操作『多个option』 23 | /// 24 | public class TimelineOptions 25 | { 26 | /// 27 | /// baseOption 是一个 『原子option』，options 数组中的每一项也是一个 『原子option』。 28 | /// 29 | public EChartsOption BaseOption { get; set; } 30 | 31 | /// 32 | /// 33 | public List Options { get; set; } 34 | } 35 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Web.Release.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/AlignValue.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : AlignValue.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.CommonDefinitions; 17 | using Magicodes.ECharts.JsonConverter; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | 21 | namespace Magicodes.ECharts.ValueTypes 22 | { 23 | /// 24 | /// 水平对齐值 25 | /// 26 | [JsonConverter(typeof(ValueConverter))] 27 | public class AlignValue : ILeftValue, IValue 28 | { 29 | public AlignValue(Align value) 30 | { 31 | Value = value; 32 | } 33 | 34 | [JsonConverter(typeof(StringEnumConverter))] 35 | public Align Value { get; set; } 36 | } 37 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/SymbolValue.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : SymbolValue.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.CommonDefinitions; 17 | using Magicodes.ECharts.JsonConverter; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | 21 | namespace Magicodes.ECharts.ValueTypes 22 | { 23 | /// 24 | /// 标记的图形 25 | /// 26 | [JsonConverter(typeof(ValueConverter))] 27 | public class SymbolValue : ISymbolValue, IValue 28 | { 29 | public SymbolValue(Symbols value) 30 | { 31 | Value = value; 32 | } 33 | 34 | [JsonConverter(typeof(StringEnumConverter))] 35 | public Symbols Value { get; set; } 36 | } 37 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/NumberValue.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : NumberValue.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.JsonConverter; 17 | using Newtonsoft.Json; 18 | 19 | namespace Magicodes.ECharts.ValueTypes 20 | { 21 | /// 22 | /// 数值 23 | /// 24 | [JsonConverter(typeof(ValueConverter))] 25 | public class NumberValue : ILeftValue, ITopValue, IRightValue, IBottomValue, IValue, INumberOrArrayNumberValue, INumberOrStringValue 26 | { 27 | public NumberValue(double? value = null) 28 | { 29 | if (value.HasValue) 30 | { 31 | Value = value.Value; 32 | } 33 | } 34 | public double Value { get; set; } 35 | } 36 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/AxisTypes.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : AxisTypes.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Axis 17 | { 18 | /// 19 | /// 坐标轴类型 20 | /// 21 | public enum AxisTypes 22 | { 23 | /// 24 | /// 数值轴，适用于连续数据。 25 | /// 26 | value, 27 | 28 | /// 29 | /// 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 30 | /// 31 | category, 32 | 33 | /// 34 | /// 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 35 | /// 36 | time, 37 | 38 | /// 39 | /// 对数轴。适用于对数数据。 40 | /// 41 | log 42 | } 43 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/ValueTypes/VerticalAlignValue.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : VerticalAlignValue.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.CommonDefinitions; 17 | using Magicodes.ECharts.JsonConverter; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | 21 | namespace Magicodes.ECharts.ValueTypes 22 | { 23 | /// 24 | /// 垂直对齐值 25 | /// 26 | [JsonConverter(typeof(ValueConverter))] 27 | public class VerticalAlignValue : ITopValue, IValue 28 | { 29 | public VerticalAlignValue(VerticalAlign value) 30 | { 31 | Value = value; 32 | } 33 | 34 | [JsonConverter(typeof(StringEnumConverter))] 35 | public VerticalAlign Value { get; set; } 36 | } 37 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/plugins/echart/theme/vintage.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof define === "function" && define.amd) { 3 | // AMD. Register as an anonymous module. 4 | define(["exports", "echarts"], factory); 5 | } else if (typeof exports === "object" && typeof exports.nodeName !== "string") { 6 | // CommonJS 7 | factory(exports, require("echarts")); 8 | } else { 9 | // Browser globals 10 | factory({}, root.echarts); 11 | } 12 | }(this, 13 | function(exports, echarts) { 14 | var log = function(msg) { 15 | if (typeof console !== "undefined") { 16 | console && console.error && console.error(msg); 17 | } 18 | }; 19 | if (!echarts) { 20 | log("ECharts is not Loaded"); 21 | return; 22 | } 23 | var colorPalette = [ 24 | "#d87c7c", "#919e8b", "#d7ab82", "#6e7074", "#61a0a8", "#efa18d", "#787464", "#cc7e63", "#724e58", "#4b565b" 25 | ]; 26 | echarts.registerTheme("vintage", 27 | { 28 | color: colorPalette, 29 | backgroundColor: "#fef8ef", 30 | graph: { 31 | color: colorPalette 32 | } 33 | }); 34 | })); -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/Legend/LegendData.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : LegendData.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.CommonDefinitions; 17 | 18 | namespace Magicodes.ECharts.Components.Legend 19 | { 20 | /// 21 | /// 图例的数据 22 | /// 23 | public class LegendData 24 | { 25 | public LegendData(string name) 26 | { 27 | Name = name; 28 | } 29 | 30 | /// 31 | /// 名称 32 | /// 33 | public string Name { get; set; } 34 | 35 | /// 36 | /// 图形，比如circle 37 | /// 38 | public string Icon { get; set; } 39 | 40 | /// 41 | /// 文本样式 42 | /// 43 | public TextStyles TextStyle { get; set; } 44 | } 45 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/LineSeries.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : LineSeries.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.ValueTypes; 17 | 18 | namespace Magicodes.ECharts.Series 19 | { 20 | /// 21 | /// 折线/面积图 22 | /// 23 | public class LineSeries : Series 24 | { 25 | public LineSeries() 26 | { 27 | Type = SeriesTypes.line; 28 | } 29 | 30 | /// 31 | /// 是否平滑曲线显示。 32 | /// 33 | public bool Smooth { get; set; } 34 | 35 | /// 36 | /// 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 37 | /// 38 | public INumberOrArrayNumberValue SymbolSize { get; set; } 39 | 40 | /// 41 | /// 是否开启 hover 在拐点标志上的提示动画效果。 42 | /// 43 | public bool? HoverAnimation { get; set; } 44 | 45 | 46 | 47 | 48 | } 49 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/Mark/MarkData.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : MarkData.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Newtonsoft.Json; 17 | using Newtonsoft.Json.Converters; 18 | using System.Collections.Generic; 19 | 20 | namespace Magicodes.ECharts.Series.Mark 21 | { 22 | /// 23 | /// 标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。 24 | /// 25 | public class MarkData 26 | { 27 | /// 28 | /// 标注名称。 29 | /// 30 | public string Name { get; set; } 31 | 32 | /// 33 | /// 特殊的标注类型，用于标注最大值最小值等。 34 | /// 35 | [JsonConverter(typeof(StringEnumConverter))] 36 | public MarkPointDataTypes Type { get; set; } 37 | 38 | /// 39 | /// 标注的坐标。坐标格式视系列的坐标系而定，可以是直角坐标系上的 x, y，也可以是极坐标系上的 radius, angle。 40 | /// 例如 [121, 2323]、['aa', 998]。 41 | /// 42 | public List Coord { get; set; } 43 | } 44 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/Mark/MarkLine.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : MarkLine.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Collections.Generic; 17 | using Magicodes.ECharts.ValueTypes; 18 | 19 | namespace Magicodes.ECharts.Series.Mark 20 | { 21 | /// 22 | /// 图表标线 23 | /// 24 | public class MarkLine 25 | { 26 | /// 27 | /// 标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow',也可以通过 'image://url' 28 | /// 设置为图片，其中 url 为图片的链接。 29 | /// 在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 symbol 的话就是 30 | /// symbolSize）的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。 31 | /// 32 | public ISymbolValue Symbol { get; set; } 33 | 34 | /// 35 | /// 标注的数据数组 36 | /// 37 | public List Data { get; set; } 38 | } 39 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Mvc/MvcExtension.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : MvcExtension.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.Mvc.Results; 17 | using System.Web.Mvc; 18 | 19 | namespace Magicodes.ECharts.Mvc 20 | { 21 | public static class MvcExtension 22 | { 23 | /// 24 | /// 返回符合Echart的结果 25 | /// 26 | /// 控制器对象 27 | /// EChartsOption对象 28 | /// 是否允许HttpGet请求 29 | /// 30 | public static JavaScriptJsonResult ToEChartResult(this Controller controller, EChartsOption option, 31 | JsonRequestBehavior behavior = JsonRequestBehavior.AllowGet) 32 | { 33 | return new JavaScriptJsonResult 34 | { 35 | Data = option, 36 | ContentEncoding = null, 37 | ContentType = null, 38 | JsonRequestBehavior = JsonRequestBehavior.AllowGet 39 | }; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/Mark/MarkPoint.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : MarkPoint.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Collections.Generic; 17 | using Magicodes.ECharts.CommonDefinitions; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | 21 | namespace Magicodes.ECharts.Series.Mark 22 | { 23 | /// 24 | /// 图表标注 25 | /// 26 | public class MarkPoint 27 | { 28 | /// 29 | /// 标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow',也可以通过 'image://url' 30 | /// 设置为图片，其中 url 为图片的链接。 31 | /// 在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 symbol 的话就是 32 | /// symbolSize）的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。 33 | /// 34 | [JsonConverter(typeof(StringEnumConverter))] 35 | public Symbols Symbol { get; set; } 36 | 37 | /// 38 | /// 标注的数据数组 39 | /// 40 | public List Data { get; set; } 41 | } 42 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Mvc/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : AssemblyInfo.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Reflection; 17 | using System.Runtime.InteropServices; 18 | 19 | // 有关程序集的一般信息由以下 20 | // 控制。更改这些特性值可修改 21 | // 与程序集关联的信息。 22 | 23 | [assembly: AssemblyTitle("Magicodes.ECharts.Mvc")] 24 | [assembly: AssemblyDescription("Magicodes.ECharts.Mvc")] 25 | [assembly: AssemblyConfiguration("")] 26 | [assembly: AssemblyCompany("湖南心莱信息科技有限公司")] 27 | [assembly: AssemblyProduct("Magicodes.ECharts.Mvc")] 28 | [assembly: AssemblyCopyright("Copyright © 2016")] 29 | [assembly: AssemblyTrademark("")] 30 | [assembly: AssemblyCulture("")] 31 | 32 | //将 ComVisible 设置为 false 将使此程序集中的类型 33 | //对 COM 组件不可见。 如果需要从 COM 访问此程序集中的类型， 34 | //请将此类型的 ComVisible 特性设置为 true。 35 | 36 | [assembly: ComVisible(false)] 37 | 38 | // 如果此项目向 COM 公开，则下列 GUID 用于类型库的 ID 39 | 40 | [assembly: Guid("13b71970-1b8b-47d9-8105-ed3359e848d4")] 41 | 42 | // 程序集的版本信息由下列四个值组成: 43 | // 44 | // 主版本 45 | // 次版本 46 | // 生成号 47 | // 修订号 48 | // 49 | //可以指定所有这些值，也可以使用“生成号”和“修订号”的默认值， 50 | // 方法是按如下所示使用“*”: : 51 | // [assembly: AssemblyVersion("1.0.*")] 52 | 53 | [assembly: AssemblyVersion("1.0.*")] 54 | //[assembly: AssemblyFileVersion("1.0.0.0")] -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/App_Start/BundleConfig.cs: -------------------------------------------------------------------------------- 1 | using System.Web; 2 | using System.Web.Optimization; 3 | 4 | namespace Magicodes.ECharts.Demo 5 | { 6 | public class BundleConfig 7 | { 8 | // 有关绑定的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=301862 9 | public static void RegisterBundles(BundleCollection bundles) 10 | { 11 | bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 12 | "~/Scripts/jquery-{version}.js")); 13 | 14 | bundles.Add(new ScriptBundle("~/bundles/knockout").Include( 15 | "~/Scripts/knockout-{version}.js")); 16 | 17 | bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( 18 | "~/Scripts/jquery.validate*")); 19 | 20 | // 使用要用于开发和学习的 Modernizr 的开发版本。然后，当你做好 21 | // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。 22 | bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( 23 | "~/Scripts/modernizr-*")); 24 | 25 | bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( 26 | "~/Scripts/bootstrap.js", 27 | "~/Scripts/respond.js")); 28 | 29 | bundles.Add(new StyleBundle("~/Content/css").Include( 30 | "~/Content/bootstrap.css", 31 | "~/Content/site.css")); 32 | 33 | //echarts 34 | bundles.Add(new ScriptBundle("~/plugins/echarts").Include( 35 | "~/Scripts/plugins/echart/echarts.js", 36 | "~/Scripts/plugins/echart/theme/macarons.js", 37 | "~/Scripts/components/magicodes.echart.js")); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/Label.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Label.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | /// 19 | /// 标签 20 | /// 21 | public class Label 22 | { 23 | public Label() 24 | { 25 | Show = true; 26 | } 27 | 28 | /// 29 | /// 是否显示刻度标签。 30 | /// 31 | public bool Show { get; set; } 32 | 33 | //// // 使用字符串模板，模板变量为刻度默认标签 {value} 34 | //// formatter: '{value} kg' 35 | 36 | //// // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 37 | //// formatter: function (value, index) { 38 | //// // 格式化成月/日，只在第一个刻度显示年份 39 | //// var date = new Date(value); 40 | //// var texts = [(date.getMonth() + 1), date.getDate()]; 41 | //// if (index === 0) { 42 | //// texts.unshift(date.getYear()); 43 | //// } 44 | //// return texts.join('/'); 45 | //// } 46 | /// 47 | /// 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 48 | /// 示例： 49 | /// 50 | public string Formatter { get; set; } 51 | } 52 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : AssemblyInfo.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Reflection; 17 | using System.Runtime.InteropServices; 18 | 19 | // 有关程序集的一般信息由以下 20 | // 控制。更改这些特性值可修改 21 | // 与程序集关联的信息。 22 | 23 | [assembly: AssemblyTitle("Magicodes.ECharts")] 24 | [assembly: AssemblyDescription("Magicodes.ECharts，是心莱科技开发团队基于百度echarts创建的一个后端模型，以便于通过后台更方便简单地创建ECharts图表")] 25 | [assembly: AssemblyConfiguration("")] 26 | [assembly: AssemblyCompany("湖南心莱信息科技有限公司")] 27 | [assembly: AssemblyProduct("Magicodes.ECharts")] 28 | [assembly: AssemblyCopyright("Copyright © 2016")] 29 | [assembly: AssemblyTrademark("")] 30 | [assembly: AssemblyCulture("")] 31 | 32 | 33 | //将 ComVisible 设置为 false 将使此程序集中的类型 34 | //对 COM 组件不可见。 如果需要从 COM 访问此程序集中的类型， 35 | //请将此类型的 ComVisible 特性设置为 true。 36 | 37 | [assembly: ComVisible(false)] 38 | 39 | // 如果此项目向 COM 公开，则下列 GUID 用于类型库的 ID 40 | 41 | [assembly: Guid("6f82999d-067d-47de-adc4-a73d1f2530c8")] 42 | 43 | // 程序集的版本信息由下列四个值组成: 44 | // 45 | // 主版本 46 | // 次版本 47 | // 生成号 48 | // 修订号 49 | // 50 | //可以指定所有这些值，也可以使用“生成号”和“修订号”的默认值， 51 | // 方法是按如下所示使用“*”: : 52 | // [assembly: AssemblyVersion("1.0.*")] 53 | 54 | [assembly: AssemblyVersion("1.0.*")] 55 | //必须注释AssemblyFileVersion特性设置，自动版本号才会生效 56 | //[assembly: AssemblyFileVersion("1.0.0.0")] -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/packages.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Views/Shared/_Layout.cshtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | @ViewBag.Title 8 | @Styles.Render("~/Content/css") 9 | @Scripts.Render("~/bundles/modernizr") 10 | 11 | 12 |
13 |
14 |
15 | 20 | @Html.ActionLink("Magicodes.ECharts", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 21 |
22 | @*
23 |
    24 |
  • @Html.ActionLink("主页", "Index", "Home")
    • 25 |
  • @Html.ActionLink("关于", "About", "Home")
    • 26 |
  • @Html.ActionLink("联系方式", "Contact", "Home")
    • 27 |
28 |
*@ 29 |
30 |
31 |
32 | @RenderBody() 33 |
34 | 37 |
38 | 39 | @Scripts.Render("~/bundles/jquery") 40 | @Scripts.Render("~/bundles/knockout") 41 | @Scripts.Render("~/bundles/bootstrap") 42 | @Scripts.Render("~/plugins/echarts") 43 | @RenderSection("scripts", required: false) 44 | 45 | 46 | -------------------------------------------------------------------------------- /Magicodes.ECharts/JsonConverter/ValueConverter.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : ValueConverter.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System; 17 | using Magicodes.ECharts.ValueTypes; 18 | using Newtonsoft.Json; 19 | using System.Text; 20 | 21 | namespace Magicodes.ECharts.JsonConverter 22 | { 23 | public class ValueConverter : Newtonsoft.Json.JsonConverter 24 | { 25 | public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer) 26 | { 27 | var iv = value as IValue; 28 | if (iv == null) return; 29 | //如果是字符串数组 30 | if (iv.Value is double[]) 31 | { 32 | var values = iv.Value as double[]; 33 | writer.WriteStartArray(); 34 | foreach (var item in values) 35 | { 36 | writer.WriteValue(item); 37 | } 38 | writer.WriteEndArray(); 39 | return; 40 | } 41 | writer.WriteValue(iv.Value.ToString()); 42 | } 43 | 44 | public override object ReadJson(JsonReader reader, Type objectType, object existingValue, 45 | JsonSerializer serializer) 46 | { 47 | var obj = Activator.CreateInstance(objectType) as IValue; 48 | obj.Value = (T)reader.Value; 49 | return obj; 50 | } 51 | 52 | public override bool CanConvert(Type objectType) 53 | { 54 | return objectType == typeof(IValue); 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Views/Web.config: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /Magicodes.ECharts.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 14 4 | VisualStudioVersion = 14.0.25420.1 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Magicodes.ECharts", "Magicodes.ECharts\Magicodes.ECharts.csproj", "{6F82999D-067D-47DE-ADC4-A73D1F2530C8}" 7 | EndProject 8 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Magicodes.ECharts.Mvc", "Magicodes.ECharts.Mvc\Magicodes.ECharts.Mvc.csproj", "{13B71970-1B8B-47D9-8105-ED3359E848D4}" 9 | EndProject 10 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Magicodes.ECharts.Demo", "Magicodes.ECharts.Demo\Magicodes.ECharts.Demo.csproj", "{A71D16ED-2084-4B27-AC86-07D9250448A6}" 11 | EndProject 12 | Global 13 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 14 | Debug|Any CPU = Debug|Any CPU 15 | Release|Any CPU = Release|Any CPU 16 | EndGlobalSection 17 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 18 | {6F82999D-067D-47DE-ADC4-A73D1F2530C8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 19 | {6F82999D-067D-47DE-ADC4-A73D1F2530C8}.Debug|Any CPU.Build.0 = Debug|Any CPU 20 | {6F82999D-067D-47DE-ADC4-A73D1F2530C8}.Release|Any CPU.ActiveCfg = Release|Any CPU 21 | {6F82999D-067D-47DE-ADC4-A73D1F2530C8}.Release|Any CPU.Build.0 = Release|Any CPU 22 | {13B71970-1B8B-47D9-8105-ED3359E848D4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 23 | {13B71970-1B8B-47D9-8105-ED3359E848D4}.Debug|Any CPU.Build.0 = Debug|Any CPU 24 | {13B71970-1B8B-47D9-8105-ED3359E848D4}.Release|Any CPU.ActiveCfg = Release|Any CPU 25 | {13B71970-1B8B-47D9-8105-ED3359E848D4}.Release|Any CPU.Build.0 = Release|Any CPU 26 | {A71D16ED-2084-4B27-AC86-07D9250448A6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 27 | {A71D16ED-2084-4B27-AC86-07D9250448A6}.Debug|Any CPU.Build.0 = Debug|Any CPU 28 | {A71D16ED-2084-4B27-AC86-07D9250448A6}.Release|Any CPU.ActiveCfg = Release|Any CPU 29 | {A71D16ED-2084-4B27-AC86-07D9250448A6}.Release|Any CPU.Build.0 = Release|Any CPU 30 | EndGlobalSection 31 | GlobalSection(SolutionProperties) = preSolution 32 | HideSolutionNode = FALSE 33 | EndGlobalSection 34 | EndGlobal 35 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/plugins/echart/theme/roma.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof define === "function" && define.amd) { 3 | // AMD. Register as an anonymous module. 4 | define(["exports", "echarts"], factory); 5 | } else if (typeof exports === "object" && typeof exports.nodeName !== "string") { 6 | // CommonJS 7 | factory(exports, require("echarts")); 8 | } else { 9 | // Browser globals 10 | factory({}, root.echarts); 11 | } 12 | }(this, 13 | function(exports, echarts) { 14 | var log = function(msg) { 15 | if (typeof console !== "undefined") { 16 | console && console.error && console.error(msg); 17 | } 18 | }; 19 | if (!echarts) { 20 | log("ECharts is not Loaded"); 21 | return; 22 | } 23 | 24 | var colorPalette = [ 25 | "#E01F54", "#001852", "#f5e8c8", "#b8d2c7", "#c6b38e", 26 | "#a4d8c2", "#f3d999", "#d3758f", "#dcc392", "#2e4783", 27 | "#82b6e9", "#ff6347", "#a092f1", "#0a915d", "#eaf889", 28 | "#6699FF", "#ff6666", "#3cb371", "#d5b158", "#38b6b6" 29 | ]; 30 | 31 | var theme = { 32 | color: colorPalette, 33 | 34 | visualMap: { 35 | color: ["#e01f54", "#e7dbc3"], 36 | textStyle: { 37 | color: "#333" 38 | } 39 | }, 40 | 41 | candlestick: { 42 | itemStyle: { 43 | normal: { 44 | color: "#e01f54", 45 | color0: "#001852", 46 | lineStyle: { 47 | width: 1, 48 | color: "#f5e8c8", 49 | color0: "#b8d2c7" 50 | } 51 | } 52 | } 53 | }, 54 | 55 | graph: { 56 | color: colorPalette 57 | }, 58 | 59 | gauge: { 60 | axisLine: { 61 | lineStyle: { 62 | color: [[0.2, "#E01F54"], [0.8, "#b8d2c7"], [1, "#001852"]], 63 | width: 8 64 | } 65 | } 66 | } 67 | }; 68 | 69 | echarts.registerTheme("roma", theme); 70 | })); -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/YAxis.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : YAxis.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Collections.Generic; 17 | using Magicodes.ECharts.CommonDefinitions; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | using Magicodes.ECharts.ValueTypes; 21 | 22 | namespace Magicodes.ECharts.Axis 23 | { 24 | /// 25 | /// 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。 26 | /// 27 | public class YAxis 28 | { 29 | /// 30 | /// x 轴的位置。 31 | /// 32 | [JsonConverter(typeof(StringEnumConverter))] 33 | public YAxisPosition Position { get; set; } 34 | 35 | /// 36 | /// 坐标轴类型。 37 | /// 38 | [JsonConverter(typeof(StringEnumConverter))] 39 | public AxisTypes Type { get; set; } 40 | 41 | /// 42 | /// 坐标轴名称。 43 | /// 44 | public string Name { get; set; } 45 | 46 | /// 47 | /// 坐标轴名称显示位置。 48 | /// 49 | [JsonConverter(typeof(StringEnumConverter))] 50 | public NameLocations NameLocation { get; set; } 51 | 52 | /// 53 | /// 类目数据，在类目轴（type: 'category'）中有效。 54 | /// 55 | public List Data { get; set; } 56 | 57 | /// 58 | /// 坐标轴刻度标签的相关设置。 59 | /// 60 | public Label AxisLabel { get; set; } 61 | 62 | /// 63 | /// 坐标轴刻度最大值，在类目轴中无效。 64 | /// 可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。 65 | /// 不设置时会自动计算最大值保证坐标轴刻度的均匀分布。 66 | /// 67 | public INumberOrStringValue Max { get; set; } 68 | 69 | /// 70 | /// y 轴所在的 grid 的索引，默认位于第一个 grid。 71 | /// 72 | public double? GridIndex { get; set; } 73 | 74 | /// 75 | /// 是否是反向坐标轴。ECharts 3 中新加。 76 | /// 77 | 78 | public bool? Inverse { get; set; } 79 | } 80 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Axis/XAxis.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : XAxis.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Collections.Generic; 17 | using Magicodes.ECharts.CommonDefinitions; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | 21 | namespace Magicodes.ECharts.Axis 22 | { 23 | /// 24 | /// 直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。 25 | /// 26 | public class XAxis 27 | { 28 | /// 29 | /// x 轴的位置。 30 | /// 31 | [JsonConverter(typeof(StringEnumConverter))] 32 | public XAxisPosition Position { get; set; } 33 | 34 | /// 35 | /// 坐标轴类型。 36 | /// 37 | [JsonConverter(typeof(StringEnumConverter))] 38 | public AxisTypes Type { get; set; } 39 | 40 | /// 41 | /// 坐标轴名称。 42 | /// 43 | public string Name { get; set; } 44 | 45 | /// 46 | /// 坐标轴名称显示位置。 47 | /// 48 | [JsonConverter(typeof(StringEnumConverter))] 49 | public NameLocations NameLocation { get; set; } 50 | 51 | /// 52 | /// 类目数据，在类目轴（type: 'category'）中有效。 53 | /// 54 | public List Data { get; set; } 55 | 56 | /// 57 | /// 坐标轴刻度标签的相关设置。 58 | /// 59 | public Label AxisLabel { get; set; } 60 | 61 | /// 62 | /// 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。 63 | /// 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 64 | /// 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 65 | /// 66 | public bool? BoundaryGap { get; set; } 67 | /// 68 | /// 坐标轴轴线相关设置。 69 | /// 70 | public AxisLine AxisLine { get; set; } 71 | 72 | /// 73 | /// x 轴所在的 grid 的索引，默认位于第一个 grid。 74 | /// 75 | public double? GridIndex { get; set; } 76 | } 77 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Mvc/Results/JavaScriptJsonResult.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : JavaScriptJsonResult.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Newtonsoft.Json; 17 | using Newtonsoft.Json.Serialization; 18 | using System; 19 | using System.Web.Mvc; 20 | 21 | namespace Magicodes.ECharts.Mvc.Results 22 | { 23 | /// 24 | /// 忽略NULL以及属性名命名遵循首字母小写命名 25 | /// 26 | public class JavaScriptJsonResult : JsonResult 27 | { 28 | public JavaScriptJsonResult() 29 | { 30 | Settings = new JsonSerializerSettings 31 | { 32 | ReferenceLoopHandling = ReferenceLoopHandling.Error, 33 | DateFormatString = "yyyy-MM-dd HH:mm:ss", 34 | //DateFormatHandling = DateFormatHandling.MicrosoftDateFormat, 35 | NullValueHandling = NullValueHandling.Ignore, 36 | //使用JS CamelCase命名，即首字母小写 37 | ContractResolver = new CamelCasePropertyNamesContractResolver() 38 | //DefaultValueHandling = DefaultValueHandling.Ignore 39 | }; 40 | } 41 | 42 | public JsonSerializerSettings Settings { get; } 43 | 44 | public override void ExecuteResult(ControllerContext context) 45 | { 46 | if (context == null) 47 | throw new ArgumentNullException("context"); 48 | if ((JsonRequestBehavior == JsonRequestBehavior.DenyGet) && 49 | string.Equals(context.HttpContext.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase)) 50 | throw new InvalidOperationException("JSON GET is not allowed"); 51 | 52 | var response = context.HttpContext.Response; 53 | response.ContentType = string.IsNullOrEmpty(ContentType) ? "application/json" : ContentType; 54 | 55 | if (ContentEncoding != null) 56 | response.ContentEncoding = ContentEncoding; 57 | if (Data == null) 58 | return; 59 | 60 | var scriptSerializer = JsonSerializer.Create(Settings); 61 | scriptSerializer.Serialize(response.Output, Data); 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/SeriesTypes.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : SeriesTypes.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.Series 17 | { 18 | /// 19 | /// 图表类型 20 | /// 21 | public enum SeriesTypes 22 | { 23 | /// 24 | /// 折线/面积图 25 | /// 26 | line, 27 | 28 | /// 29 | /// 柱状/条形图 30 | /// 31 | bar, 32 | 33 | /// 34 | /// 饼图 35 | /// 36 | pie, 37 | 38 | /// 39 | /// 散点（气泡）图 40 | /// 41 | scatter, 42 | 43 | /// 44 | /// 带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。 45 | /// 46 | effectScatter, 47 | 48 | /// 49 | /// 雷达图 50 | /// 51 | radar, 52 | 53 | /// 54 | /// Treemap 是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式，便于突出展现出『树』的各层级中重要的节点。 55 | /// 56 | treemap, 57 | 58 | /// 59 | /// 『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』 60 | /// 61 | boxplot, 62 | 63 | /// 64 | /// K线图 65 | /// 66 | candlestick, 67 | 68 | /// 69 | /// 热力图 70 | /// 71 | heatmap, 72 | 73 | /// 74 | /// 地图。 75 | /// 76 | map, 77 | 78 | /// 79 | /// 平行坐标系（Parallel Coordinates） 80 | /// 81 | parallel, 82 | 83 | /// 84 | /// 线图 85 | /// 86 | lines, 87 | 88 | /// 89 | /// 关系图 90 | /// 91 | graph, 92 | 93 | /// 94 | /// 桑基图 95 | /// 96 | sankey, 97 | 98 | /// 99 | /// 漏斗图 100 | /// 101 | funnel, 102 | 103 | /// 104 | /// 仪表盘 105 | /// 106 | gauge 107 | } 108 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/ToolBox/ToolBox.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : ToolBox.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.CommonDefinitions; 17 | using Newtonsoft.Json; 18 | using Newtonsoft.Json.Converters; 19 | 20 | namespace Magicodes.ECharts.Components.ToolBox 21 | { 22 | /// 23 | /// 工具箱，每个图表最多仅有一个工具箱 24 | /// 25 | public class ToolBox 26 | { 27 | /// 28 | /// 辅助工具箱 29 | /// 30 | public ToolBox() 31 | { 32 | Show = true; 33 | Orient = Orients.horizontal; 34 | X = Align.right; 35 | Y = VerticalAlign.top; 36 | BorderWidth = 0; 37 | Padding = 5; 38 | ShowTitle = true; 39 | Feature = new ToolBoxFeature(); 40 | } 41 | 42 | /// 43 | /// 显示策略，可选为：true（显示） | false（隐藏） 44 | /// 45 | public bool Show { get; set; } 46 | 47 | /// 48 | /// 摆放方式，可选值有： 49 | /// 'vertical'：竖直放置。 50 | /// 'horizontal'：水平放置。 51 | /// 52 | [JsonConverter(typeof(StringEnumConverter))] 53 | public Orients Orient { get; set; } 54 | 55 | /// 56 | /// 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' 57 | /// 58 | [JsonConverter(typeof(StringEnumConverter))] 59 | public Align X { get; set; } 60 | 61 | /// 62 | /// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' 63 | /// 64 | [JsonConverter(typeof(StringEnumConverter))] 65 | public VerticalAlign Y { get; set; } 66 | 67 | /// 68 | /// 工具箱边框线宽，单位px，默认为0（无边框） 69 | /// 70 | public int BorderWidth { get; set; } 71 | 72 | /// 73 | /// 工具箱内边距，单位px，默认各方向内边距为5， 74 | /// 75 | public int Padding { get; set; } 76 | 77 | /// 78 | /// 是否显示工具箱文字提示，默认启用 79 | /// 80 | public bool ShowTitle { get; set; } 81 | 82 | /// 83 | /// 启用功能集合 84 | /// 85 | public ToolBoxFeature Feature { get; set; } 86 | } 87 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/EChartsOptions.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : EChartsOptions.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System; 17 | using Magicodes.ECharts.Axis; 18 | using Magicodes.ECharts.Components.Legend; 19 | using Magicodes.ECharts.Components.TimeLine; 20 | using Magicodes.ECharts.Components.Title; 21 | using Magicodes.ECharts.Components.ToolBox; 22 | using Magicodes.ECharts.Components.ToolTip; 23 | using Magicodes.ECharts.Components.DataZoom; 24 | using System.Collections.Generic; 25 | using Magicodes.ECharts.Components.Grid; 26 | 27 | namespace Magicodes.ECharts 28 | { 29 | /// 30 | /// EChart相关配置 31 | /// 32 | public class EChartsOption 33 | { 34 | /// 35 | /// 标题组件 36 | /// 37 | public Title Title { get; set; } 38 | 39 | /// 40 | /// 是否启用拖拽重计算特性，默认关闭 41 | /// 42 | public bool Calculable { get; set; } 43 | 44 | /// 45 | /// 提示框组件 46 | /// 47 | public Tooltip Tooltip { get; set; } 48 | 49 | /// 50 | /// 工具箱 每个图表仅有一个 51 | /// 52 | public ToolBox Toolbox { get; set; } 53 | 54 | /// 55 | /// timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。 56 | /// 57 | public TimeLine Timeline { get; set; } 58 | 59 | /// 60 | /// 图例组件 61 | /// 62 | public Legend Legend { get; set; } 63 | 64 | /// 65 | /// 直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。 66 | /// 67 | public XAxis[] XAxis { get; set; } 68 | 69 | /// 70 | /// 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。 71 | /// 72 | public YAxis[] YAxis { get; set; } 73 | 74 | /// 75 | /// 系列列表 76 | /// 77 | public Series.Series[] Series { get; set; } 78 | /// 79 | /// dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。 80 | /// 81 | public List DataZoom { get; set; } 82 | 83 | /// 84 | /// 网格组件列表 85 | /// 86 | public List Grid { get; set; } 87 | } 88 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/components/magicodes.echart.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | //这里可以设置全局配置，比如window.mcs.echarts.settings.theme="macarons"; 3 | window.mcs = window.mcs || {}; 4 | window.mcs.echarts = window.mcs.echarts || {}; 5 | window.mcs.echarts.settings = {}; 6 | //图表组件 7 | //参数： 8 | // ajaxUrl:Ajax加载路径 9 | // isBlockUI:是否显示加载遮罩层 10 | // theme:主题 11 | var instance = function (params, componentInfo) { 12 | var self = this; 13 | this.ajaxUrl = null; 14 | this.ajaxParams = null; 15 | 16 | if (typeof (echarts) == "undefined") { 17 | console.error("请引用echarts的相关脚本！"); 18 | return; 19 | } 20 | //加载配置 21 | this.load = function () { 22 | self.myChart.showLoading(); 23 | var ajaxOption = { 24 | url: self.ajaxUrl, 25 | isBlockUI: self.isBlockUI, 26 | success: function (data) { 27 | self.myChart.hideLoading(); 28 | var option = data; 29 | console.log("option", data); 30 | if (option && typeof option === "object") { 31 | self.myChart.setOption(option, true); 32 | } 33 | }, 34 | error: function () { 35 | self.myChart.hideLoading(); 36 | } 37 | }; 38 | if (self.ajaxParams) 39 | ajaxOption.data = self.ajaxParams; 40 | 41 | if (typeof (mwc) !== "undefined") 42 | mwc.restApi.get(ajaxOption); 43 | else if (typeof (wc) !== "undefined") 44 | wc.restApi.get(ajaxOption); 45 | else 46 | $.ajax(ajaxOption); 47 | }; 48 | //根据参数加载 49 | if (params) { 50 | this.isBlockUI = params.isBlockUI || false; 51 | //支持动态修改地址并触发图表刷新 52 | if ($.isFunction(params.ajaxUrl)) { 53 | self.ajaxUrl = params.ajaxUrl(); 54 | //添加订阅 55 | params.ajaxUrl.subscribe(function (newValue) { 56 | self.ajaxUrl = newValue; 57 | self.load(); 58 | }); 59 | } else { 60 | this.ajaxUrl = params.ajaxUrl; 61 | } 62 | //允许使用全局设置 63 | var theme = window.mcs.echarts.settings.theme || params.theme; 64 | //初始化并使用主题 65 | self.myChart = typeof (theme) == 'undefined' ? echarts.init(componentInfo.element) : echarts.init(componentInfo.element, theme); 66 | self.load(); 67 | } 68 | }; 69 | var echartViewModelInstance = { 70 | createViewModel: function (params, componentInfo) { 71 | return new instance(params, componentInfo); 72 | } 73 | }; 74 | //注册Echart组件 75 | ko.components.register("echart", 76 | { 77 | viewModel: echartViewModelInstance, 78 | template: "
" 79 | }); 80 | })(); -------------------------------------------------------------------------------- /Magicodes.ECharts/Series/Series.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Series.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:13 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Collections.Generic; 17 | using Magicodes.ECharts.Series.Mark; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | 21 | namespace Magicodes.ECharts.Series 22 | { 23 | /// 24 | /// 系列列表。每个系列通过 type 决定自己的图表类型 25 | /// 26 | public class Series 27 | { 28 | /// 29 | /// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 30 | /// 31 | public string Name { get; set; } 32 | 33 | /// 34 | /// 类型 35 | /// 36 | [JsonConverter(typeof(StringEnumConverter))] 37 | public SeriesTypes Type { get; set; } 38 | 39 | /// 40 | /// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 41 | /// itemStyle 平级，并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。 42 | /// 43 | public string Label { get; set; } 44 | 45 | /// 46 | /// 系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况: 47 | /// 1.在坐标系一个轴为类目轴的时候，数据可以是一维的数值，数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度，并且他们间是一一对应的，如下：[12, 34, 56, 10, 23] 48 | /// 2.在坐标系两个轴都为数值轴的时候，每个数据项需要是一个数组，并且至少有两个值表示直角坐标系上的 x、y 或者极坐标系上的 radius、angle，如下： [[3.4, 4.5, 15], [4.2, 2.3, 20], 49 | /// [10.8, 9.5, 30], [7.2, 8.8, 18]]。每一项数值数组从第三个值开始可以表示数据的其它维度，配合 visualMap 组件可以将指定的一个或多个维度映射到颜色，大小等多个图形属性上。 50 | /// 3.在坐标系两个轴都为类目轴的时候，每个数据项也需要是一个数组，单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称，如下： [[0, 0, 2], ['星期一', 2, 1], [2, 1, 2], [3, 3, 51 | /// 5]]。每一项数值数组从第三个值开始可以表示数据的其它维度，配合 visualMap 组件可以将指定的一个或多个维度映射到颜色，大小等多个图形属性上。 52 | /// 当某类目对应数据不存在时（ps：不存在不代表值为 0），可用-表示，无数据在折线图中表现为该点是断开的，在其它图中表示为图形不存在。 53 | /// 54 | public List Data { get; set; } 55 | 56 | /// 57 | /// 图表标注。 58 | /// 59 | public MarkPoint MarkPoint { get; set; } 60 | 61 | /// 62 | /// 图表标线 63 | /// 64 | public MarkLine MarkLine { get; set; } 65 | 66 | /// 67 | /// 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 68 | /// 69 | public double? XAxisIndex { get; set; } 70 | 71 | /// 72 | /// 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 73 | /// 74 | public double? YAxisIndex { get; set; } 75 | /// 76 | /// 77 | /// 78 | public string Radius { get; set; } 79 | } 80 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Views/Home/Index.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | ViewBag.Title = "Magicodes.ECharts"; 3 | } 4 | @section Scripts 5 | { 6 | 23 | } 24 |
25 |

Magicodes.ECharts

26 |

Magicodes.ECharts是心莱团队基于EChart封装的.NET类库，以便让用户更快更便捷的上手开发EChart图表。

27 |

Demo »

28 |
29 | 30 |
31 |
32 |

开源库地址

33 | @*

34 | ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that 35 | enables a clean separation of concerns and gives you full control over markup 36 | for enjoyable, agile development. 37 |

*@ 38 |

点此访问 »

39 |
40 |
41 |

官方博客

42 | @*

NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.

*@ 43 |

点此访问 »

44 |
45 |
46 |

官网

47 | @*

You can easily find a web hosting company that offers the right mix of features and price for your applications.

*@ 48 |

点此访问 »

49 |
50 |
51 | 52 |
53 |
54 |

Demo1——柱状图

55 |
56 |
57 |
58 |

Demo2——饼图

59 |
60 |
61 |
62 |
63 |
64 |

Demo3——复杂图

65 |
66 |
67 |
68 |
69 |
70 |

Demo4——动态图

71 |
72 |
73 |
-------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Web.config: -------------------------------------------------------------------------------- 1 | 2 | 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 | -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/Title/Title.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Title.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Magicodes.ECharts.CommonDefinitions; 17 | using Magicodes.ECharts.ValueTypes; 18 | using Newtonsoft.Json; 19 | using Newtonsoft.Json.Converters; 20 | 21 | namespace Magicodes.ECharts.Components.Title 22 | { 23 | /// 24 | /// 标题 25 | /// 26 | public class Title 27 | { 28 | public Title(string text) 29 | { 30 | Show = true; 31 | Text = text; 32 | } 33 | 34 | /// 35 | /// 是否显示标题组件。 36 | /// 37 | public bool Show { get; set; } 38 | 39 | /// 40 | /// 主标题文本，支持使用 \n 换行。 41 | /// 42 | public string Text { get; set; } 43 | 44 | /// 45 | /// 主标题文本超链接。 46 | /// 47 | public string Link { get; set; } 48 | 49 | /// 50 | /// 副标题文本，支持使用 \n 换行 51 | /// 52 | public string Subtext { get; set; } 53 | 54 | /// 55 | /// 副标题文本超链接。 56 | /// 57 | public string Sublink { get; set; } 58 | 59 | /// 60 | /// grid 组件离容器左侧的距离。 61 | /// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。 62 | /// 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。 63 | /// 64 | public ILeftValue Left { get; set; } 65 | 66 | /// 67 | /// grid 组件离容器上侧的距离。 68 | /// top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。 69 | /// 如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。 70 | /// 71 | public ITopValue Top { get; set; } 72 | 73 | /// 74 | /// grid 组件离容器右侧的距离。 75 | /// right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 76 | /// 默认自适应。 77 | /// 78 | public IRightValue Right { get; set; } 79 | 80 | /// 81 | /// grid 组件离容器下侧的距离。 82 | /// bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 83 | /// 默认自适应。 84 | /// 85 | public IBottomValue Bottom { get; set; } 86 | 87 | /// 88 | /// 标题背景色，默认透明。 89 | /// 90 | public string BackgroundColor { get; set; } 91 | 92 | /// 93 | /// 标题的边框颜色。支持的颜色格式同 backgroundColor。 94 | /// 95 | public string BorderColor { get; set; } 96 | 97 | /// 98 | /// 标题的边框线宽。 99 | /// 100 | public int BorderWidth { get; set; } 101 | 102 | /// 103 | /// 标题文本水平对齐 104 | /// 105 | [JsonConverter(typeof(StringEnumConverter))] 106 | public TextAlign? TextAlign { get; set; } 107 | } 108 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/Grid/Grid.cs: -------------------------------------------------------------------------------- 1 | using Magicodes.ECharts.ValueTypes; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace Magicodes.ECharts.Components.Grid 9 | { 10 | /// 11 | /// 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。 12 | /// 在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。 13 | /// 14 | public class Grid 15 | { 16 | /// 17 | /// 是否显示直角坐标系网格。 18 | /// 19 | public bool? Show { get; set; } 20 | /// 21 | /// 所有图形的 zlevel 值。 22 | /// zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。 23 | /// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。 24 | /// 25 | public int Zlevel { get; set; } 26 | 27 | /// 28 | /// grid 组件离容器左侧的距离。 29 | /// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。 30 | /// 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。 31 | /// 32 | public ILeftValue Left { get; set; } 33 | 34 | /// 35 | /// grid 组件离容器上侧的距离。 36 | /// top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。 37 | /// 如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。 38 | /// 39 | public ITopValue Top { get; set; } 40 | 41 | /// 42 | /// grid 组件离容器右侧的距离。 43 | /// right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 44 | /// 默认自适应。 45 | /// 46 | public IRightValue Right { get; set; } 47 | 48 | /// 49 | /// grid 组件离容器下侧的距离。 50 | /// bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 51 | /// 默认自适应。 52 | /// 53 | public IBottomValue Bottom { get; set; } 54 | 55 | /// 56 | /// grid 组件的宽度。默认自适应。 57 | /// 58 | public string Width { get; set; } 59 | 60 | /// 61 | /// grid 组件的高度。默认自适应。 62 | /// 63 | public string Height { get; set; } 64 | 65 | /// 66 | /// grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。 67 | /// 68 | public bool? ContainLabel { get; set; } 69 | 70 | /// 71 | /// 网格背景色，默认透明。 72 | /// 73 | public string BackgroundColor { get; set; } 74 | 75 | /// 76 | /// 网格的边框颜色。支持的颜色格式同 backgroundColor。 77 | /// 78 | public string BorderColor { get; set; } 79 | 80 | /// 81 | /// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 82 | /// 83 | 84 | public double? ShadowBlur { get; set; } 85 | 86 | 87 | /// 88 | /// 阴影颜色。支持的格式同color。 89 | /// 90 | public string ShadowColor { get; set; } 91 | 92 | /// 93 | /// 阴影水平方向上的偏移距离。 94 | /// 95 | public double? ShadowOffsetX { get; set; } 96 | 97 | /// 98 | /// 阴影垂直方向上的偏移距离。 99 | /// 100 | public double? ShadowOffsetY { get; set; } 101 | 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/respond.min.js: -------------------------------------------------------------------------------- 1 | /*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl 2 | * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT 3 | * */ 4 | 5 | !function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b 13 | /// dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。 14 | /// 15 | public abstract class DataZoom 16 | { 17 | public DataZoom() 18 | { 19 | this.Show = true; 20 | this.Type = "inside"; 21 | } 22 | public bool Show { get; set; } 23 | public string Id { get; set; } 24 | /// 25 | /// 类型 26 | /// 27 | protected string Type { get; set; } 28 | /// 29 | /// 数据过滤模式 30 | /// 当『只有 X 轴 或 只有 Y 轴受 dataZoom 组件控制』时，常使用 filterMode: 'filter'，这样能使另一个轴自适应过滤后的数值范围。 31 | /// 当『X 轴 Y 轴分别受 dataZoom 组件控制』时： 32 | /// 如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中，那么两个轴可都设为 fiterMode: 'empty'。 33 | /// 如果 X 轴为主，Y 轴为辅，比如在『柱状图』中，需要『拖动 dataZoomX 改变 X 轴过滤柱子时，Y 轴的范围也自适应剩余柱子的高度』，『拖动 dataZoomY 改变 Y 轴过滤柱子时，X 轴范围不受影响』，那么就 X轴设为 fiterMode: 'filter'，Y 轴设为 fiterMode: 'empty'，即主轴 'filter'，辅轴 'empty'。 34 | /// 35 | [JsonConverter(typeof(StringEnumConverter))] 36 | public FilterModes? FilterMode { get; set; } 37 | /// 38 | /// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。 39 | /// 40 | public int? Start { get; set; } 41 | /// 42 | /// 数据窗口范围的结束百分比。范围是：0 ~ 100。 43 | /// 44 | public int? End { get; set; } 45 | /// 46 | /// 数据窗口范围的起始数值。如果设置了 dataZoom-slider.start 则 startValue 失效。 47 | /// dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。 48 | /// 注意，如果轴的类型为 category，则 startValue 既可以设置为 axis.data 数组的 index，也可以设置为数组值本身。 但是如果设置为数组值本身，会在内部自动转化为数组的 index。 49 | /// 50 | public INumberOrStringValue StartValue { get; set; } 51 | /// 52 | /// 数据窗口范围的结束数值。如果设置了 dataZoom-slider.end 则 endValue 失效。 53 | /// dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。 54 | /// 注意，如果轴的类型为 category，则 endValue 即可以设置为 axis.data 数组的 index，也可以设置为数组值本身。 但是如果设置为数组值本身，会在内部自动转化为数组的 index。 55 | /// 56 | public INumberOrStringValue EndValue { get; set; } 57 | /// 58 | /// 设置 dataZoom-inside 组件控制的 y轴（即yAxis，是直角坐标系中的概念，参见 grid）。 59 | /// 不指定时，当 dataZoom-inside.orient 为 'vertical'时，默认控制和 dataZoom 平行的第一个 yAxis。但是不建议使用默认值，建议显式指定。 60 | /// 如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。 61 | /// 62 | public INumberOrArrayNumberValue XAxisIndex { get; set; } 63 | } 64 | /// 65 | /// 数据过滤模式 66 | /// 67 | public enum FilterModes 68 | { 69 | /// 70 | /// 当前数据窗口外的数据，被 过滤掉。即会影响其他轴的数据范围。 71 | /// 72 | filter, 73 | /// 74 | /// 当前数据窗口外的数据，被 设置为空。即不会影响其他轴的数据范围。 75 | /// 76 | empty 77 | } 78 | /// 79 | /// 内置型数据区域缩放组件（dataZoomInside） 80 | /// 81 | public class DataZoomInside : DataZoom 82 | { 83 | public DataZoomInside():base() 84 | { 85 | this.Type = "inside"; 86 | } 87 | } 88 | /// 89 | /// 滑动条型数据区域缩放组件（dataZoomSlider） 90 | /// 91 | public class DataZoomSlider: DataZoom 92 | { 93 | public DataZoomSlider() : base() 94 | { 95 | this.Type = "slider"; 96 | } 97 | /// 98 | /// 组件的背景颜色。 99 | /// 100 | public string BackgroundColor { get; set; } 101 | /// 102 | /// 拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。 103 | /// 104 | public bool? Realtime { get; set; } 105 | 106 | /// 107 | /// 是否显示label，即拖拽时候显示详细数值信息。 108 | /// 109 | public bool? ShowDetail { get; set; } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/Legend/Legend.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Legend.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.ComponentModel; 17 | using Magicodes.ECharts.CommonDefinitions; 18 | using Magicodes.ECharts.Components.ToolTip; 19 | using Magicodes.ECharts.ValueTypes; 20 | using Newtonsoft.Json; 21 | using Newtonsoft.Json.Converters; 22 | 23 | namespace Magicodes.ECharts.Components.Legend 24 | { 25 | /// 26 | /// 图例组件 27 | /// 28 | public class Legend 29 | { 30 | public Legend() 31 | { 32 | Show = true; 33 | } 34 | 35 | /// 36 | /// 是否显示图例组件。 37 | /// 38 | [DefaultValue(true)] 39 | public bool Show { get; set; } 40 | 41 | /// 42 | /// 图例列表的布局朝向。 43 | /// 44 | [JsonConverter(typeof(StringEnumConverter))] 45 | public Orients Orient { get; set; } 46 | 47 | public int Padding { get; set; } 48 | 49 | /// 50 | /// 图例组件离容器左侧的距离。 51 | /// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。 52 | /// 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。 53 | /// 54 | public ILeftValue Left { get; set; } 55 | 56 | /// 57 | /// 图例组件离容器上侧的距离。 58 | /// top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。 59 | /// 如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。 60 | /// 61 | public ITopValue Top { get; set; } 62 | 63 | /// 64 | /// 图例组件离容器右侧的距离。 65 | /// right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 66 | /// 默认自适应。 67 | /// 68 | public IRightValue Right { get; set; } 69 | 70 | /// 71 | /// 图例组件离容器下侧的距离。 72 | /// bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 73 | /// 默认自适应。 74 | /// 75 | public IBottomValue Bottom { get; set; } 76 | 77 | /// 78 | /// 图例组件的宽度。默认自适应。 79 | /// 80 | public string Width { get; set; } 81 | 82 | //// 使用字符串模板，模板变量为图例名称 {name} 83 | //// formatter: 'Legend {name}' 84 | //// 使用回调函数 85 | //// formatter: function(name) 86 | //// { 87 | //// return 'Legend ' + name; 88 | //// } 89 | /// 90 | /// 图例文本的内容格式器，支持字符串模板和回调函数两种形式。 91 | /// 示例： 92 | /// 93 | public string Formatter { get; set; } 94 | 95 | /// 96 | /// 图例选择的模式，默认开启图例选择，可以设成 false 关闭。 97 | /// 除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。 98 | /// 99 | [DefaultValue(true)] 100 | public string SelectedMode { get; set; } 101 | 102 | ////示例： 103 | ////selected: { 104 | //// // 选中'系列1' 105 | //// '系列1': true, 106 | //// // 不选中'系列2' 107 | //// '系列2': false 108 | ////} 109 | /// 110 | /// 图例选中状态表。 111 | /// 112 | public object Selected { get; set; } 113 | 114 | //// legend: { 115 | //// formatter: function(name) 116 | //// { 117 | //// return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…'); 118 | //// }, 119 | //// tooltip: { 120 | //// show: true 121 | //// } 122 | ////} 123 | /// 124 | /// 图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例： 125 | /// 126 | public Tooltip Tooltip { get; set; } 127 | 128 | /// 129 | /// 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动获取对应系列的颜色，图形标记（symbol）作为自己绘制的颜色和标记，特殊字符串 130 | /// ''（空字符串）或者 '\n' (换行字符串)用于图例的换行。 131 | /// 132 | public LegendData[] Data { get; set; } 133 | } 134 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/ToolTip/Tooltip.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : Tooltip.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using Newtonsoft.Json; 17 | using Newtonsoft.Json.Converters; 18 | 19 | namespace Magicodes.ECharts.Components.ToolTip 20 | { 21 | /// 22 | /// 提示框组件 23 | /// 24 | public class Tooltip 25 | { 26 | public Tooltip() 27 | { 28 | Show = true; 29 | ShowContent = true; 30 | } 31 | 32 | /// 33 | /// 是否显示标题组件。 34 | /// 35 | public bool Show { get; set; } 36 | 37 | /// 38 | /// 是否显示提示框浮层，默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false。 39 | /// 40 | public bool ShowContent { get; set; } 41 | 42 | /// 43 | /// 触发类型。 44 | /// 45 | [JsonConverter(typeof(StringEnumConverter))] 46 | public TooltipTriggerTypes Trigger { get; set; } 47 | 48 | /// 49 | /// 提示框触发的条件 50 | /// 51 | [JsonConverter(typeof(StringEnumConverter))] 52 | public TooltipTriggerEvents TriggerOn { get; set; } 53 | 54 | //// 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为： 55 | //// 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无） 56 | //// 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无） 57 | //// 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无） 58 | //// 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） 59 | //// 更多其它图表模板变量的含义可以见相应的图表的 label.normal.formatter 配置项。 60 | //// 示例： 61 | //// formatter: '{b0}: {c0}
{b1}: {c1}' 62 | ////回调函数。 63 | //// 回调函数格式： 64 | //// (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string 65 | //// 第一个参数 params 是 formatter 需要的数据集。格式如下： 66 | //// { 67 | //// componentType: 'series', 68 | //// // 系列类型 69 | //// seriesType: string, 70 | //// // 系列在传入的 option.series 中的 index 71 | //// seriesIndex: number, 72 | //// // 系列名称 73 | //// seriesName: string, 74 | //// // 数据名，类目名 75 | //// name: string, 76 | //// // 数据在传入的 data 数组中的 index 77 | //// dataIndex: number, 78 | //// // 传入的原始数据项 79 | //// data: Object, 80 | //// // 传入的数据值 81 | //// value: number|Array, 82 | //// // 数据图形的颜色 83 | //// color: string, 84 | 85 | //// // 饼图的百分比 86 | //// percent: number, 87 | 88 | //// } 89 | //// 在 trigger 为 'axis' 的时候 params 是多个系列的数据数组。 90 | //// 注： ECharts 2.x 使用数组表示各参数的方式不再支持。 91 | //// 第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。 第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。 92 | //// 示例： 93 | //// formatter: function(params, ticket, callback) 94 | //// { 95 | //// $.get('detail?name=' + params.name, function(content) { 96 | //// callback(ticket, toHTML(content)); 97 | //// }); 98 | //// return 'Loading'; 99 | //// } 100 | /// 101 | /// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 102 | /// 字符串模板。 103 | /// 104 | public string Formatter { get; set; } 105 | 106 | /// 107 | /// 提示框浮层的背景颜色。 108 | /// 109 | public string BackgroundColor { get; set; } 110 | 111 | /// 112 | /// 提示框浮层的边框颜色。 113 | /// 114 | public string BorderColor { get; set; } 115 | 116 | /// 117 | /// 提示框浮层的边框宽。 118 | /// 119 | public int BorderWidth { get; set; } 120 | } 121 | } -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/respond.matchmedia.addListener.min.js: -------------------------------------------------------------------------------- 1 | /*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl 2 | * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT 3 | * */ 4 | 5 | !function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";if(a.matchMedia&&a.matchMedia("all").addListener)return!1;var b=a.matchMedia,c=b("only all").matches,d=!1,e=0,f=[],g=function(){a.clearTimeout(e),e=a.setTimeout(function(){for(var c=0,d=f.length;d>c;c++){var e=f[c].mql,g=f[c].listeners||[],h=b(e.media).matches;if(h!==e.matches){e.matches=h;for(var i=0,j=g.length;j>i;i++)g[i].call(a,e)}}},30)};a.matchMedia=function(e){var h=b(e),i=[],j=0;return h.addListener=function(b){c&&(d||(d=!0,a.addEventListener("resize",g,!0)),0===j&&(j=f.push({mql:h,listeners:i})),i.push(b))},h.removeListener=function(a){for(var b=0,c=i.length;c>b;b++)i[b]===a&&i.splice(b,1)},h}}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b 2 | 3 | 4 | 5 | 6 | 你的 ASP.NET 应用程序 7 | 96 | 97 | 98 | 99 | 103 | 104 |
105 |
106 |

此应用程序包含:

107 |
    108 |
  • 显示“主页”、“关于”和“联系方式”之间的基本导航的示例页
    • 109 |
  • 使用 Bootstrap 进行主题定位
    • 110 |
  • 身份验证，如果选择此项，则将显示如何注册和登录
    • 111 |
  • 使用 NuGet 管理的 ASP.NET 功能
    • 112 |
113 |
114 | 115 |
116 |

自定义应用

117 | 131 |
132 | 133 |
134 |

部署

135 | 140 |
141 | 142 |
143 |

获取帮助

144 | 148 |
149 |
150 | 151 | 152 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Mvc/Magicodes.ECharts.Mvc.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Debug 6 | AnyCPU 7 | {13B71970-1B8B-47D9-8105-ED3359E848D4} 8 | Library 9 | Properties 10 | Magicodes.ECharts.Mvc 11 | Magicodes.ECharts.Mvc 12 | v4.5 13 | 512 14 | 15 | 16 | true 17 | full 18 | false 19 | bin\Debug\ 20 | DEBUG;TRACE 21 | prompt 22 | 4 23 | 24 | 25 | pdbonly 26 | true 27 | bin\Release\ 28 | TRACE 29 | prompt 30 | 4 31 | 32 | 33 | 34 | ..\Magicodes.ECharts\packages\Microsoft.Web.Infrastructure.1.0.0.0\lib\net40\Microsoft.Web.Infrastructure.dll 35 | True 36 | 37 | 38 | ..\Magicodes.ECharts\packages\Newtonsoft.Json.8.0.3\lib\net45\Newtonsoft.Json.dll 39 | True 40 | 41 | 42 | 43 | 44 | 45 | ..\Magicodes.ECharts\packages\Microsoft.AspNet.WebPages.3.2.3\lib\net45\System.Web.Helpers.dll 46 | True 47 | 48 | 49 | ..\Magicodes.ECharts\packages\Microsoft.AspNet.Mvc.5.2.3\lib\net45\System.Web.Mvc.dll 50 | True 51 | 52 | 53 | ..\Magicodes.ECharts\packages\Microsoft.AspNet.Razor.3.2.3\lib\net45\System.Web.Razor.dll 54 | True 55 | 56 | 57 | ..\Magicodes.ECharts\packages\Microsoft.AspNet.WebPages.3.2.3\lib\net45\System.Web.WebPages.dll 58 | True 59 | 60 | 61 | ..\Magicodes.ECharts\packages\Microsoft.AspNet.WebPages.3.2.3\lib\net45\System.Web.WebPages.Deployment.dll 62 | True 63 | 64 | 65 | ..\Magicodes.ECharts\packages\Microsoft.AspNet.WebPages.3.2.3\lib\net45\System.Web.WebPages.Razor.dll 66 | True 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | {6F82999D-067D-47DE-ADC4-A73D1F2530C8} 86 | Magicodes.ECharts 87 | 88 | 89 | 90 | 97 | -------------------------------------------------------------------------------- /Magicodes.ECharts/CommonDefinitions/ToolBoxFeature.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : ToolBoxFeature.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | namespace Magicodes.ECharts.CommonDefinitions 17 | { 18 | public class ToolBoxFeature 19 | { 20 | public ToolBoxFeature() 21 | { 22 | Mark = new FeatureMark(); 23 | DataZoom = new FeatureDataZoom(); 24 | MagicType = new FeatureMagicType(); 25 | Restore = new FeatureRestore(); 26 | SaveAsImage = new FeatureSaveAsImage(); 27 | } 28 | 29 | /// 30 | /// 辅助线标志 31 | /// 32 | public FeatureMark Mark { get; set; } 33 | 34 | /// 35 | /// 框选区域缩放 36 | /// 37 | public FeatureDataZoom DataZoom { get; set; } 38 | 39 | /// 40 | /// 数据视图 41 | /// 42 | public FeatureDataView DataView { get; set; } 43 | 44 | /// 45 | /// 动态类型切换 46 | /// 47 | public FeatureMagicType MagicType { get; set; } 48 | 49 | /// 50 | /// 还原 复位原始图表 51 | /// 52 | public FeatureRestore Restore { get; set; } 53 | 54 | /// 55 | /// 保存图片（IE8-不支持） 56 | /// 57 | public FeatureSaveAsImage SaveAsImage { get; set; } 58 | 59 | /// 60 | /// 辅助线标志 61 | /// 62 | public class FeatureMark 63 | { 64 | public FeatureMark() 65 | { 66 | Show = true; 67 | } 68 | 69 | public bool Show { get; set; } 70 | 71 | public MarkTitle Title { get; set; } 72 | 73 | public MarkLineStyle LineStyle { get; set; } 74 | 75 | public class MarkTitle 76 | { 77 | public string Mark = "辅助线开关"; 78 | public string MarkClear = "清空辅助线"; 79 | public string MarkUndo = "删除辅助线"; 80 | } 81 | 82 | public class MarkLineStyle 83 | { 84 | public string Color = "#1e90ff"; 85 | public string Type = "dashed"; 86 | public int Width = 2; 87 | } 88 | } 89 | 90 | /// 91 | /// 框选区域缩放 92 | /// 93 | public class FeatureDataZoom 94 | { 95 | public FeatureDataZoom() 96 | { 97 | Show = true; 98 | } 99 | 100 | public bool Show { get; set; } 101 | 102 | public class DataZoomTitle 103 | { 104 | public string DataZoom = "区域缩放"; 105 | public string DataZoomReset = "区域缩放-后退"; 106 | } 107 | } 108 | 109 | /// 110 | /// 数据视图 111 | /// 112 | public class FeatureDataView 113 | { 114 | public string[] Lang = {"数据视图", "关闭", "刷新"}; 115 | public bool ReadOnly = true; 116 | public string Title = "数据视图"; 117 | 118 | public FeatureDataView() 119 | { 120 | Show = true; 121 | } 122 | 123 | public bool Show { get; set; } 124 | } 125 | 126 | /// 127 | /// 动态类型切换 128 | /// 129 | public class FeatureMagicType 130 | { 131 | public string[] Type = {"line", "bar", "stack", "tiled"}; 132 | 133 | public FeatureMagicType() 134 | { 135 | show = true; 136 | } 137 | 138 | public bool show { get; set; } 139 | 140 | public class MagicTypeTitle 141 | { 142 | public string Bar = "动态类型切换-柱形图"; 143 | public string Line = "动态类型切换-折线图"; 144 | public string Stack = "动态类型切换-堆积"; 145 | public string Tiled = "动态类型切换-平铺"; 146 | } 147 | } 148 | 149 | /// 150 | /// 还原 复位原始图表 151 | /// 152 | public class FeatureRestore 153 | { 154 | public FeatureRestore() 155 | { 156 | Show = true; 157 | Title = "还原"; 158 | Color = "black"; 159 | } 160 | 161 | public bool Show { get; set; } 162 | public string Title { get; set; } 163 | public string Color { get; set; } 164 | } 165 | 166 | /// 167 | /// 保存图片（IE8-不支持） 168 | /// 169 | public class FeatureSaveAsImage 170 | { 171 | public string[] Lang = {"点击本地保存"}; 172 | 173 | public string Type = "jpeg"; 174 | 175 | public FeatureSaveAsImage() 176 | { 177 | Show = true; 178 | Title = "保存为图片"; 179 | } 180 | 181 | public bool Show { get; set; } 182 | 183 | public string Title { get; set; } 184 | } 185 | } 186 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Components/TimeLine/TimeLine.cs: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // 3 | // Copyright (C) 2016-2020 湖南心莱信息科技有限公司 4 | // All rights reserved 5 | // 6 | // filename : TimeLine.cs 7 | // description : 8 | // 9 | // created by 李文强 at 2016/09/23 9:12 10 | // Blog：http://www.cnblogs.com/codelove/ 11 | // GitHub ： https://github.com/xin-lai 12 | // Home：http://xin-lai.com 13 | // 14 | // ====================================================================== 15 | 16 | using System.Collections.Generic; 17 | using Magicodes.ECharts.Axis; 18 | using Magicodes.ECharts.CommonDefinitions; 19 | using Magicodes.ECharts.ValueTypes; 20 | using Newtonsoft.Json; 21 | using Newtonsoft.Json.Converters; 22 | 23 | namespace Magicodes.ECharts.Components.TimeLine 24 | { 25 | /// 26 | /// timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。 27 | /// 28 | public class TimeLine 29 | { 30 | public TimeLine() 31 | { 32 | Show = true; 33 | Type = TimeLineTypes.slider; 34 | AxisType = AxisTypes.time; 35 | Loop = true; 36 | PlayInterval = 2000; 37 | Realtime = true; 38 | } 39 | 40 | /// 41 | /// 是否显示 timeline 组件。如果设置为false，不会显示，但是功能还存在。 42 | /// 43 | public bool Show { get; set; } 44 | 45 | /// 46 | /// 这个属性目前只支持为 slider，不需要更改。 47 | /// 48 | [JsonConverter(typeof(StringEnumConverter))] 49 | public TimeLineTypes Type { get; set; } 50 | 51 | /// 52 | /// 坐标轴类型。 53 | /// 54 | [JsonConverter(typeof(StringEnumConverter))] 55 | public AxisTypes AxisType { get; set; } 56 | 57 | /// 58 | /// 表示当前选中项是哪项。比如，currentIndex 为 0 时，表示当前选中项为 timeline.data[0]（即使用 options[0]）。 59 | /// 60 | public int CurrentIndex { get; set; } 61 | 62 | /// 63 | /// 表示是否自动播放。 64 | /// 65 | public bool AutoPlay { get; set; } 66 | 67 | /// 68 | /// 表示是否反向播放。 69 | /// 70 | public bool Rewind { get; set; } 71 | 72 | /// 73 | /// 表示是否循环播放。 74 | /// 75 | public bool Loop { get; set; } 76 | 77 | /// 78 | /// 表示播放的速度（跳动的间隔），单位毫秒（ms）。 79 | /// 80 | public int PlayInterval { get; set; } 81 | 82 | /// 83 | /// 拖动圆点的时候，是否实时更新视图。 84 | /// 85 | public bool Realtime { get; set; } 86 | 87 | /// 88 | /// 表示『播放』按钮的位置。可选值：'left'、'right'。 89 | /// 90 | [JsonConverter(typeof(StringEnumConverter))] 91 | public ControlPositions ControlPosition { get; set; } 92 | 93 | /// 94 | /// gtimeline组件离容器左侧的距离。 95 | /// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。 96 | /// 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。 97 | /// 98 | public ILeftValue Left { get; set; } 99 | 100 | /// 101 | /// timeline组件离容器上侧的距离。 102 | /// top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。 103 | /// 如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。 104 | /// 105 | public ITopValue Top { get; set; } 106 | 107 | /// 108 | /// timeline组件离容器右侧的距离。 109 | /// right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 110 | /// 默认自适应。 111 | /// 112 | public IRightValue Right { get; set; } 113 | 114 | /// 115 | /// timeline组件离容器下侧的距离。 116 | /// bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 117 | /// 默认自适应。 118 | /// 119 | public IBottomValue Bottom { get; set; } 120 | 121 | /// 122 | /// 摆放方式，可选值有： 123 | /// 'vertical'：竖直放置。 124 | /// 'horizontal'：水平放置。 125 | /// 126 | [JsonConverter(typeof(StringEnumConverter))] 127 | public Orients Orient { get; set; } 128 | 129 | /// 130 | /// 是否反向放置 timeline，反向则首位颠倒过来。 131 | /// 132 | public bool Inverse { get; set; } 133 | 134 | /// 135 | /// timeline标记的图形。 136 | /// ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 137 | /// 也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。 138 | /// 在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 symbol 的话就是 139 | /// symbolSize）的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。 140 | /// 141 | public ISymbolValue Symbol { get; set; } 142 | 143 | /// 144 | /// timeline标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 145 | /// [ default: 10 ] 146 | /// 147 | public int? SymbolSize { get; set; } 148 | 149 | /// 150 | /// timeline 数据。Array 的每一项，可以是直接的数值。 如果需要对每个数据项单独进行样式定义，则数据项写成 Object。Object中，value属性为数值。 151 | /// 152 | public List Data { get; set; } 153 | } 154 | } -------------------------------------------------------------------------------- /Magicodes.ECharts/Magicodes.ECharts.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Debug 6 | AnyCPU 7 | {6F82999D-067D-47DE-ADC4-A73D1F2530C8} 8 | Library 9 | Properties 10 | Magicodes.ECharts 11 | Magicodes.ECharts 12 | v4.5 13 | 512 14 | 15 | 16 | true 17 | full 18 | false 19 | bin\Debug\ 20 | DEBUG;TRACE 21 | prompt 22 | 4 23 | 24 | 25 | pdbonly 26 | true 27 | bin\Release\ 28 | TRACE 29 | prompt 30 | 4 31 | 32 | 33 | 34 | ..\packages\Newtonsoft.Json.10.0.3\lib\net45\Newtonsoft.Json.dll 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 | 114 | -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/jquery.validate.unobtrusive.min.js: -------------------------------------------------------------------------------- 1 | /* NUGET: BEGIN LICENSE TEXT 2 | * 3 | * Microsoft grants you the right to use these script files for the sole 4 | * purpose of either: (i) interacting through your browser with the Microsoft 5 | * website or online service, subject to the applicable licensing or use 6 | * terms; or (ii) using the files as included with a Microsoft product subject 7 | * to that product's license terms. Microsoft reserves all other rights to the 8 | * files not expressly granted by Microsoft, whether by implication, estoppel 9 | * or otherwise. Insofar as a script file is dual licensed under GPL, 10 | * Microsoft neither took the code under GPL nor distributes it thereunder but 11 | * under the terms set out in this paragraph. All notices and licenses 12 | * below are for informational purposes only. 13 | * 14 | * NUGET: END LICENSE TEXT */ 15 | /* 16 | ** Unobtrusive validation support library for jQuery and jQuery Validate 17 | ** Copyright (C) Microsoft Corporation. All rights reserved. 18 | */ 19 | (function(a){var d=a.validator,b,e="unobtrusiveValidation";function c(a,b,c){a.rules[b]=c;if(a.message)a.messages[b]=a.message}function j(a){return a.replace(/^\s+|\s+$/g,"").split(/\s*,\s*/g)}function f(a){return a.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g,"\\$1")}function h(a){return a.substr(0,a.lastIndexOf(".")+1)}function g(a,b){if(a.indexOf("*.")===0)a=a.replace("*.",b);return a}function m(c,e){var b=a(this).find("[data-valmsg-for='"+f(e[0].name)+"']"),d=b.attr("data-valmsg-replace"),g=d?a.parseJSON(d)!==false:null;b.removeClass("field-validation-valid").addClass("field-validation-error");c.data("unobtrusiveContainer",b);if(g){b.empty();c.removeClass("input-validation-error").appendTo(b)}else c.hide()}function l(e,d){var c=a(this).find("[data-valmsg-summary=true]"),b=c.find("ul");if(b&&b.length&&d.errorList.length){b.empty();c.addClass("validation-summary-errors").removeClass("validation-summary-valid");a.each(d.errorList,function(){a("
  • ").html(this.message).appendTo(b)})}}function k(d){var b=d.data("unobtrusiveContainer"),c=b.attr("data-valmsg-replace"),e=c?a.parseJSON(c):null;if(b){b.addClass("field-validation-valid").removeClass("field-validation-error");d.removeData("unobtrusiveContainer");e&&b.empty()}}function n(){var b=a(this),c="__jquery_unobtrusive_validation_form_reset";if(b.data(c))return;b.data(c,true);try{b.data("validator").resetForm()}finally{b.removeData(c)}b.find(".validation-summary-errors").addClass("validation-summary-valid").removeClass("validation-summary-errors");b.find(".field-validation-error").addClass("field-validation-valid").removeClass("field-validation-error").removeData("unobtrusiveContainer").find(">*").removeData("unobtrusiveContainer")}function i(b){var c=a(b),f=c.data(e),i=a.proxy(n,b),g=d.unobtrusive.options||{},h=function(e,d){var c=g[e];c&&a.isFunction(c)&&c.apply(b,d)};if(!f){f={options:{errorClass:g.errorClass||"input-validation-error",errorElement:g.errorElement||"span",errorPlacement:function(){m.apply(b,arguments);h("errorPlacement",arguments)},invalidHandler:function(){l.apply(b,arguments);h("invalidHandler",arguments)},messages:{},rules:{},success:function(){k.apply(b,arguments);h("success",arguments)}},attachValidation:function(){c.off("reset."+e,i).on("reset."+e,i).validate(this.options)},validate:function(){c.validate();return c.valid()}};c.data(e,f)}return f}d.unobtrusive={adapters:[],parseElement:function(b,h){var d=a(b),f=d.parents("form")[0],c,e,g;if(!f)return;c=i(f);c.options.rules[b.name]=e={};c.options.messages[b.name]=g={};a.each(this.adapters,function(){var c="data-val-"+this.name,i=d.attr(c),h={};if(i!==undefined){c+="-";a.each(this.params,function(){h[this]=d.attr(c+this)});this.adapt({element:b,form:f,message:i,params:h,rules:e,messages:g})}});a.extend(e,{__dummy__:true});!h&&c.attachValidation()},parse:function(c){var b=a(c),e=b.parents().addBack().filter("form").add(b.find("form")).has("[data-val=true]");b.find("[data-val=true]").each(function(){d.unobtrusive.parseElement(this,true)});e.each(function(){var a=i(this);a&&a.attachValidation()})}};b=d.unobtrusive.adapters;b.add=function(c,a,b){if(!b){b=a;a=[]}this.push({name:c,params:a,adapt:b});return this};b.addBool=function(a,b){return this.add(a,function(d){c(d,b||a,true)})};b.addMinMax=function(e,g,f,a,d,b){return this.add(e,[d||"min",b||"max"],function(b){var e=b.params.min,d=b.params.max;if(e&&d)c(b,a,[e,d]);else if(e)c(b,g,e);else d&&c(b,f,d)})};b.addSingleVal=function(a,b,d){return this.add(a,[b||"val"],function(e){c(e,d||a,e.params[b])})};d.addMethod("__dummy__",function(){return true});d.addMethod("regex",function(b,c,d){var a;if(this.optional(c))return true;a=(new RegExp(d)).exec(b);return a&&a.index===0&&a[0].length===b.length});d.addMethod("nonalphamin",function(c,d,b){var a;if(b){a=c.match(/\W/g);a=a&&a.length>=b}return a});if(d.methods.extension){b.addSingleVal("accept","mimtype");b.addSingleVal("extension","extension")}else b.addSingleVal("extension","extension","accept");b.addSingleVal("regex","pattern");b.addBool("creditcard").addBool("date").addBool("digits").addBool("email").addBool("number").addBool("url");b.addMinMax("length","minlength","maxlength","rangelength").addMinMax("range","min","max","range");b.addMinMax("minlength","minlength").addMinMax("maxlength","minlength","maxlength");b.add("equalto",["other"],function(b){var i=h(b.element.name),j=b.params.other,d=g(j,i),e=a(b.form).find(":input").filter("[name='"+f(d)+"']")[0];c(b,"equalTo",e)});b.add("required",function(a){(a.element.tagName.toUpperCase()!=="INPUT"||a.element.type.toUpperCase()!=="CHECKBOX")&&c(a,"required",true)});b.add("remote",["url","type","additionalfields"],function(b){var d={url:b.params.url,type:b.params.type||"GET",data:{}},e=h(b.element.name);a.each(j(b.params.additionalfields||b.element.name),function(i,h){var c=g(h,e);d.data[c]=function(){var d=a(b.form).find(":input").filter("[name='"+f(c)+"']");return d.is(":checkbox")?d.filter(":checked").val()||d.filter(":hidden").val()||"":d.is(":radio")?d.filter(":checked").val()||"":d.val()}});c(b,"remote",d)});b.add("password",["min","nonalphamin","regex"],function(a){a.params.min&&c(a,"minlength",a.params.min);a.params.nonalphamin&&c(a,"nonalphamin",a.params.nonalphamin);a.params.regex&&c(a,"regex",a.params.regex)});a(function(){d.unobtrusive.parse(document)})})(jQuery); -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/plugins/echart/theme/macarons.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof define === "function" && define.amd) { 3 | // AMD. Register as an anonymous module. 4 | define(["exports", "echarts"], factory); 5 | } else if (typeof exports === "object" && typeof exports.nodeName !== "string") { 6 | // CommonJS 7 | factory(exports, require("echarts")); 8 | } else { 9 | // Browser globals 10 | factory({}, root.echarts); 11 | } 12 | }(this, 13 | function(exports, echarts) { 14 | var log = function(msg) { 15 | if (typeof console !== "undefined") { 16 | console && console.error && console.error(msg); 17 | } 18 | }; 19 | if (!echarts) { 20 | log("ECharts is not Loaded"); 21 | return; 22 | } 23 | 24 | var colorPalette = [ 25 | "#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", 26 | "#8d98b3", "#e5cf0d", "#97b552", "#95706d", "#dc69aa", 27 | "#07a2a4", "#9a7fd1", "#588dd5", "#f5994e", "#c05050", 28 | "#59678c", "#c9ab00", "#7eb00a", "#6f5553", "#c14089" 29 | ]; 30 | 31 | 32 | var theme = { 33 | color: colorPalette, 34 | 35 | title: { 36 | textStyle: { 37 | fontWeight: "normal", 38 | color: "#008acd" 39 | } 40 | }, 41 | 42 | visualMap: { 43 | itemWidth: 15, 44 | color: ["#5ab1ef", "#e0ffff"] 45 | }, 46 | 47 | toolbox: { 48 | iconStyle: { 49 | normal: { 50 | borderColor: colorPalette[0] 51 | } 52 | } 53 | }, 54 | 55 | tooltip: { 56 | backgroundColor: "rgba(50,50,50,0.5)", 57 | axisPointer: { 58 | type: "line", 59 | lineStyle: { 60 | color: "#008acd" 61 | }, 62 | crossStyle: { 63 | color: "#008acd" 64 | }, 65 | shadowStyle: { 66 | color: "rgba(200,200,200,0.2)" 67 | } 68 | } 69 | }, 70 | 71 | dataZoom: { 72 | dataBackgroundColor: "#efefff", 73 | fillerColor: "rgba(182,162,222,0.2)", 74 | handleColor: "#008acd" 75 | }, 76 | 77 | grid: { 78 | borderColor: "#eee" 79 | }, 80 | 81 | categoryAxis: { 82 | axisLine: { 83 | lineStyle: { 84 | color: "#008acd" 85 | } 86 | }, 87 | splitLine: { 88 | lineStyle: { 89 | color: ["#eee"] 90 | } 91 | } 92 | }, 93 | 94 | valueAxis: { 95 | axisLine: { 96 | lineStyle: { 97 | color: "#008acd" 98 | } 99 | }, 100 | splitArea: { 101 | show: true, 102 | areaStyle: { 103 | color: ["rgba(250,250,250,0.1)", "rgba(200,200,200,0.1)"] 104 | } 105 | }, 106 | splitLine: { 107 | lineStyle: { 108 | color: ["#eee"] 109 | } 110 | } 111 | }, 112 | 113 | timeline: { 114 | lineStyle: { 115 | color: "#008acd" 116 | }, 117 | controlStyle: { 118 | normal: { color: "#008acd" }, 119 | emphasis: { color: "#008acd" } 120 | }, 121 | symbol: "emptyCircle", 122 | symbolSize: 3 123 | }, 124 | 125 | line: { 126 | smooth: true, 127 | symbol: "emptyCircle", 128 | symbolSize: 3 129 | }, 130 | 131 | candlestick: { 132 | itemStyle: { 133 | normal: { 134 | color: "#d87a80", 135 | color0: "#2ec7c9", 136 | lineStyle: { 137 | color: "#d87a80", 138 | color0: "#2ec7c9" 139 | } 140 | } 141 | } 142 | }, 143 | 144 | scatter: { 145 | symbol: "circle", 146 | symbolSize: 4 147 | }, 148 | 149 | map: { 150 | label: { 151 | normal: { 152 | textStyle: { 153 | color: "#d87a80" 154 | } 155 | } 156 | }, 157 | itemStyle: { 158 | normal: { 159 | borderColor: "#eee", 160 | areaColor: "#ddd" 161 | }, 162 | emphasis: { 163 | areaColor: "#fe994e" 164 | } 165 | } 166 | }, 167 | 168 | graph: { 169 | color: colorPalette 170 | }, 171 | 172 | gauge: { 173 | axisLine: { 174 | lineStyle: { 175 | color: [[0.2, "#2ec7c9"], [0.8, "#5ab1ef"], [1, "#d87a80"]], 176 | width: 10 177 | } 178 | }, 179 | axisTick: { 180 | splitNumber: 10, 181 | length: 15, 182 | lineStyle: { 183 | color: "auto" 184 | } 185 | }, 186 | splitLine: { 187 | length: 22, 188 | lineStyle: { 189 | color: "auto" 190 | } 191 | }, 192 | pointer: { 193 | width: 5 194 | } 195 | } 196 | }; 197 | 198 | echarts.registerTheme("macarons", theme); 199 | })); -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/plugins/echart/theme/infographic.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof define === "function" && define.amd) { 3 | // AMD. Register as an anonymous module. 4 | define(["exports", "echarts"], factory); 5 | } else if (typeof exports === "object" && typeof exports.nodeName !== "string") { 6 | // CommonJS 7 | factory(exports, require("echarts")); 8 | } else { 9 | // Browser globals 10 | factory({}, root.echarts); 11 | } 12 | }(this, 13 | function(exports, echarts) { 14 | var log = function(msg) { 15 | if (typeof console !== "undefined") { 16 | console && console.error && console.error(msg); 17 | } 18 | }; 19 | if (!echarts) { 20 | log("ECharts is not Loaded"); 21 | return; 22 | } 23 | 24 | var colorPalette = [ 25 | "#C1232B", "#27727B", "#FCCE10", "#E87C25", "#B5C334", 26 | "#FE8463", "#9BCA63", "#FAD860", "#F3A43B", "#60C0DD", 27 | "#D7504B", "#C6E579", "#F4E001", "#F0805A", "#26C0C0" 28 | ]; 29 | 30 | var theme = { 31 | color: colorPalette, 32 | 33 | title: { 34 | textStyle: { 35 | fontWeight: "normal", 36 | color: "#27727B" 37 | } 38 | }, 39 | 40 | visualMap: { 41 | color: ["#C1232B", "#FCCE10"] 42 | }, 43 | 44 | toolbox: { 45 | iconStyle: { 46 | normal: { 47 | borderColor: colorPalette[0] 48 | } 49 | } 50 | }, 51 | 52 | tooltip: { 53 | backgroundColor: "rgba(50,50,50,0.5)", 54 | axisPointer: { 55 | type: "line", 56 | lineStyle: { 57 | color: "#27727B", 58 | type: "dashed" 59 | }, 60 | crossStyle: { 61 | color: "#27727B" 62 | }, 63 | shadowStyle: { 64 | color: "rgba(200,200,200,0.3)" 65 | } 66 | } 67 | }, 68 | 69 | dataZoom: { 70 | dataBackgroundColor: "rgba(181,195,52,0.3)", 71 | fillerColor: "rgba(181,195,52,0.2)", 72 | handleColor: "#27727B" 73 | }, 74 | 75 | categoryAxis: { 76 | axisLine: { 77 | lineStyle: { 78 | color: "#27727B" 79 | } 80 | }, 81 | splitLine: { 82 | show: false 83 | } 84 | }, 85 | 86 | valueAxis: { 87 | axisLine: { 88 | show: false 89 | }, 90 | splitArea: { 91 | show: false 92 | }, 93 | splitLine: { 94 | lineStyle: { 95 | color: ["#ccc"], 96 | type: "dashed" 97 | } 98 | } 99 | }, 100 | 101 | timeline: { 102 | lineStyle: { 103 | color: "#27727B" 104 | }, 105 | controlStyle: { 106 | normal: { 107 | color: "#27727B", 108 | borderColor: "#27727B" 109 | } 110 | }, 111 | symbol: "emptyCircle", 112 | symbolSize: 3 113 | }, 114 | 115 | line: { 116 | itemStyle: { 117 | normal: { 118 | borderWidth: 2, 119 | borderColor: "#fff", 120 | lineStyle: { 121 | width: 3 122 | } 123 | }, 124 | emphasis: { 125 | borderWidth: 0 126 | } 127 | }, 128 | symbol: "circle", 129 | symbolSize: 3.5 130 | }, 131 | 132 | candlestick: { 133 | itemStyle: { 134 | normal: { 135 | color: "#C1232B", 136 | color0: "#B5C334", 137 | lineStyle: { 138 | width: 1, 139 | color: "#C1232B", 140 | color0: "#B5C334" 141 | } 142 | } 143 | } 144 | }, 145 | 146 | graph: { 147 | color: colorPalette 148 | }, 149 | 150 | map: { 151 | label: { 152 | normal: { 153 | textStyle: { 154 | color: "#C1232B" 155 | } 156 | }, 157 | emphasis: { 158 | textStyle: { 159 | color: "rgb(100,0,0)" 160 | } 161 | } 162 | }, 163 | itemStyle: { 164 | normal: { 165 | areaColor: "#ddd", 166 | borderColor: "#eee" 167 | }, 168 | emphasis: { 169 | areaColor: "#fe994e" 170 | } 171 | } 172 | }, 173 | 174 | gauge: { 175 | axisLine: { 176 | lineStyle: { 177 | color: [[0.2, "#B5C334"], [0.8, "#27727B"], [1, "#C1232B"]] 178 | } 179 | }, 180 | axisTick: { 181 | splitNumber: 2, 182 | length: 5, 183 | lineStyle: { 184 | color: "#fff" 185 | } 186 | }, 187 | axisLabel: { 188 | textStyle: { 189 | color: "#fff" 190 | } 191 | }, 192 | splitLine: { 193 | length: "5%", 194 | lineStyle: { 195 | color: "#fff" 196 | } 197 | }, 198 | title: { 199 | offsetCenter: [0, -20] 200 | } 201 | } 202 | }; 203 | 204 | echarts.registerTheme("infographic", theme); 205 | })); -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/respond.js: -------------------------------------------------------------------------------- 1 | /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ 2 | /*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */ 3 | (function(w) { 4 | "use strict"; 5 | w.matchMedia = w.matchMedia || function(doc, undefined) { 6 | var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div"); 7 | div.id = "mq-test-1"; 8 | div.style.cssText = "position:absolute;top:-100em"; 9 | fakeBody.style.background = "none"; 10 | fakeBody.appendChild(div); 11 | return function(q) { 12 | div.innerHTML = '­'; 13 | docElem.insertBefore(fakeBody, refNode); 14 | bool = div.offsetWidth === 42; 15 | docElem.removeChild(fakeBody); 16 | return { 17 | matches: bool, 18 | media: q 19 | }; 20 | }; 21 | }(w.document); 22 | })(this); 23 | 24 | /*! Respond.js v1.4.0: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */ 25 | (function(w) { 26 | "use strict"; 27 | var respond = {}; 28 | w.respond = respond; 29 | respond.update = function() {}; 30 | var requestQueue = [], xmlHttp = function() { 31 | var xmlhttpmethod = false; 32 | try { 33 | xmlhttpmethod = new w.XMLHttpRequest(); 34 | } catch (e) { 35 | xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP"); 36 | } 37 | return function() { 38 | return xmlhttpmethod; 39 | }; 40 | }(), ajax = function(url, callback) { 41 | var req = xmlHttp(); 42 | if (!req) { 43 | return; 44 | } 45 | req.open("GET", url, true); 46 | req.onreadystatechange = function() { 47 | if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) { 48 | return; 49 | } 50 | callback(req.responseText); 51 | }; 52 | if (req.readyState === 4) { 53 | return; 54 | } 55 | req.send(null); 56 | }; 57 | respond.ajax = ajax; 58 | respond.queue = requestQueue; 59 | respond.regex = { 60 | media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi, 61 | keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi, 62 | urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, 63 | findStyles: /@media *([^\{]+)\{([\S\s]+?)$/, 64 | only: /(only\s+)?([a-zA-Z]+)\s?/, 65 | minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/, 66 | maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ 67 | }; 68 | respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches; 69 | if (respond.mediaQueriesSupported) { 70 | return; 71 | } 72 | var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() { 73 | var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false; 74 | div.style.cssText = "position:absolute;font-size:1em;width:1em"; 75 | if (!body) { 76 | body = fakeUsed = doc.createElement("body"); 77 | body.style.background = "none"; 78 | } 79 | docElem.style.fontSize = "100%"; 80 | body.style.fontSize = "100%"; 81 | body.appendChild(div); 82 | if (fakeUsed) { 83 | docElem.insertBefore(body, docElem.firstChild); 84 | } 85 | ret = div.offsetWidth; 86 | if (fakeUsed) { 87 | docElem.removeChild(body); 88 | } else { 89 | body.removeChild(div); 90 | } 91 | docElem.style.fontSize = originalHTMLFontSize; 92 | if (originalBodyFontSize) { 93 | body.style.fontSize = originalBodyFontSize; 94 | } 95 | ret = eminpx = parseFloat(ret); 96 | return ret; 97 | }, applyMedia = function(fromResize) { 98 | var name = "clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime(); 99 | if (fromResize && lastCall && now - lastCall < resizeThrottle) { 100 | w.clearTimeout(resizeDefer); 101 | resizeDefer = w.setTimeout(applyMedia, resizeThrottle); 102 | return; 103 | } else { 104 | lastCall = now; 105 | } 106 | for (var i in mediastyles) { 107 | if (mediastyles.hasOwnProperty(i)) { 108 | var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em"; 109 | if (!!min) { 110 | min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1); 111 | } 112 | if (!!max) { 113 | max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1); 114 | } 115 | if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) { 116 | if (!styleBlocks[thisstyle.media]) { 117 | styleBlocks[thisstyle.media] = []; 118 | } 119 | styleBlocks[thisstyle.media].push(rules[thisstyle.rules]); 120 | } 121 | } 122 | } 123 | for (var j in appendedEls) { 124 | if (appendedEls.hasOwnProperty(j)) { 125 | if (appendedEls[j] && appendedEls[j].parentNode === head) { 126 | head.removeChild(appendedEls[j]); 127 | } 128 | } 129 | } 130 | appendedEls.length = 0; 131 | for (var k in styleBlocks) { 132 | if (styleBlocks.hasOwnProperty(k)) { 133 | var ss = doc.createElement("style"), css = styleBlocks[k].join("\n"); 134 | ss.type = "text/css"; 135 | ss.media = k; 136 | head.insertBefore(ss, lastLink.nextSibling); 137 | if (ss.styleSheet) { 138 | ss.styleSheet.cssText = css; 139 | } else { 140 | ss.appendChild(doc.createTextNode(css)); 141 | } 142 | appendedEls.push(ss); 143 | } 144 | } 145 | }, translate = function(styles, href, media) { 146 | var qs = styles.replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0; 147 | href = href.substring(0, href.lastIndexOf("/")); 148 | var repUrls = function(css) { 149 | return css.replace(respond.regex.urls, "$1" + href + "$2$3"); 150 | }, useMedia = !ql && media; 151 | if (href.length) { 152 | href += "/"; 153 | } 154 | if (useMedia) { 155 | ql = 1; 156 | } 157 | for (var i = 0; i < ql; i++) { 158 | var fullq, thisq, eachq, eql; 159 | if (useMedia) { 160 | fullq = media; 161 | rules.push(repUrls(styles)); 162 | } else { 163 | fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1; 164 | rules.push(RegExp.$2 && repUrls(RegExp.$2)); 165 | } 166 | eachq = fullq.split(","); 167 | eql = eachq.length; 168 | for (var j = 0; j < eql; j++) { 169 | thisq = eachq[j]; 170 | mediastyles.push({ 171 | media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all", 172 | rules: rules.length - 1, 173 | hasquery: thisq.indexOf("(") > -1, 174 | minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""), 175 | maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "") 176 | }); 177 | } 178 | } 179 | applyMedia(); 180 | }, makeRequests = function() { 181 | if (requestQueue.length) { 182 | var thisRequest = requestQueue.shift(); 183 | ajax(thisRequest.href, function(styles) { 184 | translate(styles, thisRequest.href, thisRequest.media); 185 | parsedSheets[thisRequest.href] = true; 186 | w.setTimeout(function() { 187 | makeRequests(); 188 | }, 0); 189 | }); 190 | } 191 | }, ripCSS = function() { 192 | for (var i = 0; i < links.length; i++) { 193 | var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet"; 194 | if (!!href && isCSS && !parsedSheets[href]) { 195 | if (sheet.styleSheet && sheet.styleSheet.rawCssText) { 196 | translate(sheet.styleSheet.rawCssText, href, media); 197 | parsedSheets[href] = true; 198 | } else { 199 | if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) { 200 | if (href.substring(0, 2) === "//") { 201 | href = w.location.protocol + href; 202 | } 203 | requestQueue.push({ 204 | href: href, 205 | media: media 206 | }); 207 | } 208 | } 209 | } 210 | } 211 | makeRequests(); 212 | }; 213 | ripCSS(); 214 | respond.update = ripCSS; 215 | respond.getEmValue = getEmValue; 216 | function callMedia() { 217 | applyMedia(true); 218 | } 219 | if (w.addEventListener) { 220 | w.addEventListener("resize", callMedia, false); 221 | } else if (w.attachEvent) { 222 | w.attachEvent("onresize", callMedia); 223 | } 224 | })(this); -------------------------------------------------------------------------------- /Magicodes.ECharts.Demo/Scripts/respond.matchmedia.addListener.js: -------------------------------------------------------------------------------- 1 | /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ 2 | /*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */ 3 | (function(w) { 4 | "use strict"; 5 | w.matchMedia = w.matchMedia || function(doc, undefined) { 6 | var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div"); 7 | div.id = "mq-test-1"; 8 | div.style.cssText = "position:absolute;top:-100em"; 9 | fakeBody.style.background = "none"; 10 | fakeBody.appendChild(div); 11 | return function(q) { 12 | div.innerHTML = '­'; 13 | docElem.insertBefore(fakeBody, refNode); 14 | bool = div.offsetWidth === 42; 15 | docElem.removeChild(fakeBody); 16 | return { 17 | matches: bool, 18 | media: q 19 | }; 20 | }; 21 | }(w.document); 22 | })(this); 23 | 24 | /*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */ 25 | (function(w) { 26 | "use strict"; 27 | if (w.matchMedia && w.matchMedia("all").addListener) { 28 | return false; 29 | } 30 | var localMatchMedia = w.matchMedia, hasMediaQueries = localMatchMedia("only all").matches, isListening = false, timeoutID = 0, queries = [], handleChange = function(evt) { 31 | w.clearTimeout(timeoutID); 32 | timeoutID = w.setTimeout(function() { 33 | for (var i = 0, il = queries.length; i < il; i++) { 34 | var mql = queries[i].mql, listeners = queries[i].listeners || [], matches = localMatchMedia(mql.media).matches; 35 | if (matches !== mql.matches) { 36 | mql.matches = matches; 37 | for (var j = 0, jl = listeners.length; j < jl; j++) { 38 | listeners[j].call(w, mql); 39 | } 40 | } 41 | } 42 | }, 30); 43 | }; 44 | w.matchMedia = function(media) { 45 | var mql = localMatchMedia(media), listeners = [], index = 0; 46 | mql.addListener = function(listener) { 47 | if (!hasMediaQueries) { 48 | return; 49 | } 50 | if (!isListening) { 51 | isListening = true; 52 | w.addEventListener("resize", handleChange, true); 53 | } 54 | if (index === 0) { 55 | index = queries.push({ 56 | mql: mql, 57 | listeners: listeners 58 | }); 59 | } 60 | listeners.push(listener); 61 | }; 62 | mql.removeListener = function(listener) { 63 | for (var i = 0, il = listeners.length; i < il; i++) { 64 | if (listeners[i] === listener) { 65 | listeners.splice(i, 1); 66 | } 67 | } 68 | }; 69 | return mql; 70 | }; 71 | })(this); 72 | 73 | /*! Respond.js v1.4.0: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */ 74 | (function(w) { 75 | "use strict"; 76 | var respond = {}; 77 | w.respond = respond; 78 | respond.update = function() {}; 79 | var requestQueue = [], xmlHttp = function() { 80 | var xmlhttpmethod = false; 81 | try { 82 | xmlhttpmethod = new w.XMLHttpRequest(); 83 | } catch (e) { 84 | xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP"); 85 | } 86 | return function() { 87 | return xmlhttpmethod; 88 | }; 89 | }(), ajax = function(url, callback) { 90 | var req = xmlHttp(); 91 | if (!req) { 92 | return; 93 | } 94 | req.open("GET", url, true); 95 | req.onreadystatechange = function() { 96 | if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) { 97 | return; 98 | } 99 | callback(req.responseText); 100 | }; 101 | if (req.readyState === 4) { 102 | return; 103 | } 104 | req.send(null); 105 | }; 106 | respond.ajax = ajax; 107 | respond.queue = requestQueue; 108 | respond.regex = { 109 | media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi, 110 | keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi, 111 | urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, 112 | findStyles: /@media *([^\{]+)\{([\S\s]+?)$/, 113 | only: /(only\s+)?([a-zA-Z]+)\s?/, 114 | minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/, 115 | maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ 116 | }; 117 | respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches; 118 | if (respond.mediaQueriesSupported) { 119 | return; 120 | } 121 | var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() { 122 | var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false; 123 | div.style.cssText = "position:absolute;font-size:1em;width:1em"; 124 | if (!body) { 125 | body = fakeUsed = doc.createElement("body"); 126 | body.style.background = "none"; 127 | } 128 | docElem.style.fontSize = "100%"; 129 | body.style.fontSize = "100%"; 130 | body.appendChild(div); 131 | if (fakeUsed) { 132 | docElem.insertBefore(body, docElem.firstChild); 133 | } 134 | ret = div.offsetWidth; 135 | if (fakeUsed) { 136 | docElem.removeChild(body); 137 | } else { 138 | body.removeChild(div); 139 | } 140 | docElem.style.fontSize = originalHTMLFontSize; 141 | if (originalBodyFontSize) { 142 | body.style.fontSize = originalBodyFontSize; 143 | } 144 | ret = eminpx = parseFloat(ret); 145 | return ret; 146 | }, applyMedia = function(fromResize) { 147 | var name = "clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime(); 148 | if (fromResize && lastCall && now - lastCall < resizeThrottle) { 149 | w.clearTimeout(resizeDefer); 150 | resizeDefer = w.setTimeout(applyMedia, resizeThrottle); 151 | return; 152 | } else { 153 | lastCall = now; 154 | } 155 | for (var i in mediastyles) { 156 | if (mediastyles.hasOwnProperty(i)) { 157 | var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em"; 158 | if (!!min) { 159 | min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1); 160 | } 161 | if (!!max) { 162 | max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1); 163 | } 164 | if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) { 165 | if (!styleBlocks[thisstyle.media]) { 166 | styleBlocks[thisstyle.media] = []; 167 | } 168 | styleBlocks[thisstyle.media].push(rules[thisstyle.rules]); 169 | } 170 | } 171 | } 172 | for (var j in appendedEls) { 173 | if (appendedEls.hasOwnProperty(j)) { 174 | if (appendedEls[j] && appendedEls[j].parentNode === head) { 175 | head.removeChild(appendedEls[j]); 176 | } 177 | } 178 | } 179 | appendedEls.length = 0; 180 | for (var k in styleBlocks) { 181 | if (styleBlocks.hasOwnProperty(k)) { 182 | var ss = doc.createElement("style"), css = styleBlocks[k].join("\n"); 183 | ss.type = "text/css"; 184 | ss.media = k; 185 | head.insertBefore(ss, lastLink.nextSibling); 186 | if (ss.styleSheet) { 187 | ss.styleSheet.cssText = css; 188 | } else { 189 | ss.appendChild(doc.createTextNode(css)); 190 | } 191 | appendedEls.push(ss); 192 | } 193 | } 194 | }, translate = function(styles, href, media) { 195 | var qs = styles.replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0; 196 | href = href.substring(0, href.lastIndexOf("/")); 197 | var repUrls = function(css) { 198 | return css.replace(respond.regex.urls, "$1" + href + "$2$3"); 199 | }, useMedia = !ql && media; 200 | if (href.length) { 201 | href += "/"; 202 | } 203 | if (useMedia) { 204 | ql = 1; 205 | } 206 | for (var i = 0; i < ql; i++) { 207 | var fullq, thisq, eachq, eql; 208 | if (useMedia) { 209 | fullq = media; 210 | rules.push(repUrls(styles)); 211 | } else { 212 | fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1; 213 | rules.push(RegExp.$2 && repUrls(RegExp.$2)); 214 | } 215 | eachq = fullq.split(","); 216 | eql = eachq.length; 217 | for (var j = 0; j < eql; j++) { 218 | thisq = eachq[j]; 219 | mediastyles.push({ 220 | media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all", 221 | rules: rules.length - 1, 222 | hasquery: thisq.indexOf("(") > -1, 223 | minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""), 224 | maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "") 225 | }); 226 | } 227 | } 228 | applyMedia(); 229 | }, makeRequests = function() { 230 | if (requestQueue.length) { 231 | var thisRequest = requestQueue.shift(); 232 | ajax(thisRequest.href, function(styles) { 233 | translate(styles, thisRequest.href, thisRequest.media); 234 | parsedSheets[thisRequest.href] = true; 235 | w.setTimeout(function() { 236 | makeRequests(); 237 | }, 0); 238 | }); 239 | } 240 | }, ripCSS = function() { 241 | for (var i = 0; i < links.length; i++) { 242 | var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet"; 243 | if (!!href && isCSS && !parsedSheets[href]) { 244 | if (sheet.styleSheet && sheet.styleSheet.rawCssText) { 245 | translate(sheet.styleSheet.rawCssText, href, media); 246 | parsedSheets[href] = true; 247 | } else { 248 | if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) { 249 | if (href.substring(0, 2) === "//") { 250 | href = w.location.protocol + href; 251 | } 252 | requestQueue.push({ 253 | href: href, 254 | media: media 255 | }); 256 | } 257 | } 258 | } 259 | } 260 | makeRequests(); 261 | }; 262 | ripCSS(); 263 | respond.update = ripCSS; 264 | respond.getEmValue = getEmValue; 265 | function callMedia() { 266 | applyMedia(true); 267 | } 268 | if (w.addEventListener) { 269 | w.addEventListener("resize", callMedia, false); 270 | } else if (w.attachEvent) { 271 | w.attachEvent("onresize", callMedia); 272 | } 273 | })(this); --------------------------------------------------------------------------------