Echars柱状图异步加载数据以及X轴纵向显示实例

2024-06-01 06:48

本文主要是介绍Echars柱状图异步加载数据以及X轴纵向显示实例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本例子来自乡宁县项目中的大数据分析模块

主要实现了柱状图的异步加载,以及数据过大时纵向显示X轴的文本以及强制全部显示


js部分完整实例

<script type="text/javascript">jQuery(document).ready(function($) {var myDate = new Date();var nowYear= myDate.getFullYear();var myChart = echarts.init(document.getElementById('dxpt'));$('lii').click(function(e){   var year=$(this).attr('id');//获取要查询的年份$("li").removeClass("xxbq_change ");//切换样式$("#li"+year).addClass("xxbq_change ");     selectYears(year);
});$(function(){//追加样式    $("#li"+nowYear).addClass("xxbq_change ");initfspt();	
});//初始化图表
function initfspt(){	
// 显示标题,图例和空的坐标轴myChart.setOption({title: {text: '各项措施帮扶数量/户'},tooltip: {},legend: {data:['帮助数量']},grid: {top: 80,right:100,bottom:70},xAxis: {data: [],axisLabel:{//rotate:60, //刻度旋转45度角interval:0,//强制全部显示}},yAxis: {},series: [{name: '帮助数量',type: 'bar',markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'},],label:{normal:{position:'insideTop',formatter:'{b}:{c}',textStyle:{color:'#969696'}}},symbolOffset:[0,'-20%'],},data: []}]});	selectYears(nowYear);//默认加载当年数据
}//装填数据
function insertData(labs, counts) {// 填入数据myChart.showLoading();//遮罩层myChart.setOption({xAxis : {data : labs,axisLabel:{formatter:function(value,index){// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引var ret='';value=labs;//把X轴的值传过来						for(var i=0;i<value[index].length;i++){						if(i==value[index].length-1){ret+=value[index][i];}else{ret+=value[index][i]+'\n';}}return ret;}}},series : [ {// 根据名字对应到相应的系列name : '帮助数量',data : counts} ]});myChart.hideLoading();
}//按年份查询数据
function selectYears(year) {$.ajax({type : "POST",contentType : "application/json",dataType : "html",url : "<%=path%>/dataAnalysis/selsMeas",data:  JSON.stringify({ 'year': year, 'bar': '1' })  ,success: function (data) {var mydata = eval('(' + data + ')');var labs= mydata.lab.split(",");var counts= mydata.strs.split(",");insertData(labs,counts);                        	},error: function(data) {layer.alert("系统繁忙!请稍后再试");}});return false; 
}});
</script>






这篇关于Echars柱状图异步加载数据以及X轴纵向显示实例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左