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 ...
随机推荐
- Docker：虚拟机挂起后，再启动docker容器连接失败
问题描述 当我们使用VMware15 Pro 创建虚拟机并运行Linux搭建的Docker时,挂起虚拟机后再次运行发现访问Docker容器失败. 解决方式 我们正常的挂起其实是:挂起客户机,博主尝试 ...
- MyBatis：Mybatis逆向工程问题记录
近日我在搭建springboot+mybatis+mysql 的整合项目(自己测试玩)的时候用到了mybatis的逆向工程,来这里记录一下我的菜鸟编码过程 首先我在maven中引入这些依赖 <d ...
- tomcat shutdown后，进程还存在linux系统中的解决办法
基本原理为启动tomcat时记录启动tomcat的进程id(pid),关闭时强制杀死该进程 第一步 :vim修改tomcat下bin/catalina.sh文件,添加点东西,主要是记录tomcat的p ...
- Hibernate框架（五）面向对象查询语言和锁
Hibernate做了数据库中表和我们实体类的映射,使我们不必再编写sql语言了.但是有时候查询的特殊性,还是需要我们手动来写查询语句呢,Hibernate框架为了解决这个问题给我们提供了HQL(Hi ...
- 从三道题目入门frida
偶然从看雪看到了一篇入门frida的题目,正好苦于没练手的东西,直接上手一波 1.第一题jadx打开,也没有壳和混淆,整体非常清晰,判断的逻辑也很简单 发现其实就是两个输入框,一个用户名一个密码,先拼 ...
- XCTF logmein
一.查壳 发现是64位的Linux文件(ELF可以看出是linux的文件) 二.拖入ida64,静态分析 注意这里两个坑: 1.strcpy是复制字符串的意思,前面定义的v8数组只有8个,但是后面的字 ...
- Leetcode No.1 Two Sum(c++哈希表实现）
1. 题目 1.1 英文题目 Given an array of integers nums and an integer target, return indices of the two numb ...
- 序-WEB方向指南
WEB 这个方向其实是目前从业人员最多的方向,也是学习安全门槛最低的方向,当然也是最容易恰饭的方向. 我从入行到现在也依旧没有脱离它,毕竟在我这个小城市.小圈子里,不干这个好像就要没饭吃了,但是你说它 ...
- datax的安装和使用（windows）
github官方文档和项目:https://github.com/alibaba/DataX 下载后在windows环境下是可以直接用python编译执行的,但从github上下载的版本只支持pyth ...
- tomcat默认端口
关于tomcat默认端口为8080: 网页浏览器的默认端口为80.