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 ...
随机推荐
- Redis为什么变慢了？常见延迟问题定位与分析
Redis作为内存数据库,拥有非常高的性能,单个实例的QPS能够达到10W左右.但我们在使用Redis时,经常时不时会出现访问延迟很大的情况,如果你不知道Redis的内部实现原理,在排查问题时就会一头 ...
- linux菜鸡学习之路
Linux入门 Linux 介绍 1.Linux怎么读 2.Linux是一款操作系统,免费,开源,安全,高效,稳定,处理高并发非常强悍. Linux文件系统目录 基本介绍 linux的文件系统树状目录 ...
- XCTF Guess-the-Number
一.发现是jar文件,一定想到反汇编gdui这个工具,而且运行不起来,可能是我电脑问题,我就直接反编译出来了. 也发现了flag,和对应的算法,直接拉出来,在本地运行,后得到flag 二.java代码
- STM32F103学习进程
软硬件下载程序和程序运行的相关问题和解决方案,以我自身买的STM32F103C8T6为例 (1) 硬件需要 1. 购买一个STM32F103XXX的板子.这是一个操作实践性非常强的一个学习过程,如果没 ...
- Log4.net示例
//先用Nuget安装最新Log4net using System; using System.IO; using log4net; using log4net.Config; using log4n ...
- Nginx的安装和部署
Nginx简介 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发 ...
- SpringBoot | 2.1 SpringBoot自动装配原理
@ 目录 前言 1. 引入配置文件与配置绑定 @ImportResource @ConfigurationProperties 1.1 @ConfigurationProperties + @Enab ...
- Django基础06篇 分页
1.导入Django自带的分页类 from django.core.paginator import Paginator 2.分页类的使用 def index(request): # return H ...
- python使用笔记003-文件操作（一）
文件操作分为: 1.打开文件,如果文件在当前目录下直接写文件名,如果文件在其他目录下写绝对路径 2.读/写文件 3.关闭文件 一.文件打开模式 # 'r':只读,文件读取后,会有文件指针记录读取文件的 ...
- UI自动化测试框架Gauge 碰到无法识别Undefined Steps 红色波纹标记
如果碰到无法识别的情况,例如下面的红色波纹,可以试一下: 第一步: 第二步: 不勾选'offline work' 第三部:刷新之后可以重新编译.