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 ...
随机推荐
- WebService：java配置类形式发布WebService接口及遇见的问题总结
配置WebService前需要以下依赖jar包 #版本只供参考,具体看项目 <dependency> <grouId>org.apache.cxf</grouId> ...
- Linux安装mysql5.7版本
1.linux安装mysql5.7顺序 ①mysqladmin –version 查看版本号 ②mysql5.7安装在linux中需要先初始化 Mysqld –initialize –user=mys ...
- WUSTCTF2020 funnyre
运行起来,发现啥都没反应也没输出,ida直接打开,反编译 .init函数动调了下,发现没啥用,主要核心在于main函数,直接跟进去 发现了核心逻辑,有花指令,直接去掉,发现还挺多,然后似乎不影响观看, ...
- 南京大学计算机基础 ELF和可执行文件格式
1.可重定位目标文件格式 主要是由ELF头,一些节比如.text节,.rodata节,.data节,.bss节等,前面是只读的,后面是可读可写的,加上一个节头表 1.1 ELF头里面主要包含了16字节 ...
- 42. Trapping Rain Water [dp][stack]
description: Given n non-negative integers representing an elevation map where the width of each bar ...
- OpenMVG 系列 (2)：Image 和 Numeric
OpenMVG 的功能模块由若干核心库组成,本文主要介绍 Image 和 Numeric 两个库 1 Image Image 库包含图像容器 Image<T>.图像IO读写函数 Read ...
- 传统.NET 4.x应用容器化体验（1）
我们都知道.NET Core应用可以跑在Docker上,那.NET Framework 4.x应用呢?借助阿里云ECS主机(Windows Server 2019 with Container版本), ...
- 检测当前手机正在运行的APP
import re #一定要引入,否则不提示错误,但找不到目标def jiance(sjh): aakk="adb -s {0} shell dumpsys activity activit ...
- File类与常用IO流第三章IO流概述
一:以内存为基准,按照数据的流动方向,流向内存为输入(读取数据),流出内存为输出.IO流有四大顶级父类: IO流四大顶级父类 输入流 输出流 字节流 字节输入流 InputStream 字节输出流 ...
- Windows内核开发-3-内核编程基础
Windows内核开发-3-内核编程基础 这里会深入讲解kernel内核的API.结构体.和一些定义.考察代码在内核驱动中运行的机制.最后把所有知识合在一起写一个有用的驱动. 本章学习要点: 1:通用 ...