前端小白在asp.net core mvc中使用ECharts

最新推荐文章于 2024-06-18 09:35:29 发布
最新推荐文章于 2024-06-18 09:35:29 发布
阅读量1.1k 收藏 11
点赞数 1
分类专栏： NET Core ECharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42930928/article/details/103163907
版权

对于在浏览器中绘制图形图表，目前有较多的js类库可以使用，如：ChartJS，Flot，canvasjs等，但是今天介绍的主角为国产图表库，并在apache孵化，就是大名鼎鼎的echarts。

前方高能【官方介绍】

特性 - Apache ECharts (incubating)

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

实践

1、 使用VS2019创建一个asp.net core web项目，选择ASP.NET Core Web 应用程序，并使用Web应用程序(模型视图控制器)模板

2、使用libman添加echarts库

在解决方案资源管理器中选择项目名称->wwwroot->lib，在lib文件夹上右击，选择：添加->客户端库，弹出窗口输入echarts，自动带出最新的版本，由于使用了cdnjs，上面最新版为4.3.0，在其他的如：jsdelivr、unpkg上面最新版为4.5.0。不过使用jsdelivr、unpkg现在4.5.0版本失败，所以选择了cdnjs上面的4.3.0版本。

> 插曲：在弹出的客户端库输入内容时，如果时中文输入法，已输入部分文字，切换为英文输入法时，会导致vs2019重启，所以在客户端库窗口输入内容时一定要前切换到英文输入法

3、添加一个action，名为Echarts,并添加相应的视图

在视图中添加如下代码，id为mychart的div用于放置echarts图表

    <div class="row">
        <div class="col-md-12">
            <div id="myechart" style="width: 100%; height: 500px;">

            </div>
        </div>
    </div>

添加相关js的引用

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/echarts/echarts.js"></script>

4、使用Echarts

准备的json数据存放到了github上面：https://github.com/mzy666888/datajson
在引用的的js库的下方编写js代码使用echarts显示图表。
首先定义了一个结构，用于存放数据。

function Series(type, xdata, seriesData) {
        this.typeName = type;//相当于title
        this.xdata = xdata;//X轴数据
        this.seriesData = seriesData;//Y轴数据
    }

声明一个charts实例。
> echartInstance.clear：
清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。在多次查询时需要用到清除上次添加的内容

var myEChart = echarts.init(document.getElementById('myechart'));
myEChart.clear();//用于清除已存在的内容

定义option

    var options = {
        title: {
            text: '数据曲线：',
            x: 'center'
        },
        
        legend: {
            data: [],
            x: 'left'
        },
        
        xAxis: {
            type: 'category'//必须
        },
        yAxis: {
            type: 'value',
            max: 90,
            min: -10
        },
        series: []
    }

设置myEChart的option

myEChart.setOption(options);

获取json数据，经过处理后并将数据显示到myEChart，

    $.get('/data.json').done(function (data) {

        //var aa = JSON.parse(data);
        var x = [];
        $.each(data.List,
            function (n, value) {
                var xd = [], sd = [];
                $.each(value.Data,
                    function (m, mValue) {
                        xd.push(mValue.SaveTime);
                        sd.push(mValue.WorkStationData);
                    });
                var s = new Series(value.TypeTitleName, xd, sd);
                x.push(s);
            });

        var xStart = data.Start;
        var xEnd = data.End;
        options.xAxis.data = x[0].xdata;
        options.xAxis.start = xStart;
        options.xAxis.end = xEnd;

        $.each(x,
            function (i, value) {
                options.title.text += value.typeName + " ";
                options.legend.data.push(value.typeName);
                options.series.push({
                    name: value.typeName,
                    type: 'line',
                    smooth: true,
                    data: value.seriesData
                });
            });
        myEChart.setOption(options);

    });

说明1

此段代码是将json数据处理后，将x，y轴的数据分开存到到数组x中

        var x = [];
        $.each(data.List,
            function (n, value) {
                var xd = [], sd = [];
                $.each(value.Data,
                    function (m, mValue) {
                        xd.push(mValue.SaveTime);
                        sd.push(mValue.WorkStationData);
                    });
                var s = new Series(value.TypeTitleName, xd, sd);
                x.push(s);
            });

说明2

对option的xAxis轴的内容进行处理

var xStart = data.Start;
var xEnd = data.End;
options.xAxis.data = x[0].xdata;
options.xAxis.start = xStart;
options.xAxis.end = xEnd;

说明3

对option的title、legend、series轴的内容进行处理

        $.each(x,
            function (i, value) {
                options.title.text += value.typeName + " ";
                options.legend.data.push(value.typeName);
                options.series.push({
                    name: value.typeName,
                    type: 'line',
                    smooth: true,
                    data: value.seriesData
                });
            });

说明4

设置myEChart的option

myEChart.setOption(options);

5、运行程序

点击“CTRL+F5”运行程序，切换到相应的action，可以看到图表显示如下内容，所有的数据都正确的显示了。

到目前为止，贴出上面完整的代码，到目前为止，你已经可以使用echarts处理图表问题了：

<script type="text/javascript">
    //定义类
    function Series(type, xdata, seriesData) {
        this.typeName = type;
        this.xdata = xdata;
        this.seriesData = seriesData;
    }

    var myEChart = echarts.init(document.getElementById('myechart'));
    myEChart.clear();
    var options = {
        title: {
            text: '数据曲线：',
            x: 'center'
        },        
        legend: {
            data: [],
            x: 'left'
        },        
        xAxis: {
            type: 'category'
        },
        yAxis: {
            type: 'value',
            max: 90,
            min: -10
        },
        series: []
    }

    myEChart.setOption(options);
    $.get('/data.json').done(function (data) {

        //var aa = JSON.parse(data);
        var x = [];
        $.each(data.List,
            function (n, value) {
                var xd = [], sd = [];
                $.each(value.Data,
                    function (m, mValue) {
                        xd.push(mValue.SaveTime);
                        sd.push(mValue.WorkStationData);
                    });
                var s = new Series(value.TypeTitleName, xd, sd);
                x.push(s);
            });

        var xStart = data.Start;
        var xEnd = data.End;
        options.xAxis.data = x[0].xdata;
        options.xAxis.start = xStart;
        options.xAxis.end = xEnd;

        $.each(x,
            function (i, value) {
                options.title.text += value.typeName + " ";
                options.legend.data.push(value.typeName);
                options.series.push({
                    name: value.typeName,
                    type: 'line',
                    smooth: true,
                    data: value.seriesData
                });
            });
        myEChart.setOption(options);

    });

</script>

6、功能扩展

6.1 图表左右空白较多

为了解决图表中左右空白较多的问题，可以在options中添加如下内容：

        grid: {
            show: true,
            borderColor: '#19507c',
            x: 50,
            x2: 50,
            y: 40
        },

6.2 鼠标滑过图表显示当前时间的各项数据内容

上面的截图，我们使用数据划过图表时，不能现在当前时间上各项数据，在options中添加如下代码可以实现鼠标滑过显示各项数据的功能。

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                    backgroundColor: '#505765'
                }
            }
        },

6.3 添加相关功能按钮

使用如下设置，添加了3个按钮，分别为：区域缩放，区域缩放还原和还原。
区域缩放：可以在图标上按住鼠标左键，用鼠标滑定一段区域，显示滑定区域的数据，相当于区域放大
区域缩放还原：还原到初始状态
还原：就是还原功能

        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveasImage: {}
            }
        },

6.4 区域缩放

dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 80,
                end: 100
            },
            {
                type: 'inside',
                realtime: true,
                start: 65,
                end: 100
            }
        ],

添加完4项扩展后，完整代码如下：

 

<script type="text/javascript">
    //定义类
    function Series(type, xdata, seriesData) {
        this.typeName = type;
        this.xdata = xdata;
        this.seriesData = seriesData;
    }

    var myEChart = echarts.init(document.getElementById('myechart'));
    myEChart.clear();
    var options = {
        title: {
            text: '数据曲线：',
            x: 'center'
        },
        grid: {
            show: true,
            borderColor: '#19507c',
            x: 50,
            x2: 50,
            y: 40
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveasImage: {}
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                    backgroundColor: '#505765'
                }
            }
        },
        legend: {
            data: [],
            x: 'left'
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 80,
                end: 100
            },
            {
                type: 'inside',
                realtime: true,
                start: 65,
                end: 100
            }
        ],
        xAxis: {
            type: 'category',
            offset: 30
        },
        yAxis: {
            type: 'value',
            max: 90,
            min: -10
        },
        series: []
    }

    myEChart.setOption(options);
    $.get('/data.json').done(function (data) {

        //var aa = JSON.parse(data);
        var x = [];
        $.each(data.List,
            function (n, value) {
                var xd = [], sd = [];
                $.each(value.Data,
                    function (m, mValue) {
                        xd.push(mValue.SaveTime);
                        sd.push(mValue.WorkStationData);
                    });
                var s = new Series(value.TypeTitleName, xd, sd);
                x.push(s);
            });

        var xStart = data.Start;
        var xEnd = data.End;
        options.xAxis.data = x[0].xdata;
        options.xAxis.start = xStart;
        options.xAxis.end = xEnd;

        $.each(x,
            function (i, value) {
                options.title.text += value.typeName + " ";
                options.legend.data.push(value.typeName);
                options.series.push({
                    name: value.typeName,
                    type: 'line',
                    smooth: true,
                    data: value.seriesData
                });
            });
        myEChart.setOption(options);

    });

</script>

 

芝麻麻雀
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ASP.NET操作echarts
03-27
使用ASP.NET与echarts进行数据交互，利用C#中的ASP.NET作为后台产生数据，通过Ajax作为前端定时与后端进行数据交互
asp.net +Echarts 图表可视化
xzhu博客
11-08 434
asp.net Api +Echarts 图表可视化
推荐项目：Blazor.ECharts——无缝整合Blazor与ECharts的利器
最新发布
gitblog_00075的博客
06-18 335
推荐项目：Blazor.ECharts——无缝整合Blazor与ECharts的利器 项目地址:https://gitcode.com/lishewen/Blazor.ECharts ???? 项目介绍 Blazor.ECharts是针对Microsoft的Blazor框架精心打造的一个ECharts图表组件。源于对原始项目caopengfei/BlazorECharts的热情延续与创新升级，Lishe...
ASP.NET结合Echarts展示后台数据
HerryDong的博客
05-18 4986
ECharts功能强大，如果项目中需要根据后台数据生成统计图表，那么ECharts绝对是不二选择。下面就来介绍一下如何利用ASP.NET + ECharts来生成折线图、柱状图、饼图这三类基本的统计图。首先在SqlServer中建立一张测试表[TSales]，该表模拟某商店在2019年每天的销售金额，共有365条记录，如下图所示： 下面需要按照月份对该数据表进行划分，生成相应的折线图、柱状图、饼图，同时还需要根据季度对该数据表进行划分，生成另一个饼图，如下图所示： 前端代码 <!DOCTYPE h
ASP.NET使用ECharts展示后台数据
热门推荐
guoxy_nb的专栏
12-31 1万+
Baidu开源项目Echarts无论从数据的展现能力，对桌面与智能终端的友好支持，还是在使用的方便性上，慢慢成为广大程序员使用图表展示数据的首选。在使用过程中，也会出现各种坑，而网上找到的大部分资料，都是人云亦云，相互抄来抄去，需要仔细斟酌，才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程，希望对初步使用该方法的同学有所帮助。 一、前端 1、从
Echarts图表之dispatchAction 操作 固定tooltip显示框
weixin_57319633的博客
08-25 7102
dispatchAction操作固定tooltip显示框
ASP.NET Core MVC从入门到精通系列文章PDF版
06-30
9. **路由**：路由是ASP.NET Core MVC中确定URL到Action方法映射的机制，允许自定义URL模式。 10. **页面布局**：布局页是一种共享视图，可以包含通用的头部、导航等元素，子视图可以继承布局页。 11. **wwwroot和...
echarts在ASP.NET MVC中的使用
05-04
在 ASP.NET MVC 中使用 ECharts，首先需要确保你的项目已经引入了 ECharts 的 JavaScript 文件。通常，这可以通过以下方式完成： 1. 下载 ECharts 的最新版本或者通过 CDN 引入。 2. 将下载的 ECharts 文件（如 `...
asp.net core mvc 搭建的企业网站示例
03-22
在这个“asp.net core mvc 搭建的企业网站示例”中，我们将深入探讨如何利用这个强大的工具来创建一个企业级的网站。 首先，ASP.NET Core MVC 的核心概念包括控制器（Controllers）、视图（Views）和模型（Models）...
ASP.NET Core Mvc中空返回值的处理方法详解
10-17
在ASP.NET Core MVC中，当你在控制器的Action中返回`null`时，默认的行为是返回HTTP状态码204 NoContent，而不是像ASP.NET MVC或ASP.NET WebAPI那样返回200 OK并包含一个null的响应内容。这种变化的主要目的是优化...
ASP.Net Core MVC 使用EF操作MySQL数据库完整实例
01-20
开发者可以通过这个实例学习到如何设置数据库上下文，定义实体模型，以及在控制器中使用EF Core进行CRUD操作。对于想要学习或提升ASP.NET Core和数据库操作技能的人来说，这是一个非常有价值的实践项目。
统计图表
weixin_30719711的博客
06-09 324
统计图表 ...
ASP.NET实现数据图表
aome1470的博客
10-29 379
作者：马金虎 来自：yesky 在ASP中插入图表，常用的方法是使用MSChart控件。那么在ASP.NET是否也是这样呢?答案是不可以的。　　我们知道ASP.NET是一种编译语言，当客户端第一次调用ASP.NET页面的时候，其实是经过了一种比较复杂的编译过程，编译生产MSIL文件，存储到本地机，MSIL文件其实是一个中间语言的文件，然后此文件又通过JIT（Just in time）...
ASP.Net MVC中 Echarts简单Demo
Tashion的博客
06-03 3764
1 首先在页面引用Echarts 3.0 文件 2 在控制器写返回类型为jsonlist的方法 public List GetChildDataReDesign(Guid? pId, string SysName, string begindate, string enddate) { List LevelOne = context
ASP.Net绑定Sql数据源用echarts图表来展示数据
zhuxiangrong85的博客
06-03 2305
ASP.Net如何通过访问数据库通过图表的形式来写一网页
.NetCore后台生成Echarts图表(chromedriver+Selenium.WebDriver)
The_Moon_的专栏
11-21 1075
.NetCore后台生成Echarts图表(chromedriver+Selenium.WebDriver)，同时在echarts渲染完成后获取图片base64地址，避免数据丢失
Echarts+Asp.Net+Sql Server报表开发视频教程
08-09
本套教程采用vs2012+sql2012开发，以销售明细表为例，讲解了常见报表的开发过程，既包含了传统的表格形式的报表、又包含了柱状图（条形图）、饼状图、环形图、南丁格尔图、曲线图、折线图、面积图等，前端使用ajax请求数据，后端使用.net操作数据库并做http响应,返回json格式数据，前端解析json数据并完成数据渲染。共28集 时长：3小时50分。
ASP.NET+Echarts绘制图表
weixin_44146294的博客
02-25 5327
首先去百度搜索Echarts去下载图表实例，或者直接点击链接：Echarts图表实例下载。其中可以自定义下载，也可以下载全部，根据个人需求进行实例的下载即可！ ...
在ASP.NET中动态创建柱状图和饼图
weixin_34367257的博客
01-19 92
本文来自：[url]http://www.webwoo.net/bc/bencandy-17-35292-1.htm[/url]，作者不详。       在应用程序开发中，我们会经常遇到把从数据源动态取回的数据用统计图表现出来，在Microsoft .net Framework出现之前，我们采取的方法主要是编写组件来完成这一任务。现在，利用Microsoft .NET Framework提供的...
如何在ASP.NET Core MVC中使用动作筛选器
06-08
要在ASP.NET Core MVC中使用动作筛选器，请按照以下步骤： 1. 创建一个类并实现IActionFilter接口。 ```csharp public class SampleActionFilter : IActionFilter { public void OnActionExecuting...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值