echarts设置上下Y轴,多轴设计

2024-01-23 00:10
文章标签 设计 设置 echarts 多轴

本文主要是介绍echarts设置上下Y轴,多轴设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

echarts 设计双Y轴,X轴在中间位置,实现图形上下延伸,
echars设置双Y轴,图形上下延伸

option = {legend:{data:["直接访问","间接"],},color: ['#3398DB'],tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器,坐标轴触发有效type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'}},grid:[     //用于调整X轴以及Y轴的位置{show: false,bottom: '12%',left: 93,right: 100,containLabel: true,height: '40%'}, {show: false,top: '48%',left: 124,right: 100,height: '0%',zlevel:100}, {show: false,top: '8%',// left: 76,left: 93,right: 100,containLabel: true,height: '40%'}],xAxis : [{type: 'category',position: 'bottom',axisLine: {show: false,},axisTick: {show: false},axisLabel: {show: false,},data: [],}, {gridIndex: 1,type: 'category',position: 'center',axisLine: {show: true},axisTick: {show: true},zlevel:200,axisLabel: {show: true,align: 'center',textStyle: {color: '#323232',fontSize: 12}},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},{gridIndex: 2,type: 'category',position: 'top',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false,},data: [],}],yAxis : [{type: 'value',inverse: true,   //echarts Y轴翻转属性,position: 'left',   //位置属性axisLabel: {show: true,textStyle: {color: '#646464',fontSize: 12,             }},splitLine: {show: true,lineStyle: {color: "rgba(0,162,255,0.08)",width: 1,}}}, {gridIndex: 1,   //对应的是grid  通过grid设置X Y相对位置show: false,}, {gridIndex: 2,type: 'value',position: 'left',    //双Y轴一个翻转一个不翻转axisLabel: {show: true,textStyle: {color: '#646464',fontSize: 12,            }},splitLine: {show: true,lineStyle: {color: "rgba(0,162,255,0.08)",width: 1,}}}],series : [{gridIndex:0,   //选取调整好的轴,调整图形是向上还是向下name:'直接访问',type:'bar',barWidth: '40%',data:[300, 52, 200, 334, 390, 330, 220],xAxisIndex: 2,yAxisIndex: 2,itemStyle:{color:"#B23AEE"}},{gridIndex:2,  选取调整好的轴,调整图形是向上还是向下name:'间接',type:'bar',barWidth: '40%',data:[100, 300, 50, 150, 210, 110, 48],}]
};

这篇关于echarts设置上下Y轴,多轴设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务,它允许用户配置计算机的启动选项、硬件设置和其他关键参数,该怎么进入呢?下面... 随着计算机技术的发展,大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候,我们也

Linux中chmod权限设置方式

《Linux中chmod权限设置方式》本文介绍了Linux系统中文件和目录权限的设置方法,包括chmod、chown和chgrp命令的使用,以及权限模式和符号模式的详细说明,通过这些命令,用户可以灵活... 目录设置基本权限命令:chmod1、权限介绍2、chmod命令常见用法和示例3、文件权限详解4、ch

SpringBoot项目引入token设置方式

《SpringBoot项目引入token设置方式》本文详细介绍了JWT(JSONWebToken)的基本概念、结构、应用场景以及工作原理,通过动手实践,展示了如何在SpringBoot项目中实现JWT... 目录一. 先了解熟悉JWT(jsON Web Token)1. JSON Web Token是什么鬼

使用Spring Cache时设置缓存键的注意事项详解

《使用SpringCache时设置缓存键的注意事项详解》在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​... 目录引言1. 缓存键的基本概念2. 默认缓存键生成器3. 自定义缓存键3.1 使用​​@Cacheab

java如何调用kettle设置变量和参数

《java如何调用kettle设置变量和参数》文章简要介绍了如何在Java中调用Kettle,并重点讨论了变量和参数的区别,以及在Java代码中如何正确设置和使用这些变量,避免覆盖Kettle中已设置... 目录Java调用kettle设置变量和参数java代码中变量会覆盖kettle里面设置的变量总结ja

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系