echarts使用总结

最近项目大量的曲线图,柱状图,饼图...总结一下使用过程中的小问题及解决方法 . 

1.当x轴太拥挤,x轴数据不能全部展示怎么办?

这时候就只需要在xAxis的axisLabel对象中添加属性 interval : 0 就可以显示全部数据 , interval 属性是用来调整x轴数据的间距的 , 数值越大间距越大 .

xAxis: [axisLabel: {interval:0, }]

2.当x轴数据太多,水平展示太过拥挤,可以选择垂直展示或者倾斜展示

xAxis的axisLabel对象中添加属性 rotate : 30 ,这里30是倾斜度数 , 垂直设置为90度即可

xAxis: [axisLabel: {rotate: 30,}]

3.对echarts中的属性进行操作后,需要更新echarts图,怎么操作?

首先要确定,echarts 的 option 是否是操作后的最新数据,如果不是则需要对 option 进行检查,直到拿到最新数据再使用 this.$ref.mychart.setOption(this.option) 进行视图更新, 如果使用 this.$ref.mychart.setOption(this.option) 更新无效,则可以使用 this.$ref.mychart.setOption(this.option , true) 强制更新

 // 强制刷新页面,truethis.$nextTick(() => {this.$refs.mychart.setOption(this.option, true)})

4.echarts缩放组件dataZoom , 当x轴数据太多数据不够展示

dataZoom: [{type: 'slider',show: true,xAxisIndex: [0],start: 1,end: 35,  //默认缩放组件宽度height: 15,bottom: 25,handleStyle: {color: '#e6e6e6'},borderColor: '#2E4258', // 组件边框的颜色fillerColor: '#2785D1', // 滑动的填充色backgroundColor: '#132E49', // 背景色showDataShadow: false, //屏蔽折线图,true为显示折线图showDetail: false, //关闭:拖拽时候显示详细数值信息moveHandleSize: 0 // 上方移动手柄的尺寸高度},{type: 'inside',xAxisIndex: [0],start: 1,end: 35  //默认缩放组件宽度// height:10,}],

效果如下: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/727052.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux基础命令[11]-find

文章目录 1. find 命令说明2. find 命令语法3. find 命令示例3.1 不加参数3.2 按照时间3.3 -empty(空白文件或目录)3.4 -name(名称查找)3.5 -size(大小查找)3.6 -type(类型查找)3.7 …

砝码称重 蓝桥杯

在C中,fabs()和abs()都用于计算数字的绝对值,但它们之间有一些区别。 fabs(double x):计算浮点数x的绝对值,返回一个double类型的结果。 abs(int x):计算整数x的绝对值,返回一个int类型的结果。 数组的默…

1w字带你快速入门Docker

1. 什么是容器 容器是一种轻量级的、可移植的、自包含的软件单元,它包含运行应用程序所需的所有内容,包括代码、运行时、系统工具、系统库和设置。容器与虚拟机类似,但它们更加轻量级,并且依赖于宿主内核。容器可以使用 Docker 等…

太阳能光伏电池的simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 光伏电池的基本结构 4.2 光伏电池的工作原理 5.完整工程文件 1.课题概述 太阳能光伏电池的simulink建模与仿真.分析不同光照温度,光照强度下的光伏电池的U-I特性曲线以及P-V特性曲线。 …

java VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城 短视频商城 小程序商城搭建

1. 涉及平台 平台管理、商家端(PC端、手机端)、买家平台(H5/公众号、小程序、APP端(IOS/Android)、微服务平台(业务服务) 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…

php安装kafka

我的开发环境是php7.3 ,先来部署两个php扩展,php7.3目录下放librdkafka.dll,ext/php_rdkafka.dll,php.ini增加,[rdkafka] extension php_rdkafka.dll php7.3对应的扩展包链接:PECL :: Package :: rdkafka 看自己php版本对应在这里找PECL :: …

OpenAI-Sora学习手册

通过Sora看2024红利:文生视频,虽然AI不一定是风口,但一定是未来深入到生活工作,乃至思考的必备工具。 目录 Sora介绍 Sora基础介绍 Sora官方网址 Sora的价值 1.物理世界的交互 2.创意世界的绽放 3.多角色、更精准、更细节…

Vue时间轴

之前有这样子的需求没有用第三方插件于是自己写一个简单的时间轴 时间轴滚动条并左右切换滚动条位置相对应移动 <div class"time-scrollbar"><div v-if"timeLineData.length>0" class"scrollbar-content"><div class"ar…

SAP PP学习笔记07 - 简单BOM,派生BOM,多重BOM,批量修改工具 CEWB

上一章讲了BOM的操作。 SAP PP学习笔记06 - BOM操作&#xff08;BOM 展开&#xff0c;BOM 使用先一览&#xff0c;BOM比较&#xff0c;批量更改BOM&#xff09;-CSDN博客 本章延续上一章&#xff0c;继续讲BOM操作。 主要讲 派生BOM&#xff0c;多重BOM&#xff0c;以及BOM批…

收费的Excel,不收费的国产WPS、Ever这4款加强版,谁口碑更好?

国产软件存在的问题不在少数&#xff0c;诸如“流氓捆绑”、“广告弹屏”、“APP乱象”、“大数据杀熟”等弊端&#xff0c;让许多人对其嗤之以鼻。 尽管国内软件往往免费&#xff0c;而国外软件需要付费&#xff0c;大家还是更愿意选择付费使用国外软件&#xff0c;并且许多国…

Selenium自动化测试-3.元素定位(1)

这次我们要分享的是对元素的定位&#xff0c;在一个页面中有很多不同的策略来定位一个元素&#xff0c;我们选择最合适的方法即可。 一个页面最基本组成单元是元素&#xff0c;想要定位一个元素&#xff0c;我们需要特定的信息来说明这个元素的唯一特征。 selenium 主要提供了…

用java实现A*寻路算法

前言&#xff1a; 最近的开发中遇到了寻路这个知识点&#xff0c;然后去了解了一下最常见的A算法&#xff0c;本会会结合我的理解&#xff0c;用最通俗易懂的话语讲解A算法的原理&#xff0c;下面会给出代码示例。 说到寻路算法&#xff0c;就涉及到了图的遍历&#xff0c;然…

代码学习记录14

随想录日记part14 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.03.07 主要内容&#xff1a;今天的主要内容是二叉树的第三部分&#xff0c;主要涉及二叉树最大深度&#xff1b;二叉树最小深度&#xff1b;完全二叉树的节点个数。 104.二叉树的最大深度111.二…

Jmeter基础使用---Token鉴权接口关联

接口测试流程&#xff1a; 查看API接口文档&#xff0c;熟悉接口业务&#xff08;地址、端口、参数、鉴权、状态码&#xff09;设计接口测试用例&#xff08;正例&#xff1a;正确的结果&#xff1b;反例&#xff1a;鉴权异常、参数异常、兼容异常、其他异常&#xff09;使用接…

受投资人青睐,易鑫租赁深交所再发8.10亿ABS,利率再创新低

近日&#xff0c;上海易鑫融资租赁有限公司&#xff08;以下简称“易鑫租赁”&#xff09;成功发行“天风-易鑫租赁惠民4期资产支持专项计划”&#xff0c;募集资金8.10亿元&#xff08;人民币&#xff0c;下同&#xff09;。此次发行利率再创易鑫ABS历史新低。 2023年1月&…

windows安装程序无法将windows配置为此计算机

目录 问题描述 问题原因 解决办法 方法一 方法二 方法三&#xff1a; 问题描述 重装系统时显示windows安装程序无法将windows配置在此计算机硬件上. 问题原因 安装介质已损坏 如果可引导的安装介质&#xff08;如DVD或USB驱动器&#xff09;损坏或损坏&#xff0c;安装过…

17-Java解释器模式 ( Interpreter Pattern )

Java解释器模式 摘要实现范例 解释器模式&#xff08;Interpreter Pattern&#xff09;实现了一个表达式接口&#xff0c;该接口解释一个特定的上下文 这种模式被用在 SQL 解析、符号处理引擎等 解释器模式提供了评估语言的语法或表达式的方式&#xff0c;它属于行为型模式 …

buildadmim生成代码时让菜单有层级

当我们使用buildadmin生成代码的时候&#xff0c;在菜单的部分&#xff0c; 有时希望它生的是一个带有层级的菜单&#xff0c;有时候则想生成一个没有层级的菜单 like this 经过本人测试 如果我们要生成没有层级的菜单 我们可以在高级设置中的 相对位置处更改&#xff0c;同时…

使用java批量写入环境变量

环境需求 jdk版本&#xff1a;1.8 jna依赖&#xff1a; <dependency><groupId>net.java.dev.jna</groupId><artifactId>jna</artifactId><version>5.10.0</version></dependency><dependency><groupId>net.java.…

ServletContext

ServletContext 1.共享数据 ServletContext servletContext this.getServletContext(); String username "徐凤年"; servletContext.setAttribute("username",username);ServletContext servletContext this.getServletContext(); String username (…