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

  • A+
所属分类：.NET技术
摘要

Asp.Net Core Razor页面中使用echarts展示图形 要在Razor页面中使用echarts显示图形，主要问题点在于如何将数据传递给js文件。
便宜好用的国外VPS推荐

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展示图形

 

 

大功告成！

 

 

便宜好用的国外VPS推荐