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

 

 


大功告成!

 

 

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

上一篇:我的第二个网页制作:p,hn,br标签的使用


下一篇:Js中replace替换所有.