echarts在.Net中使用实例(二) 使用ajax动态加载数据

简介:

通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以.

option

名称 描述
{color}backgroundColor 全图默认背景,(详见backgroundColor),支持rgba,默认为无,透明
{Array} color 数值系列的颜色列表,(详见color),可配数组,eg:['#87cefa', 'rgba(123,123,123,0.5)','...'],当系列数量个数比颜色列表长度大时将循环选取
{boolean}renderAsImage 非IE8-支持渲染为图片,(详见renderAsImage
{boolean}calculable 是否启用拖拽重计算特性,默认关闭,(详见calculable,相关的还有 calculableColor, calculableHolderColornameConnector, valueConnector
{boolean}animation 是否开启动画,默认开启,(详见 animation,相关的还有 addDataAnimation, animationThresholdanimationDuration, animationDurationUpdate , animationEasing
{Object} timeline 时间轴(详见timeline),每个图表最多仅有一个时间轴控件
{Object} title 标题(详见title),每个图表最多仅有一个标题控件
{Object} toolbox 工具箱(详见toolbox),每个图表最多仅有一个工具箱
{Object} tooltip 提示框(详见tooltip),鼠标悬浮交互时的信息提示
{Object} legend 图例(详见legend),每个图表最多仅有一个图例,混搭图表共享
{Object}dataRange 值域选择(详见dataRange),值域范围
{Object}dataZoom 数据区域缩放(详见dataZoom),数据展现范围选择
{Object}roamController 漫游缩放组件(详见roamController),搭配地图使用
{Object} grid 直角坐标系内绘图网格(详见grid
{Array | Object}xAxis 直角坐标系中横轴数组(详见xAxis),数组中每一项代表一条横轴坐标轴,标准(1.0)中规定最多同时存在2条横轴
{Array | Object}yAxis 直角坐标系中纵轴数组(详见yAxis),数组中每一项代表一条纵轴坐标轴,标准(1.0)中规定最多同时存在2条纵轴
{Array} series 驱动图表生成的数据内容(详见series),数组中每一项代表一个系列的特殊选项及数据

 

首先定义一个Serial类

 

接着将Serial实例化并将其转化为json格式(必须用大神器:Newtonsoft.Json.dll),代码如下图

 

前台代码只需要用ajax来获取值并赋给option的serial属性即可

所见即所得

 

当然,最后奉上源码!

 

源代码下载


本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/6253522.html,如需转载请自行联系原作者

相关文章
|
28天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
116 1
|
2月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
130 23
echarts地图数据信息流向图效果
|
27天前
|
SQL XML 关系型数据库
入门指南:利用NHibernate简化.NET应用程序的数据访问
【10月更文挑战第13天】NHibernate是一个面向.NET的开源对象关系映射(ORM)工具,它提供了从数据库表到应用程序中的对象之间的映射。通过使用NHibernate,开发者可以专注于业务逻辑和领域模型的设计,而无需直接编写复杂的SQL语句来处理数据持久化问题。NHibernate支持多种数据库,并且具有高度的灵活性和可扩展性。
39 2
|
1月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
54 2
|
28天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
358 0
|
3月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
3月前
|
开发框架 .NET 数据库连接
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
4月前
|
开发框架 JSON 前端开发
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
|
3月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
50 0