Asp.Net Core Razor页面中使用echarts展示图形
Asp.Net Core Razor页面中使用echarts展示图形
要在Razor页面中使用echarts显示图形，主要问题点在于如何将数据传递给js文件。
1，下载安装echarts库文件
首先引入echarts文件，Asp.NET Core web项目引入js文件，在wwwroot文件夹上右键，选择添加->客户端库。
在打开的窗口中输入echarts，自动搜索最新版本，安装即可。
2，引入echarts.min.js文件
打开Pages/Shared/_layout.cshtml文件，在head部分添加引用：
注意，一定要添加在<head></head>中，若添加在<body>部分，会报错提示无法找到echarts，因为初始化dom前必须确保文件已引入。
3，创建Razor页面，后端从数据库获取数据
前端页面中，添加一个echarts dom块，从echarts网站找到一个饼图，把代码拷到前端文件中，并修改。
js代码：
var myChart = echarts.init(document.getElementById('chart1'));
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '数据分类',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
@{
foreach(var pz in Model.Prizes)
{
<text>
{ value: '@pz.point', name: '@pz.prizename' },
</text>
}
}
]
}
]
};
myChart.setOption(option);
关键部分为：
在js代码中嵌入C#代码，使用<text>这个伪元素可以强制Razor从编译模式返回到内容模式。
4，运行测试
大功告成！
Asp.Net Core Razor页面中使用echarts展示图形的更多相关文章
- ASP.NET Core Razor页面禁用防伪令牌验证
在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站: ...
- ASP.NET Core - Razor 页面简介
简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Cor ...
- ASP.NET Core Razor 页面使用指南
ASP.NET Core Razor 页面作为 ASP.NET Core 2.0的一部分发布,它是基于页面的全新的Web开发框架.如果您想学习如何使用 ASP.NET Core Razor 页面,可以 ...
- ASP.NET Core - Razor 页面介绍
简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Cor ...
- ASP.NET Core Razor页面 vs MVC
作为.NET Core 2.0发行版的一部分,还有一些ASP.NET的更新.其中之一是添加了一个新的Web框架来创建"页面",而不需要复杂的ASP.NET MVC.新的Razor页 ...
- ASP.Net Core Razor 页面路由
在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中, ...
- Asp.net core Razor 页面
创建asp.net core 空项目->MyWeb 修改Startup.cs启动文件添加Razor页面支持: public void ConfigureServices(IServiceColl ...
- 4.将验证添加到 ASP.NET Core Razor 页面
向 Movie 模型添加了验证逻辑. 每当用户创建或编辑电影时,都会强制执行验证规则. 1.打开Movie.cs文件.DataAnnotations命名空间提供了一组内置的验证属性,这些属性以声明方式 ...
- 学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
随机推荐
- Java：java获取Linux下的路径
指定Linux的路径 //Linux系统路径 StringBuilder sb = new StringBuilder(File.separator); String Url = sb.append( ...
- 1.3.9、通过权重 Weight匹配
server: port: 8080 spring: application: name: gateway cloud: gateway: routes: - id: guo-system1 uri: ...
- 单选按钮(radio)的取值和点击事件
笔记走一波:获取单选按钮(radio)的选中值,以及它的点击事件的实现 首先要引入Jquery <script type="text/javascript" src=&quo ...
- 使用Flyway来管理数据库版本
使用Flyway来管理数据库版本 Flyway是什么 Flyway是一款数据库迁移(migration)工具. 它可以帮助我们在不同环境保持数据库的同步,减少手工操作,避免数据导入的顺序错误,同时也减 ...
- ms17-010 永恒之蓝漏洞复现（CVE-2017-0143）
0x01 首先对目标机的开放端口进行探测,我们可以使用探测神器nmap 发现开放的445端口,然后进行下一步的ms17-010的漏洞验证 0x02 打开MSF美少妇神器,用search命令搜索ms17 ...
- Java笔记——方法
1.方法 (1)概念:①解决事情的办法②实现功能的代码段. (2)优点:①提到代码的复用性②便于后期维护. (3)特点:①不调用不执行②方法不能嵌套,定义在类中方法外的位置. (4)定义方 ...
- 用EXCEL打开CSV文件
1.打开EXCEL 2.数据--自文本--选择对应的CSV文件 3.设置表头所在的行(例如17行为表头)则输入17 4.确定分隔符 5.单击"确定"即可
- C#/.NET/.NET Core学习视频汇总（持续更新ing）
前言: 之前有很多小伙伴在我的公众号后台留言问有没有C#/.NET/.NET Core这方面相关的视频推荐,我一般都会推荐他们去B站搜索一下.今天刚好有空收集了网上一些比较好的C#/.NET/.NET ...
- 【LeetCode】242. 有效的字母异位词
242. 有效的字母异位词 知识点:字符串:哈希表 题目描述 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 注意:若 s 和 t 中每个字符出现的次数都相同,则称 ...
- deepin修改数据源升级到deepin15.11桌面版
参考:https://blog.csdn.net/baidu_41751590/article/details/89064220 1,我修改数据源地址: 换成上海交通大学源地址: http://ftp ...