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，运行测试

 

 

大功告成！

 

 

posted @ 2021-08-18 11:24  VTech_kevin  阅读(1663)  评论(0)  编辑  收藏  举报