Echarts实现两两重叠柱状图

需求是实现两个柱状图重叠在一起，试过barGap: '-100%'发现都重叠在一起了，只在有两个柱状图时有效，如果是4个实现两两重叠就无法使用，以下方法可以实现两两重叠的柱状图

option = {tooltip: {},grid: {top: 40,left: 20,right: 20,bottom: 10,containLabel: true},xAxis: [{type: 'category',data: ['变电中心1', '变电中心2', '变电中心3', '变电中心4', '变电中心5'],axisTick: {show: false},}, {show: false,type: 'category',data: ['', '', '', '', '']}, {show: false,type: 'category',data: ['', '', '', '', '']}, {show: false,type: 'category',data: ['', '', '', '', '']}],yAxis: [{type: 'value',name: '个',splitLine: {show: false},}, {type: 'value',name: '%',splitLine: {show: false},}],color: ['#124C43', '#33CA85', '#E6823E', '#3F5332', '#FDEA33', '#FB0303'],series: [{name: '应开工项目',data: [120, 200, 150, 80, 70],type: 'bar',barMaxWidth: 18,xAxisIndex: 0,itemStyle: {color: '#124C43'}},{name: '',type: 'bar',show:false, barWidth: 18, data: [0, 0, 0, 0], xAxisIndex: 0},{name: '',type: 'bar',show:false, barWidth: 18, data: [0, 0, 0, 0], xAxisIndex: 1},{name: '实际开工项目',data: [80, 180, 130, 80, 60],type: 'bar',barMaxWidth: 18,xAxisIndex: 2,itemStyle: {color: '#33CA85'}},{name: '应竣工项目',data: [110, 200, 150, 80, 60],type: 'bar',barMaxWidth: 18,xAxisIndex: 1,itemStyle: {color: '#3F5332'}},{name: '',type: 'bar',show:false, barWidth: 18, data: [0, 0, 0, 0], xAxisIndex: 2},{name: '',type: 'bar',show:false, barWidth: 18, data: [0, 0, 0, 0], xAxisIndex: 3},{name: '实际竣工项目',data: [60, 130, 110, 80, 40],type: 'bar',barMaxWidth: 18,xAxisIndex: 3,itemStyle: {color: '#FDEA33'}},]};

Echarts实现两两重叠柱状图相关推荐

在vue文件引入echarts_vue文件中使用echarts.js的两种方式
最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echa ...
确定一组矩形是否有两个重叠的算法
注:更正一下:在英文原版书中."请给出一个能在O(nlgn)"时间里确定一组矩形中是否有两个重叠的算法. "而不是中文版的 O(lgn).由于这个问题里涉及的排序算法就至 ...
html5如何让多张图片重叠,css怎么让两张图片重叠？
css怎么让两张图片重叠?下面本篇文章给大家介绍一下使用CSS让两张图片重叠的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让两张图片重叠? 想要使用css把两个图 ...
java 读取栅格,提取两个重叠栅格的数据
我正在尝试提取两个重叠栅格集的数据(一个,一堆35个栅格,全部来自同一个源,第二个是高程栅格),以获取每个栅格的值(值的平均值)的data.frame所有栅格的像素 . 栅格堆栈的描述如下: > ...
解决图像目标检测两框重叠问题
文章目录 1 问题现象 2 解决办法 3 Non-Maximum Suppression 原理 3.1 什么是非极大值抑制 3.2 为什么要用非极大值抑制 3.3 如何使用非极大值抑制 3.4 效果 ...
【Vulkan学习记录-基础篇-2】用Vulkan画两个重叠的矩形
在前一篇中完成了对Vulkan的初始化和三角形的绘制,其中很多东西还没有被用到,这一节最终将绘制这样两个重叠的矩形,并且它们会一直绕着屏幕中心点进行旋转. 将要补充使用的内容有:VertexBuffe ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
echart饼图标签重叠_解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
ggplot2箱式图两两比较_如何在ggplot2图形上添加显著性差异注释？
研究者常常要比较两组数据是否有统计学差异,并且要将这种差异在图形上通过线和注释标注出来. ggplot2包是一个很好的可视化包,ggsignif包是ggplot2包的一个扩展包. 今天来学习怎么在gg ...

Echarts实现两两重叠柱状图

Echarts实现两两重叠柱状图相关推荐

最新文章

热门文章