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

相关文章

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法:临时设置(Windows用`set`,Linux/macOS用`export`)、永久设置(系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量(适用于当前会话)永久设置环境变量(Windows系统

Mysql中设计数据表的过程解析

《Mysql中设计数据表的过程解析》数据库约束通过NOTNULL、UNIQUE、DEFAULT、主键和外键等规则保障数据完整性,自动校验数据,减少人工错误,提升数据一致性和业务逻辑严谨性,本文介绍My... 目录1.引言2.NOT NULL——制定某列不可以存储NULL值2.UNIQUE——保证某一列的每一

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发(goroutine)、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置(VS Code)一些基本

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快?想要通过设置路由器mtu获得最佳网速,该怎么设置呢?下面我们就来看看路由器MTU设置最佳网速的技巧... 答:1500 MTU值指的是在网络传输中数据包的最大值,合理的设置MTU 值可以让网络更快!mtu设置可以优化不同的网