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

大功告成！

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/295777.html

標籤：.NET Core

上一篇：ELK+kafka docker快速搭建+.NetCore中使用

下一篇：iNeuOS工業互網平臺，在紙業領域的成功應用案例