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

相关文章

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

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. 查