报表应用图表charts显示数据

在内网和手机，一直以文字和数据呈现。
上星期，浏览网页时，发现图表charts显示数据和报表，觉得不错的方式。
图表，如 https://echarts.apache.org/zh/index.html

Apache ECharts

一个基于 JavaScript 的开源可视化图表库

 

 

 花上好几天时间，分别使用javascript和vue实现，效果如下，
（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的方法大同小异。

完整程序算是完毕。

分享一下，一开始学习图表呈现，是先从vue开始的。
遇上瓶颈啦，在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内生成。
哈哈哈... 茅塞顿开，思路一下子开窍。