echarts中series中的数据如何如何循环显示数据

2024-09-02 04:38

本文主要是介绍echarts中series中的数据如何如何循环显示数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

echarts中的数据格式如下

var option = {
title : {
text: '月份对比',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['3月','4月','5月','6月']
},
toolbox: {
show : false,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['襄城区','樊城区','襄州区','高新区','东津新区','襄阳市直','枣阳市','宜城市','老河口市','南漳县','保康县','谷城县']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'3月',
type:'bar',
data:[32.54, 47.99, 38.64, 40.27,35.94,49.92,46.64,39.49,39.25,45,40.29,40.8],

},
{
name:'4月',
type:'bar',
data:[32.36, 42.06, 41.27, 39.6,48.35,49.54,41.46,38.65,37.45,47.14,40.6,42.4],

},
{
name:'5月',
type:'bar',
data:[32.36, 46.81, 42.5,39.38,0,52.84,46.06,42.47,37.75,47.1,42.8,40.63],

},
{
name:'6月',
type:'bar',
data:[32.36, 46.81, 42.5,39.38,0,52.84,46.06,42.47,37.75,47.1,42.8,40.63],
}
]
};

series中的数据需要从数据库中查询出来,然后循环显示。

后台传回的数据格式如下

 

[{"area":["襄城区","樊城区","襄州区","高新区","东津新区","襄阳市直","枣阳市","宜城市","老河口市","南漳县","保康县","谷城县"],"listmonth":["2017-04","2017-05","2017-06"],"listscore":[[32.54,47.99,38.64,40.27,35.94,49.92,46.64,39.49,39.25,45.87,40.29,40.81],[32.36,42.06,41.27,39.6,48.35,49.54,41.46,38.65,37.45,47.14,40.69,42.42],[32.36,46.81,42.5,39.38,0,52.84,46.06,42.47,37.75,47.1,42.81,40.63]]}]

循环方法如下:

 

var series=[];
   for(var i = 0;i<result['listmonth'].length;i++){
       series.push({
           name: result['listmonth'][i],
           type: 'bar',
           data: result["listscore"][i]
       });

 }

效果如图

git中小例子的地址https://github.com/kacha886/echarts.git

这篇关于echarts中series中的数据如何如何循环显示数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129018

相关文章

javaScript在表单提交时获取表单数据的示例代码

《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法:使用FormData对象、手动提取表单数据、使用querySelector获取单个字... 方法 1:使用 FormData 对象FormData 是一个方便的内置对象,用于获取表单中的键值

Rust中的BoxT之堆上的数据与递归类型详解

《Rust中的BoxT之堆上的数据与递归类型详解》本文介绍了Rust中的BoxT类型,包括其在堆与栈之间的内存分配,性能优势,以及如何利用BoxT来实现递归类型和处理大小未知类型,通过BoxT,Rus... 目录1. Box<T> 的基础知识1.1 堆与栈的分工1.2 性能优势2.1 递归类型的问题2.2

Python使用Pandas对比两列数据取最大值的五种方法

《Python使用Pandas对比两列数据取最大值的五种方法》本文主要介绍使用Pandas对比两列数据取最大值的五种方法,包括使用max方法、apply方法结合lambda函数、函数、clip方法、w... 目录引言一、使用max方法二、使用apply方法结合lambda函数三、使用np.maximum函数

Python中顺序结构和循环结构示例代码

《Python中顺序结构和循环结构示例代码》:本文主要介绍Python中的条件语句和循环语句,条件语句用于根据条件执行不同的代码块,循环语句用于重复执行一段代码,文章还详细说明了range函数的使... 目录一、条件语句(1)条件语句的定义(2)条件语句的语法(a)单分支 if(b)双分支 if-else(

Redis的数据过期策略和数据淘汰策略

《Redis的数据过期策略和数据淘汰策略》本文主要介绍了Redis的数据过期策略和数据淘汰策略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录一、数据过期策略1、惰性删除2、定期删除二、数据淘汰策略1、数据淘汰策略概念2、8种数据淘汰策略

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

Python给Excel写入数据的四种方法小结

《Python给Excel写入数据的四种方法小结》本文主要介绍了Python给Excel写入数据的四种方法小结,包含openpyxl库、xlsxwriter库、pandas库和win32com库,具有... 目录1. 使用 openpyxl 库2. 使用 xlsxwriter 库3. 使用 pandas 库

SpringBoot定制JSON响应数据的实现

《SpringBoot定制JSON响应数据的实现》本文主要介绍了SpringBoot定制JSON响应数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录前言一、如何使用@jsonView这个注解?二、应用场景三、实战案例注解方式编程方式总结 前言

使用Python在Excel中创建和取消数据分组

《使用Python在Excel中创建和取消数据分组》Excel中的分组是一种通过添加层级结构将相邻行或列组织在一起的功能,当分组完成后,用户可以通过折叠或展开数据组来简化数据视图,这篇博客将介绍如何使... 目录引言使用工具python在Excel中创建行和列分组Python在Excel中创建嵌套分组Pyt

在Rust中要用Struct和Enum组织数据的原因解析

《在Rust中要用Struct和Enum组织数据的原因解析》在Rust中,Struct和Enum是组织数据的核心工具,Struct用于将相关字段封装为单一实体,便于管理和扩展,Enum用于明确定义所有... 目录为什么在Rust中要用Struct和Enum组织数据?一、使用struct组织数据:将相关字段绑