前端小白在asp.net core mvc中使用ECharts
對於在瀏覽器中繪製圖形圖表，目前有較多的js類庫可以使用，如：ChartJS，Flot，canvasjs等，但是今天介紹的主角為國產圖表庫，並在apache孵化，就是大名鼎鼎的echarts。
前方高能【官方介紹】
特性 - Apache ECharts (incubating)
ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺化圖表。
豐富的視覺化型別
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖、熱力圖、線圖，用於關係資料視覺化的關係圖、treemap、旭日圖，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。
除了已經內建的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函式，就可以從資料對映到任何你想要的圖形，更棒的是這些都還能和已有的互動元件結合使用而不需要操心其它事情。
你可以在下載介面下載包含所有圖表的構建檔案，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建檔案太大，也可以在線上構建中選擇需要的圖表型別後自定義構建。
多種資料格式無需轉換直接使用
ECharts 內建的 dataset 屬性（4.0+）支援直接傳入包括二維表，key-value 等多種格式的資料來源，通過簡單的設定 encode 屬性就可以完成從資料到圖形的對映，這種方式更符合視覺化的直覺，省去了大部分場景下資料轉換的步驟，而且多個元件能夠共享一份資料而不用克隆。
為了配合大資料量的展現，ECharts 還支援輸入 TypedArray 格式的資料，TypedArray 在大資料量的儲存中可以佔用更少的記憶體，對 GC 友好等特性也可以大幅度提升視覺化應用的效能。
實踐
1、 使用VS2019建立一個asp.net core web專案，選擇ASP.NET Core Web 應用程式，並使用Web應用程式(模型檢視控制器)模板
2、使用libman新增echarts庫
在解決方案資源管理器中選擇專案名稱->wwwroot->lib，在lib資料夾上右擊，選擇：新增->客戶端庫，彈出視窗輸入echarts，自動帶出最新的版本，由於使用了cdnjs，上面最新版為4.3.0，在其他的如：jsdelivr、unpkg上面最新版為4.5.0。不過使用jsdelivr、unpkg現在4.5.0版本失敗，所以選擇了cdnjs上面的4.3.0版本。
插曲：在彈出的客戶端庫輸入內容時，如果時中文輸入法，已輸入部分文字，切換為英文輸入法時，會導致vs2019重啟，所以在客戶端庫視窗輸入內容時一定要前切換到英文輸入法
3、新增一個action，名為Echarts,並新增相應的檢視
在檢視中新增如下程式碼，id為mychart的div用於放置echarts圖表
<div class="row">
<div class="col-md-12">
<div id="myechart" style="width: 100%; height: 500px;">
</div>
</div>
</div>新增相關js的引用
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/echarts/echarts.js"></script>4、使用Echarts
準備的json資料存放到了github上面：https://github.com/mzy666888/datajson
在引用的的js庫的下方編寫js程式碼使用echarts顯示圖表。
首先定義了一個結構，用於存放資料。
function Series(type, xdata, seriesData) {
this.typeName = type;//相當於title
this.xdata = xdata;//X軸資料
this.seriesData = seriesData;//Y軸資料
}宣告一個charts例項。
> echartInstance.clear：
清空當前例項，會移除例項中所有的元件和圖表。清空後呼叫 getOption 方法返回一個{}空物件。在多次查詢時需要用到清除上次新增的內容
var myEChart = echarts.init(document.getElementById('myechart'));
myEChart.clear();//用於清除已存在的內容定義option
var options = {
title: {
text: '資料曲線：',
x: 'center'
},
legend: {
data: [],
x: 'left'
},
xAxis: {
type: 'category'//必須
},
yAxis: {
type: 'value',
max: 90,
min: -10
},
series: []
}設定myEChart的option
myEChart.setOption(options);獲取json資料，經過處理後並將資料顯示到myEChart，
$.get('/data.json').done(function (data) {
//var aa = JSON.parse(data);
var x = [];
$.each(data.List,
function (n, value) {
var xd = [], sd = [];
$.each(value.Data,
function (m, mValue) {
xd.push(mValue.SaveTime);
sd.push(mValue.WorkStationData);
});
var s = new Series(value.TypeTitleName, xd, sd);
x.push(s);
});
var xStart = data.Start;
var xEnd = data.End;
options.xAxis.data = x[0].xdata;
options.xAxis.start = xStart;
options.xAxis.end = xEnd;
$.each(x,
function (i, value) {
options.title.text += value.typeName + " ";
options.legend.data.push(value.typeName);
options.series.push({
name: value.typeName,
type: 'line',
smooth: true,
data: value.seriesData
});
});
myEChart.setOption(options);
});說明1
此段程式碼是將json資料處理後，將x，y軸的資料分開存到到陣列x中
var x = [];
$.each(data.List,
function (n, value) {
var xd = [], sd = [];
$.each(value.Data,
function (m, mValue) {
xd.push(mValue.SaveTime);
sd.push(mValue.WorkStationData);
});
var s = new Series(value.TypeTitleName, xd, sd);
x.push(s);
});說明2
對option的xAxis軸的內容進行處理
var xStart = data.Start;
var xEnd = data.End;
options.xAxis.data = x[0].xdata;
options.xAxis.start = xStart;
options.xAxis.end = xEnd;說明3
對option的title、legend、series軸的內容進行處理
$.each(x,
function (i, value) {
options.title.text += value.typeName + " ";
options.legend.data.push(value.typeName);
options.series.push({
name: value.typeName,
type: 'line',
smooth: true,
data: value.seriesData
});
});###### 說明4
設定`myEChart`的option
myEChart.setOption(options);
### 5、執行程式
點選“CTRL+F5”執行程式，切換到相應的action，可以看到圖表顯示如下內容，所有的資料都正確的顯示了。
到目前為止，貼出上面完整的程式碼，到目前為止，你已經可以使用echarts處理圖表問題了：
### 6、功能擴充套件
###### 6.1 圖表左右空白較多
為了解決圖表中左右空白較多的問題，可以在options中新增如下內容： grid: {
show: true,
borderColor: '#19507c',
x: 50,
x2: 50,
y: 40
},
###### 6.2 滑鼠滑過圖表顯示當前時間的各項資料內容
上面的截圖，我們使用資料劃過圖表時，不能現在當前時間上各項資料，在options中新增如下程式碼可以實現滑鼠滑過顯示各項資料的功能。 tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
###### 6.3 新增相關功能按鈕
使用如下設定，添加了3個按鈕，分別為：區域縮放，區域縮放還原和還原。
區域縮放：可以在圖示上按住滑鼠左鍵，用滑鼠滑定一段區域，顯示滑定區域的資料，相當於區域放大
區域縮放還原：還原到初始狀態
還原：就是還原功能
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveasImage: {}
}
},
###### 6.4 區域縮放
dataZoom 元件 用於區域縮放，從而能自由關注細節的資料資訊，或者概覽資料整體，或者去除離群點的影響。
dataZoom: [
{
show: true,
realtime: true,
start: 80,
end: 100
},
{
type: 'inside',
realtime: true,
start: 65,
end: 100
}
],
新增完4項擴充套件後，完整程式碼如下：
```
給個關注：
