Asp.Net Core Razor頁面中使用echarts展示圖形

本文轉載自查看原文 2021-08-18 11:24 180 C#/ ASP.NetCore/ Razor

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，運行測試

大功告成！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何在ASP.NET Core 2.0中使用Razor頁面 ASP.NET Core Razor 頁面使用教程【ASP.NET Core學習】Razor頁面 ASP.NET Core Razor 頁面路由 ASP.NET Core - Razor 頁面介紹 ASP.NET CORE RAZOR ：向 Razor 頁面應用添加模型 ASP.NET CORE RAZOR ：將文件上傳至 ASP.NET Core 中的 Razor 頁面學習ASP.NET Core Razor 編程系列四——Asp.Net Core Razor列表模板頁面前端小白在asp.net core mvc中使用ECharts ASP.NET Core Razor頁面 vs MVC