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,运行测试
大功告成!