Echarts绘制双x轴柱状图_echarts 双柱图-程序员宅基地

技术标签: angular.js  前端工具  前端  javascript  

createdEcharts1() {
      const labelData = this.appInfoCounts.appCounts.map(item => { return item.name });
      const appCountsList1 = this.appInfoCounts.appCounts.map(item => { return (item.value1) });
      const appCountsList2 = this.appInfoCounts.appCounts.map(item => { return (item.value2) });
      const effectCountsList = this.appInfoCounts.effectCounts.map(item => { return (item.value) });
      console.log(labelData,appCountsList1,appCountsList2,effectCountsList);

      var dom = document.getElementById('container1');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var option;
      option = {
        legend: {
          data: ['对内','对外', '成果数量'],
          left: 'center',
          bottom: 15,
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 20,
          borderRadius: 4,
          textStyle: {
            color: '#262C41',
            fontSize: 14
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            var tooltip = params[0].name + '<br/>';
            params.forEach(function(item) {
              tooltip += item.marker + item.seriesName + ':' + Math.abs(item.value) + '<br/>';
            });
            return tooltip;
          }
        },

        xAxis: [{
          type: 'value',
          min: -1,
          max: 0,
          gridIndex: 0,
          // inverse: true, // 反向显示
          // interval:1,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: function(v) {
              return (v * -1)
            }
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E0E0E0',
              type: 'dashed'
            }
          }
        }, {
          type: 'value',
          gridIndex: 1,
          min: 0,
          interval:1,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E0E0E0',
              type: 'dashed'
            }
          }
        }],
        yAxis: [
          {
            type: 'category',
            gridIndex: 0,
            inverse: true,
            data: labelData,
            axisTick: { show: false },
            axisLabel: {
              show: false,
            },
            axisLine: { show: false },
          },
          {
            type: 'category',
            gridIndex: 1,
            inverse: true,
            offset:40,
            data: labelData, // 使用同一个 labelData
            axisTick: { show: false },
            axisLabel: {
              width: "20%", // 根据需要调整标签的宽度
              align:'center',
              verticalAlign:'middle',
            },
            axisLine: { show: false },
          },
        ],

        grid: [
          {
            top: 20,
            width: '34%', // 调整这里的宽度
            left: '5%',
            gridIndex: 0,
          },
          {
            top: 20,
            left: '60%', // 调整这里的 left
            right: '5%',
            gridIndex: 1,
          },
        ],
        color: ['#6295f9','#64ccf5', '#00c2b6'],
        series: [{
          name: '对内',
          type: 'bar',
          stack:'left',
          gridIndex: 0,
          itemStyle: {
            normal: {
              show: true,
              color: '#6295f9',
              // barBorderRadius: 50,
              borderWidth: 0,
              borderColor: '#333',
              label: {
                show: false,
                position: 'left',
                formatter: function(v) {
                  return (v.value * -1);
                }
              }
            }
          },
          data: appCountsList1
        },{
          name: '对外',
          type: 'bar',
          stack:'left',
          gridIndex: 0,
          itemStyle: {
            normal: {
              show: true,
              color: '#64ccf5',
              // barBorderRadius: 50,
              borderWidth: 0,
              borderColor: '#333',
              label: {
                show: false,
                position: 'left',
                formatter: function(v) {
                  return (v.value * -1);
                }
              }
            }
          },
          data: appCountsList2
        },
          {
            name: '成果数量',
            type: 'bar',

            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                show: true,
                color: '#00c2b6',
                // barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333',
                label: {
                  show: false,
                  position: 'right',
                  formatter: function(v) {
                    return v.value;
                  }
                }
              }
            },
            data: effectCountsList
          }

        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      window.addEventListener('resize', myChart.resize);
    },

因为刚开始左边的x轴呈负数显示-1--0,因为在代码中,我们使用了 min: 0 和 max: 1 来限制左边 x 轴的范围为 0 到 1,并且使用了 inverse: true 来反向显示刻度。同时,formatter 函数中使用了 -1 乘以刻度值来将刻度值转换为负数。

因此,无论你如何调整图表的其他部分,左边的 x 轴都将保持负数。如果你希望左边的 x 轴显示正数,你需要相应地调整代码。例如,将 min 设置为 -1,将 max 设置为 0,并删除 inverse: true。这样可以使左边的 x 轴从 -1 到 0,并且显示为正数,就完成!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ysw716/article/details/136512450

智能推荐

计算机网络——以太网帧结构/格式_以太网帧包括哪些字段-程序员宅基地

文章浏览阅读5.8k次,点赞4次,收藏15次。目录目的地址源地址类型字段数据字段FCS前同步码格式如图所示:可以看到,以太网帧由6个字段组成:目的地址目标适配器的MAC地址 (即物理地址,也称为链路地址、MAC地址、LAN地址。关于它的详细介绍以及其他寻址方式的介绍可以看这篇博客:计算机网络知识点——寻址(物理地址、逻辑地址、端口地址与专用地址))。源地址传输该帧到局域网上的适配器的MAC地址。类型字段用来标记上一层使用的是什么协议,以便把收到MAC帧的数据上交给上一层的这个协议。数据字段46~1500个字节,46是因为以太网MA_以太网帧包括哪些字段

DWA路径规划算法-程序员宅基地

文章浏览阅读9.7k次,点赞20次,收藏231次。来源丨古月居1.DWA路径规划基本原理动态窗口法主要是在速度(v,w)空间中采样多组速度,并模拟机器人在这些速度下一定时间(sim_period)内的轨迹。在得到多组轨迹以后,对这些轨迹进行评价,选取最优轨迹所对应的速度来驱动机器人运动。该算法突出点在于动态窗口这个名词,它的含义是依据移动机器人的加减速性能限定速度采样空间在一个可行的动态范围内。2.DWA路径规划流程3...._dwa算法

LiveGBS国标视频平台如何获取接入视频通道的直播流地址HLS/HTTP-FLV/WS-FLV/WebRTC/RTMP/RTSP-程序员宅基地

文章浏览阅读3k次。1、背景说明LiveGBS国标GB/T28181流媒体服务器软件,支持设备|平台GB28181注册接入、向上级联第三方国标平台, 可视化的WEB页面管理(页面源码开源);支持云台控制、设备录像检索、回放,支持语音对讲,用户管理, 多种协议流输出,实现浏览器无插件直播。在项目过程中,需要播放视频流。视频集成的方式有几种呢?下面会详细说明2中常见的集成方式。2、视频集成方式分享页面集成直接..._直播流地址

Android 中使用 dlib+opencv 实现动态人脸检测-程序员宅基地

文章浏览阅读230次。1 概述完成 Android 相机预览功能以后,在此基础上我使用 dlib 与 opencv 库做了一个关于人脸检测的 demo。该 demo 在相机预览过程中对人脸进行实时检测,并将检测到的人脸用矩形框描绘出来。具体实现原理如下:采用双层 View,底层的 TextureView 用于预览,程序从 TextureView 中获取预览帧数据,然后调用 dlib 库对帧数据进行..._android com.example.facedetection.face

Oracle不要让临时表空间影响Oracle数据库性能_临时表空间不建会怎样-程序员宅基地

文章浏览阅读1.6k次。不要让临时表空间影响Oracle数据库性能Oracle数据库中进行排序、分组汇总、索引等到作时,会产生很多的临时数据。如有一张员工信息表,数据库中是安装记录建立的时间来保存的。如果用户查询时,使用Order BY排序语句指定按员工编号来排序,那么排序后产生的所有记录就是临时数据。对于这些临时数据,Oracle数据库是如何处理的呢?通常情况下,Oracle数据库会先将这些临时数据存放到内存的_临时表空间不建会怎样

【蓝桥杯选拔赛真题92】Scratch消失的水母 第十五届蓝桥杯scratch图形化编程 少儿编程创意编程选拔赛真题解析-程序员宅基地

文章浏览阅读372次。​scratch消失的水母第十五届青少年蓝桥杯scratch编程选拔赛真题解析一、题目要求编程实现1)每次点击绿旗,水母说“请输入 2~10 的整数",同时在舞台下方显示输入框,如图所示2)输入完成后,在舞台的随机位置,出现输入数量的水母,水母不碰到舞台边缘且大小随机随机范围为 50~150),如图所示,例如:输入的是53)等待1秒后,每只水母一直说自己的大小,如图所示4)然后,当第一次按下空格键时,最大的水母消失,如图所示5)接下来每按下一次空格按键,当前最大的_scratch消失的水母

随便推点

oracle一个字符,Oracle的一个字符串数据变为多行记录-程序员宅基地

文章浏览阅读391次。Oracle的一个字符串数据变为多行记录--把p_string的值动态切分为表的行数据create or replace type split_rec as object (id varchar2(50),userId varchar2(32767));create or replace type split_tbl as table of split_rec;CREATE OR REPLACE ..._oracle 根据某一个字段的数量生成多行

小甲鱼零基础入门学习python--课后作业(更新至第19讲,持续更新)_小甲鱼零基础入门python课后作业-程序员宅基地

文章浏览阅读2.1w次,点赞30次,收藏268次。本章内容:小甲鱼零基础入门学习python--课后作业1、基础部分的作业2、函数部分的作业3、字典、集合、文件部分作业4、异常5、EasyGui6、类、对象、魔法方法7、模块8、爬虫1、基础部分的作业[课后作业] 第001讲:我和Python的第一次亲密接触 | 课后测试题及答案. [课后作业] 第002讲:用Python设计第一个游戏 | 课后测试题及答案.[课后作业] 第003讲:......_小甲鱼零基础入门python课后作业

mysql5.6启动错误1053_Windows无法启动MySQL服务,错误 1053-程序员宅基地

文章浏览阅读1.4k次。解决方法:正常重启电脑试试看,如果不行,在用下面试试MYSQL 1053错误 解决方法:在DOS命令行使用第一步:运行 -> cmd + 回车 (输入下面的命令)mysqld-nt remove mysqlservice的方式卸载此服务,它提示卸载成功,(是英文成功的意思)注:如果提示失败,服务正在运行,在任务栏中结束mysqld-nt.exe第二步:mysqld-nt install my..._mysqld-nt remove mysqlservice

【RT-Thread学习笔记】一起学习下RT-Thread的C语言编码规范_c语言rt_-程序员宅基地

文章浏览阅读7.2k次,点赞4次,收藏12次。本文主要介绍了RRT开源操作系统的C语言编码规范,大家一起来学习吧。_c语言rt_

android自动打开apk文件失败,【Android】DownloadManager 打开url下载的APK文件无法打开的问题 cannot open file...-程序员宅基地

文章浏览阅读1.4k次。问题如标题想用浏览器下载,或者下载器下载应用场景有以下几种:1.监控DownloadManager,文件下载完成时以文件路径的形式发送intent:// install workIntent install = new Intent(Intent.ACTION_VIEW);install.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);String filePath..._error: can't open file: xx.apk

Ubuntu18.04查看glibc的版本号_ubuntu 查看 libc-程序员宅基地

文章浏览阅读6.9k次,点赞3次,收藏3次。pwn@VirtualBox:~$ ls -l /lib/x86_64-linux-gnu/libc.so.6 lrwxrwxrwx 1 root root 12 3月 13 12:35 /lib/x86_64-linux-gnu/libc.so.6 -> libc-2.27.sopwn@VirtualBox:~$ ldd --versionldd (Ubuntu GLIBC 2.2..._ubuntu 查看 libc

推荐文章

热门文章

相关标签