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 ...
随机推荐
- Hadoop：Hadoop的安装
CentOS7安装Hadoop需要有JDK,所以先下载安装JDK后,在进行安装Hadoop 下载Hadoop #联网状态下使用wget命令 wget http://archive.apache.org ...
- tableview折叠动效
缘起于看见书旗小说的列表有点击折叠的动效,觉得十分炫酷.想了三分钟,不知道怎么写.晚上百度了下,知道了大致流程,于是自己实现了下,发现不少坑,于是写下这篇博文 实现原理: 1 tableview ce ...
- python 14篇 写日志
import sys from loguru import logger # 日志级别: debug 调试信息打印日志比较详细,级别最低 # info 正常的提示信息,级别较低 # waring 警告 ...
- CSS 样式清单整理
1.文字超出部分显示省略号 单行文本的溢出显示省略号(一定要有宽度) p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white- ...
- 【LeetCode】27.移除元素
27.移除元素 知识点:数组:双指针:: 题目描述 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度. 不要使用额外的数组空间,你必须 ...
- 解析ArrayList的底层实现（上）
private static final long serialVersionUID = 8683452581122892189L;//唯一序列号ID private static final int ...
- powerdesigner连接postgresql数据库生成pdm及word文档
1.准备软件: powerdesigner165与postgresql的驱动:psqlodbc_11_01_0000 2.安装并破解完成powerdesigner165 参看链接:https://ww ...
- div填满页面剩余空间的方法
想让div填满页面剩余空间,最简易的方式还是靠提前的布局. 这里提供两种方法: (1)利用 height 样式的%比例设置布局 <!DOCTYPE html> <html lang= ...
- 【Java基础上】一、简述Java
一.简述Java Java是一种高级的面向对象的程序语言,在此处,不需要了解什么叫做面向对象,因为后面的文章中自然会谈到这方面的论述.那么,Java就是一个计算机的编程语言. 1.1 Java的历 ...
- Java键盘获取数据
java录入键盘数据,整型.浮点型.布尔型.字符串. 通过导入java.util.Scanner实现各类操作 import java.util.Scanner;//导入包 public class H ...