欢迎光临
我的个人博客网站

Asp.Net Core Razor页面中使用echarts展示图形

Asp.Net Core Razor页面中使用echarts展示图形


要在Razor页面中使用echarts显示图形,主要问题点在于如何将数据传递给js文件。

1,下载安装echarts库文件

首先引入echarts文件,Asp.NET Core web项目引入js文件,在wwwroot文件夹上右键,选择添加->客户端库。

Asp.Net Core Razor页面中使用echarts展示图形

在打开的窗口中输入echarts,自动搜索最新版本,安装即可。

Asp.Net Core Razor页面中使用echarts展示图形

 

 2,引入echarts.min.js文件

打开Pages/Shared/_layout.cshtml文件,在head部分添加引用:

Asp.Net Core Razor页面中使用echarts展示图形

 

 注意,一定要添加在<head></head>中,若添加在<body>部分,会报错提示无法找到echarts,因为初始化dom前必须确保文件已引入。

3,创建Razor页面,后端从数据库获取数据

Asp.Net Core Razor页面中使用echarts展示图形

 

 前端页面中,添加一个echarts dom块,从echarts网站找到一个饼图,把代码拷到前端文件中,并修改。

 Asp.Net Core Razor页面中使用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);

关键部分为:

Asp.Net Core Razor页面中使用echarts展示图形

 

 在js代码中嵌入C#代码,使用<text>这个伪元素可以强制Razor从编译模式返回到内容模式。

4,运行测试

Asp.Net Core Razor页面中使用echarts展示图形

 

 


大功告成!

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Asp.Net Core Razor页面中使用echarts展示图形
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏