開源庫Magicodes.ECharts使用教程概要Magicodes.ECharts工作原理Magicodes.EchartsJs5分鐘上手Magicodes.EChart相關示例

<a href="#_Toc464427086">2 Magicodes.ECharts工作原理 3</a>

<a href="#_Toc464427089">2.1.2 CommonDefinitions 4</a>

<a href="#_Toc464427090">2.1.3 Components 4</a>

<a href="#_Toc464427091">2.1.4 JsonConverter 4</a>

<a href="#_Toc464427092">2.2 Series 6</a>

<a href="#_Toc464427093">2.3 ValueTypes 6</a>

<a href="#_Toc464427094">2.4 EChartsOptions 7</a>

<a href="#_Toc464427095">2.5 TimelineOptions 8</a>

<a href="#_Toc464427096">3 Magicodes.EchartsJs 8</a>

<a href="#_Toc464427100">4 5分鐘上手Magicodes.EChart 9</a>

<a href="#_Toc464427101">4.1 擷取EChart 9</a>

<a href="#_Toc464427102">4.2 引用Magicodes.ECharts 9</a>

<a href="#_Toc464427103">4.3 引用Echart相關腳本 10</a>

<a href="#_Toc464427104">4.4 編寫第一個圖表 11</a>

<a href="#_Toc464427105">4.4.1 編寫控制器代碼 11</a>

<a href="#_Toc464427106">4.4.2 編寫前端代碼 12</a>

<a href="#_Toc464427108">4.5 編寫動态圖表 13</a>

部落格使用Word發博，釋出後，排版會出現很多問題，一一修正工作量極大，敬請諒解。可加群擷取原始文檔。

Magicodes.ECharts是心萊團隊基于百度EChart封裝的開源的.NET類庫，以便讓使用者更快更便捷的上手開發EChart圖表。本篇主要講解Magicodes.ECharts的相關使用。

在開始之前，您需要了解以下内容：

Magicodes.ECharts是基于百度EChart封裝的開源的.NET類庫，封裝的目的便于使用強類型語言限制背景代碼，以便于更好維護和重構代碼，并且封裝自身業務

Magicodes.EChartsJS是基于knockoutJs封裝的元件，結合Magicodes.ECharts能夠很友善的利用Ajax加載Echart圖表

目前Magicodes.ECharts已經支援大部分圖表，但是尚不能支援所有圖表和所有情形

本着按需設計的原則，在遇到不支援的情形，希望您能夠自行擴充并貢獻自己的代碼。衆人拾材火焰高，Magicodes.ECharts在不斷地實踐中會更加完善的

在設計上，我們不會過多設計，但是後續版本可能會不斷地進行重構

Magicodes.ECharts目前主要由以下部分組成：

直角坐标系 grid 中的軸的相關配置封裝，比如x軸、y軸等。

通用定義，目前定義了以下内容：

Align（水準對齊）

Label（标簽）

Orients（圖例清單的布局朝向）

Symbols（标記的圖形）

TextAlign（标題文本水準對齊）

TextStyles（文本樣式）

VerticalAlign（垂直對齊）

元件定義。目前定義了以下内容：

DataZoom（區域縮放）

DataZoomInside（内置型資料區域縮放元件）

DataZoomSlider（滑動條型資料區域縮放元件）

Grid（直角坐标系内繪圖網格）

Legend（圖例元件）

TimeLine（timeline 元件）

Title（标題）

ToolBox（工具箱）

ToolTip（提示框元件）

定義了一些自定義實作的JSON轉換器，依賴自JSON.NET。

ValueConverter

ValueConverter用于相關值JSON轉換，需要實作IValue<T>接口。如下面例子：

/// <summary>

/// 小數數組

/// </summary>

[JsonConverter(typeof(ValueConverter<double[]>))]

public class ArrayNumberValue : IValue<double[]>, INumberOrArrayNumberValue

{

public double[] Value { get; set; }

}

/// 數值

[JsonConverter(typeof(ValueConverter<double>))]

public class NumberValue : ILeftValue, ITopValue, IRightValue, IBottomValue, IValue<double>, INumberOrArrayNumberValue, INumberOrStringValue

public NumberValue(double? value = null)

if (value.HasValue)

Value = value.Value;

public double Value { get; set; }

接下來，在DataZoom元件上用到了我們的定義，如下所示：

public abstract class DataZoom

….省略其他代碼

/// 設定 dataZoom-inside 元件控制的 y軸（即yAxis，是直角坐标系中的概念，參見 grid）。

/// 不指定時，當 dataZoom-inside.orient 為 'vertical'時，預設控制和 dataZoom 平行的第一個 yAxis。但是不建議使用預設值，建議顯式指定。

/// 如果是 number 表示控制一個軸，如果是 Array 表示控制多個軸。

public INumberOrArrayNumberValue XAxisIndex { get; set; }

在使用時，我們可以這樣指派：

new DataZoomInside()

Start=30,

End=70,

XAxisIndex=new ArrayNumberValue() {Value=new double[] { 0,1} }

當然也可以給其賦予數值：

//XAxisIndex=new ArrayNumberValue() {Value=new double[] { 0,1} }

XAxisIndex=new NumberValue(1)

在生成JSON時，改轉換器會生成對應正确的JSON，如下圖所示：

定義了系列。每個系列通過 Type 決定自己的圖表類型。

目前定義有：

BarSeries

LineSeries

其他圖表類型大都可以通過執行個體化基類然後指定系列類型

值類型。因EChart的許多屬性配置均可以支援不同的資料類型和對象，Magicodes.Echarts特對此進行了封裝，以進行限制。目前定義有以下值類型：

AlignValue

ArrayNumberValue

DoubleValue

IBottomValue

ILeftValue

INumberOrArrayNumberValue

INumberOrStringValue

IRightValue

ISymbolValue

ITopValue

IValue

NumberValue

StringValue

SymbolValue

VerticalAlignValue

具體使用請參考本架構源碼。

EChart配置基類。允許設定各個元件和對象來定義Echart。

如下面Demo：

[HttpGet]

public JavaScriptJsonResult Demo1()

var provinces = new List<object>() { "嶽陽", "長沙", "北京", "上海", "武漢", "貴州", "大連", "成都", "深圳" };

var valueList = new List<object>() { 50, 100, 130, 39, 31, 66, 11, 34, 9 };

var chartOptions = new EChartsOption

Title = new Title("粉絲分布統計圖") { Left = new AlignValue(Align.center) },

Series = new Series.Series[]

new BarSeries

Name = "粉絲分布",

Data = valueList,

MarkPoint = new MarkPoint

Data = new List<MarkData>

new MarkData {Type = MarkPointDataTypes.max, Name = "最大值"},

new MarkData {Type = MarkPointDataTypes.min, Name = "最小值"}

MarkLine = new MarkLine

new MarkData {Type = MarkPointDataTypes.average, Name = "平均值"}

XAxis = new XAxis[1] { new XAxis { Type = AxisTypes.category, Data = provinces } },

YAxis = new YAxis[1] { new YAxis { Type = AxisTypes.value } }

};

return this.ToEChartResult(chartOptions);

Timeline配置基類。允許設定各個元件和對象來定義Echart。

Magicodes.EChartsJs為針對Echart封裝的Ajax加載的knockoutjs庫，需要依賴以下javascript庫：

Jquery

Knockoutjs

關于Magicodes.EChartsJs，你可以在開源庫源碼中的項目Magicodes.ECharts.Demo找到。

該元件主要有以下配置：

基于window.mcs.echarts.settings進行配置，比如設定全局主題：

mcs.echarts.settings.theme="macarons"

ajaxUrl:Ajax加載路徑

isBlockUI:是否顯示加載遮罩層

theme:主題

使用Nuget包下載下傳，請分别下載下傳：

Magicodes.ECharts

Magicodes.ECharts.Mvc

Magicodes.EChartsJs

相關操作如下圖所示：

推薦使用ASP.NET Bundle技術，配置如下所示：

//echarts

bundles.Add(new ScriptBundle("~/plugins/echarts").Include(

"~/Scripts/plugins/echart/echarts.js",

"~/Scripts/plugins/echart/theme/macarons.js",

"~/Scripts/components/magicodes.echart.js"));

注意：如果使用到了相關主題，請注意引用主題腳本。

那麼在View頁引用如下：

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/knockout")

@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/plugins/echarts")

其中，Jquery、Knockoutjs、Echarts腳本是必須的，其他請按需引用。

首先我們需要編寫控制器代碼，以便Ajax調用。如下所示：

public JavaScriptJsonResult Demo2()

var data = new List<object>() {

new {value=400, name= "搜尋引擎"},

new {value=335, name="直接通路"},

new {value=310, name="郵件營銷"},

new {value=274, name="聯盟廣告"},

new {value=235, name="視訊廣告"}

Title = new Title("搜尋來源") { Left = new AlignValue(Align.center) },

new Series.Series

Name = "通路來源'",

Data = data,

Type=SeriesTypes.pie,

Radius="55%",

請注意引用相關命名空間，并注意，ToEChartResult為擴充方法，用于将上述配置對象輸出為JSON序列化内容。

前端元件代碼如下：

注意，定義好Echart元件之後，我們還需要在頁面上添加以下代碼：

@section Scripts

$(function () {

ko.applyBindings({});

});

</script>

該腳本用于綁定KO元件，請務必添加。

至此，代碼編寫完畢，效果如下所示：

有時候，我們希望圖表能夠即時的進行資料重新整理并動态變化，那麼使用Magicodes.EChartsJs就比較簡單了，如下面Demo：

var viewModel = function () {

var self = this;

this.demo4Url = ko.observable('/ChartDemo/Demo1');

this.init = function () {

//設定定時器

setInterval(function () {

//可以通過Url傳參

self.demo4Url(self.demo4Url() == '/ChartDemo/Demo1' ? '/ChartDemo/Demo2' : '/ChartDemo/Demo1');

}, 2000);

self.init();

ko.applyBindings(new viewModel());

HTML：

</div>

上述Demo實作了圖表每隔兩秒的重新整理，會自動從Demo1切換為Demo2的圖表，在實際應用中，您可以可以通過Url傳參或者按照自身業務來動态加載圖表資料。

由上面代碼得知，Magicodes.EChartsJs元件的ajaxUrl參數不僅僅支援字元串，還支援綁定ko的螢幕，如果圖表需要即時重新整理，隻需要給螢幕指派就可以了，當值産生變化時，圖表會自動重新整理，如下面代碼：

目前在開源庫中，定義了4個Demo，如下圖所示：

下面是我們使用該元件在實踐中的一些示例：

目前Magicodes.ECharts尚不能支援所有圖表和所有情形，如果你對本項目有興趣，可以貢獻自己的代碼哦。本着按需設計的原則，Magicodes.ECharts在不斷地實踐中會更加完善的。

開源庫Magicodes.ECharts使用教程概要Magicodes.ECharts工作原理Magicodes.EchartsJs5分鐘上手Magicodes.EChart相關示例

繼續閱讀

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題