在內網和手機，一直以文字和數據呈現。
上星期，瀏覽網頁時，發現圖表charts顯示數據和報表，覺得不錯的方式。
圖表，如 https://echarts.apache.org/zh/index.html
（echarts.min.4.3.0.js）
（echarts.min.5.1.2.js）
相同的數據，數據是來自網上，算是虛擬數據啦，沒有經特別設置，只是使用echarts.min.js版本不同機而已。
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
或者
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
亦可以下載並拉放至項目Scripts目錄中，然後在網頁上引用即可。
<script src="~/Scripts/echarts.min.4.3.0.js"></script>
或者，
<script src="~/Scripts/echarts.min.5.1.2.js"></script>
以上，只是行動中的第一步。
接下來，準備一些數據，
[
{
"category": "電子產品",
"sales": 12500,
"count": 320,
"profit": 4500
},
{
"category": "服裝",
"sales": 8900,
"count": 540,
"profit": 2200
},
{
"category": "食品",
"sales": 7600,
"count": 890,
"profit": 1800
},
{
"category": "家居",
"sales": 10200,
"count": 430,
"profit": 3100
},
{
"category": "圖書",
"sales": 5400,
"count": 670,
"profit": 1200
},
{
"category": "運動",
"sales": 6800,
"count": 380,
"profit": 1900
}
]
做測試，可以把數據存儲為json文件，放在App_Data目錄。
當然你想通過數據庫的話，如ms sql Server數據庫，你得創建表，把數據存儲起來，創建存儲過程，讓中間層訪問得到數據。
CREATE TABLE [dbo].[SalesData]( [Category] [nvarchar](40) NOT NULL PRIMARY KEY, [Sales] [int] NULL, [Count] [int] NULL, [Profit] [int] NULL ) GO
INSERT INTO [dbo].[SalesData]
([Category],[Sales],[Count],[Profit])
VALUES
(N'圖書',5400,670,1200),
(N'家居',10200,430,3100),
(N'服裝',8900,540,2200),
(N'電子產品',12500,320 ,4500),
(N'運動',6800,380,1900),
(N'食品',7600,890,1800)
GO
CREATE PROCEDURE [dbo].[usp_SalesData_Select_All] AS BEGIN SELECT [Category], [Sales], [Count], [Profit] FROM [dbo].[SalesData] END GO
創建model，不管是從json文檔讀取數據，還是從數據讀取數據，需要轉換為對象。
創建Entity,
創建API,為下面javascript或是vue get到數據，實現異步操作。
上面的準備，差不多了。
對了，還差一些Scripts,如axios.js和vue.js。在項目中，打開Manage NuGet Package...
下面Insus.NET先來使用javascript實現圖表，
Html,
<div style="height: 100%;"> <div id="main" style="width: 600px;height:400px;"></div> </div>
Javascript,首先引用，
<script src="~/Scripts/axios.min.js"></script> <script src="~/Scripts/echarts.min.5.1.2.js"></script
下面的代碼演示，是以vue來實現，
<script src="~/Scripts/vue.min.js"></script> <script src="~/Scripts/axios.min.js"></script> <script src="~/Scripts/echarts.min.5.1.2.js"></script>
在html中，需要添加一個vue的加載節點，
<div style="height: 100%;"> <div id="app"> <div id="main" style="width: 600px;height:400px;"></div> </div> </div>
vue代碼示例，
下面的generate_echarts() function與js的方法大同小異。
完整程序算是完畢。
遇上瓶頸啦，在javascript代碼死活訪問不了Vue內axios異步數據。
查閲N多相關技術與資料，
想取得vue.js的Data()內的變量屬性property，有人説要使用vue的實例名，
var vue_echarts = new Vue({ el: '#app', //... })
vue_echarts.$data.echarts_data_source
這是得不到數據的。
也有網友説，這個是引用型賦值 ，不能直接使用=
要使用copy。
this.echarts_data_source = data.Data.slice();
this.echarts_data_source = JSON.parse(JSON.stringify(data.Data));
或者，
this.echarts_data_source = data.Data.map(x => x);
均行不通。
還嘗試過，使用for來把所有對象一一重新push。
for (var k = 0; k < data.Data.length; k++) { var o = data.Data[i]; this.echarts_data_source.push(o) }
還想過，
data: { echarts_data_source =[], xaxis_data =[], series_data = [] },
添加最終2個數據，xaxios_data和series_data。
for (var k = 0; k < data.Data.length; k++) { var o = data.Data[i]; this.xaxis_data.push(o.Category); this.series_data.push(o.Sales) }
辦法嘗試過許多，
無法突破，只好請教好朋友...
不要使用混合模式，可以以下2種解決方案，
完使用javascript，拋棄vue。
另外一個方案，
直接使用使用uve。圖表創建，生成以及option數據設置完全在vue內生成。
哈哈哈... 茅塞頓開，思路一下子開竅。
