报表应用图表charts显示数据

道道悟 發表於 2025-11-13 17:46:00

在内网和手机，一直以文字和数据呈现。 上星期，浏览网页时，发现图表charts显示数据和报表，觉得不错的方式。 图表，如 https://echarts.apache.org/zh/index.html
<div class="home-brand">Apache ECharts</div>
<div class="home-subtitle">一个基于 JavaScript 的开源可视化图表库</div>
<div class="home-btn-panel"> <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113132250239-1287724689.jpg" alt="2025-11-13_13-21-35" loading="lazy">
 

</div>
<div class="home-landing-animation-cover"> 花上好几天时间，分别使用javascript和vue实现，效果如下， （echarts.min.4.3.0.js） <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113105747933-745478621.jpg" alt="2025-11-13_10-49-45" loading="lazy">
 （echarts.min.5.1.2.js） <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113105850396-896139436.jpg" alt="2025-11-13_10-50-23" loading="lazy">
 

相同的数据，数据是来自网上，算是虚拟数据啦，没有经特别设置，只是使用echarts.min.js版本不同机而已。</div>
<div class="home-landing-animation-cover"> </div>
<div class="home-landing-animation-cover">
<div class="cnblogs_code">
<pre><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script></pre>
</div>
或者
</div>
<div class="home-landing-animation-cover">
<div class="cnblogs_code">
<pre><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script></pre>
</div>
 亦可以下载并拉放至项目Scripts目录中，然后在网页上引用即可。 
<div class="cnblogs_code">
<pre><script src="~/Scripts/echarts.min.4.3.0.js"></script></pre>
</div>
或者，
<div class="cnblogs_code">
<pre><script src="~/Scripts/echarts.min.5.1.2.js"></script></pre>
</div>
 
以上，只是行动中的第一步。 接下来，准备一些数据， 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_6e050892-cb68-45a0-bb9f-21adff66e2dc" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_6e050892-cb68-45a0-bb9f-21adff66e2dc" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_6e050892-cb68-45a0-bb9f-21adff66e2dc" class="cnblogs_code_hide">
<pre>[
{
"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
}
]</pre>
</div>
View Code</div>
 做测试，可以把数据存储为json文件，放在App_Data目录。
<img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113113718636-761555962.jpg" alt="2025-11-13_11-15-00" loading="lazy">
 当然你想通过数据库的话，如ms sql Server数据库，你得创建表，把数据存储起来，创建存储过程，让中间层访问得到数据。 
<div class="cnblogs_code">
<pre>CREATE TABLE .(
(40) NOT NULL PRIMARY KEY,
NULL,
NULL,
NULL
)
GO</pre>
</div>
 
<div class="cnblogs_code">
<pre>INSERT INTO .
 (,,,)
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</pre>
</div>
 
<div class="cnblogs_code">
<pre> CREATE PROCEDURE .
AS
BEGIN
SELECT
,
,
,

FROM.
END
GO</pre>
</div>
 
创建model，不管是从json文档读取数据，还是从数据读取数据，需要转换为对象。 <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113130659103-717189202.jpg" alt="2025-11-13_11-59-01" loading="lazy">
 
创建Entity, <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113134718919-410871001.jpg" alt="2025-11-13_13-08-27" loading="lazy">
 
 创建API,为下面javascript或是vue get到数据，实现异步操作。 <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113135256996-1671148761.jpg" alt="2025-11-13_13-51-10" loading="lazy">
 
上面的准备，差不多了。 对了，还差一些Scripts,如axios.js和vue.js。在项目中，打开Manage NuGet Package... <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113160430986-1107680877.jpg" alt="2025-11-13_15-58-10" loading="lazy">
  下面Insus.NET先来使用javascript实现图表， Html,
<div class="cnblogs_code">
<pre><div style="height: 100%;">
<div id="main" style="width: 600px;height:400px;"></div>
</div></pre>
</div>
 Javascript,首先引用，
<div class="cnblogs_code">
<pre><script src="~/Scripts/axios.min.js"></script>
<script src="~/Scripts/echarts.min.5.1.2.js"></script</pre>
</div>
 <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113161436068-1693495909.jpg" alt="2025-11-13_16-12-11" loading="lazy">
 

<img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113161857885-905818494.jpg" alt="2025-11-13_16-15-18" loading="lazy">
 

下面的代码演示，是以vue来实现， 
<div class="cnblogs_code">
<pre><script src="~/Scripts/vue.min.js"></script>
<script src="~/Scripts/axios.min.js"></script>
<script src="~/Scripts/echarts.min.5.1.2.js"></script></pre>
</div>
 
在html中，需要添加一个vue的加载节点， 
<div class="cnblogs_code">
<pre><div style="height: 100%;">
<div id="app">
 <div id="main" style="width: 600px;height:400px;"></div>
</div>
</div></pre>
</div>
 
vue代码示例， <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113164206993-1167644337.jpg" alt="2025-11-13_16-32-31" loading="lazy">
 

下面的generate_echarts() function与js的方法大同小异。 <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113164446279-971369557.jpg" alt="2025-11-13_16-40-13" loading="lazy">
 完整程序算是完毕。 

分享一下，一开始学习图表呈现，是先从vue开始的。 遇上瓶颈啦，在javascript代码死活访问不了Vue内axios异步数据。 <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251113165016028-537259572.jpg" alt="2025-11-12_16-20-37" loading="lazy">
查阅N多相关技术与资料， 想取得vue.js的Data()内的变量属性property，有人说要使用vue的实例名，
<div class="cnblogs_code">
<pre>var vue_echarts = new Vue({
el: '#app',
//...
})</pre>
</div>
vue_echarts.$data.echarts_data_source  这是得不到数据的。 也有网友说，这个是引用型赋值，不能直接使用= 要使用copy。
<div class="cnblogs_code">
<pre>this.echarts_data_source = data.Data.slice();</pre>
</div>
<div class="cnblogs_code">
<pre>this.echarts_data_source = JSON.parse(JSON.stringify(data.Data));</pre>
</div>
或者，
<div class="cnblogs_code">
<pre>this.echarts_data_source = data.Data.map(x => x);</pre>
</div>
均行不通。
还尝试过，使用for来把所有对象一一重新push。
<div class="cnblogs_code">
<pre>for (var k = 0; k < data.Data.length; k++) {
var o = data.Data;
this.echarts_data_source.push(o)
}</pre>
</div>
 
还想过，
<div class="cnblogs_code">
<pre>data: {
echarts_data_source =[],
xaxis_data =[],
series_data = []
},</pre>
</div>
添加最终2个数据，xaxios_data和series_data。
<div class="cnblogs_code">
<pre>for (var k = 0; k < data.Data.length; k++) {
var o = data.Data;
this.xaxis_data.push(o.Category);
this.series_data.push(o.Sales)
}</pre>
</div>
 
办法尝试过许多， 无法突破，只好请教好朋友... 不要使用混合模式，可以以下2种解决方案， 完使用javascript，抛弃vue。 另外一个方案， 直接使用使用uve。图表创建，生成以及option数据设置完全在vue内生成。 哈哈哈... 茅塞顿开，思路一下子开窍。
 

</div> 
来源：https://www.cnblogs.com/insus/p/19217196

頁: [1]

琼殿技术论坛's Archiver

报表应用图表charts显示数据