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

相关文章

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

MySQL8.0设置redo缓存大小的实现

《MySQL8.0设置redo缓存大小的实现》本文主要在MySQL8.0.30及之后版本中使用innodb_redo_log_capacity参数在线更改redo缓存文件大小,下面就来介绍一下,具有一... mysql 8.0.30及之后版本可以使用innodb_redo_log_capacity参数来更改

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法:总结:设置连接超时目的设置客户端与服务器之间的连接

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Windows设置nginx启动端口的方法

《Windows设置nginx启动端口的方法》在服务器配置与开发过程中,nginx作为一款高效的HTTP和反向代理服务器,被广泛应用,而在Windows系统中,合理设置nginx的启动端口,是确保其正... 目录一、为什么要设置 nginx 启动端口二、设置步骤三、常见问题及解决一、为什么要设置 nginx

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo

如何设置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设置永久生效步骤