echarts横向左右对比柱状图，两种展示方式（对向、反向）

已于 2024-10-29 10:50:13 修改
阅读量935 收藏 1
点赞数 5
文章标签： echarts android javascript
于 2024-10-29 10:46:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Missying55/article/details/143322531
版权

1、反向
在这里插入图片描述
option代码如下：

option = {
                toolbox: {
                    feature: {
                    saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                legend: {
                    left: 'center',
                    // top: '6%',
                    itemWidth: 20,
                    itemHeight: 10,
                    itemGap: 20,
                    textStyle: {
                        padding: [3,0,0,0],
                        rich:{}
                    }
                },
                grid: [
                    {              
                        top: '18%',
                        bottom: '0',
                        left: '100px',
                        width: '36%',
                        containLabel: true
                    }, 
                    {            //中间隐藏
                        top: '18%',
                        bottom: '0',
                        left: '53%',
                        width: '0%',
                    },
                    {          //左边的位置
                        top: '18%',
                        bottom: '0',
                        right: '100px',
                        width: '36%',
                        containLabel: true
                    }
                ],
                xAxis: [{
                    type: 'value',
                    inverse: true,
                    show:false 
                }, 
                {
                    gridIndex: 1,
                    show: false
                }, 
                {
                    gridIndex: 2,
                    type: 'value',
                    show:false 
                }],
                yAxis: [
                {                            
                    position: 'right',
                    axisLabel: {
                        position: 'right',
                        show: false
                    },
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['科技招商例会项目','重大科技招商项目','领军企业']
                },
                {
                    gridIndex: 1,
                    position: 'center',
                    axisLine: {
                        show: false
                    }, 
                        axisLabel: {
                        position: 'right',
                    show: false
                    },
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['科技招商例会项目','重大科技招商项目','领军企业']
                },
                {   
                    gridIndex: 2,                      //右边的y坐标轴
                    position: 'left',
                    axisLabel: {
                        show: true
                    },
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['科技招商例会项目','重大科技招商项目','领军企业']
                },
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: 19,
                        name: '扶持企业（家）',
                        itemStyle: {
                            color: '#93BEFF'
                        },
                        label: {
                        show: true, // 显示标签
                        position: 'left', // 标签的位置
                        // 可以通过 formatter 自定义标签的内容
                        formatter: '{c}', // {c} 表示数据值
                        },
                        data: ['40','70','30']
                    },
                    {
                        type: 'bar',
                        barWidth: 19,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        name: '扶持金额（万元）',
                        itemStyle: {
                            color: '#FAC858'
                        },
                        label: {
                        show: true, // 显示标签
                        position: 'right', // 标签的位置
                        // 可以通过 formatter 自定义标签的内容
                        formatter: '{c}', // {c} 表示数据值
                        },
                        data: ['6','10','7']
                    },
                ]
            };

2、对向
在这里插入图片描述
option代码如下

option = {
  toolbox: {
      feature: {
      saveAsImage: { show: true }
      }
  },
  tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
  },
  legend: {
    left: 'center',
    // top: '6%',
    itemWidth: 20,
    itemHeight: 10,
    itemGap: 20,
    textStyle: {
        padding: [3,0,0,0],
        rich:{}
    }
  },
  grid: [
    {             
      top: '18%',
      bottom: '0',
      left: '62%',
      width: '28%',
      containLabel: true
  }, 
  {            //中间隐藏
      top: '18%',
      bottom: '0',
      left: '53%',
      width: '0%',
      height: '68%',
  },
  {        
      top: '18%',
      bottom: '0',
      right: '%',
      width: '28%',
      containLabel: true
  }
  ],
  xAxis: [{
      type: 'value',
      inverse: true,
      show:false 
  }, 
  {
      gridIndex: 1,
      show: false
  }, 
  {
      gridIndex: 2,
      type: 'value',
      show:false 
  }],
  yAxis: [
    {                       
      position: 'right',
      axisLabel: {
        position: 'right',
        show: true
      },
      type: 'category',
      axisTick: {
          show: false
      },
      data: ['科技招商例会项目','重大科技招商项目','领军企业']
    },
    {
      gridIndex: 1,
      position: 'center',
      axisLine: {
          show: false
      }, 
			axisLabel: {
        position: 'right',
        show: false
      },
      type: 'category',
      axisTick: {
          show: false
      },
     data: ['科技招商例会项目','重大科技招商项目','领军企业']
    },
    {                             
      gridIndex: 2,
      position: 'left',
      axisLabel: {
          show: true
      },
      type: 'category',
      axisTick: {
          show: false
      },
      data: ['科技招商例会项目','重大科技招商项目','领军企业']
    }
  ],
  series: [
        {
            type: 'bar',
            barWidth: 19,
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '扶持企业（家）',
            itemStyle: {
                color: '#93BEFF'
            },
            data: ['6','10','7']
        },
        {
            type: 'bar',
            barWidth: 19,
            name: '扶持金额（万元）',
            itemStyle: {
                color: '#FAC858'
            },
            data: ['40','70','30']
        }
    ]
};
Missying55
关注
Python数据可视化 Pyecharts 全局配置
Mr数据杨
06-13 3万+
数据的有效呈现是信息传递的关键，而pyecharts的灵活性为这一过程提供了广阔的创作空间。通过对全局配置和细节设置的深入掌握，用户可以根据不同的需求和场景，定制出具有专业水准的图表。数据可视化不仅仅是将数据转换为图像，它更是数据分析的一部分，帮助观众在短时间内直观理解复杂的信息。随着技术的发展，数据可视化的需求只会愈加重要，而掌握像pyecharts这样的工具，将为未来的数据探索之旅提供更强有力的支持。
echarts柱状图实现左右横向对比
weixin_47194802的博客
05-06 1718
其实是两组数据，其中一组数据改为负数，然后 在展示的时候，在将负数取反。这里数据如果初始为正，先便利一遍加负号。第二处修改数据，转负为正。
echarts横向左右对比柱状图
热心市民小胖纸的博客
02-25 3202
需求 业务需求横向对比柱状图，左边从左到右，右边从右到左。 效果图 代码 var myChart = echarts.init(document.getElementById('chart-panel')); let option = { tooltip: { show: true, trigger: 'axis', axisPointer: { type: 'shadow' } }, le
echarts 实现柱状图左右横向对比显示
热门推荐
Songywaa的博客
03-29 1万+
重点看代码中的注释 ： 处理负半轴的数据显示，后台传负数，代码中处理显示时为正数 接下来直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>对比柱状图</title> <script type...
echarts 如何使柱状图左右展示_Echarts柱状图表格，怎么实现左右滑动？
weixin_39517199的博客
12-19 2085
效果图应为：x轴数据长度为一个月，跨度比较大，想要通过隐藏一半的时间，只显示16天的数据，其余的通过左右滑动的方式展示出来，请问这个怎么实现已经实现下图：代码如下：Echarts绘制横向柱状图(圆角+渐变)var myChart = echarts.init(document.getElementById('main'));//初始化数据var category = ['1', '2', '3',...
echarts 如何使柱状图左右展示_echarts 柱状图展示数据
weixin_39973196的博客
12-19 2088
carEcharts(time,data,data2){let Ehcarts=echarts.init(document.getElementById("carEcharts"))let option={color:["#1FC9E2","#F6D51D"],"title": {"text": "外地车环路分布状态",x: "4%",textStyle: {color: '#fff',fontS...
Echarts图表之柱形对比图
gly_technology的博客
01-22 1649
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Echarts图表</title> <!-- 引入echarts.min.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min....
【Echarts】堆叠条形图 的实现！！！快来看看！
Milk~每天分享一点点，技术进步一点点
09-08 6132
堆叠条形图的实现 先看效果 文件目录 引入Echarts 通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></s
Echarts项目使用总结
hxj_Studio的博客
01-10 613
echarts在React中的搭建方法
echarts详细说明
pyy的博客
09-17 3558
https://www.iteye.com/blog/elang0705-2252577 简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，...
echarts-柱状图
06-26
柱状图：坐标轴刻度与标签对齐。适合于网页，app等。里面的标签内容，需按照要求进行更改。详情可以查看更多关于echart的信息。也可以查看我更多关于echart的介绍和心得。
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变数值文本，涉及点击事件，功能齐全的易于使用；
Echarts混合图（柱状图、折线图）倒立对比展示
03-13
该文档是用于介绍echarts图形中的柱状图和折线图混合示例，因为官方文档事例中有，这里介绍的是柱状图与折线图Y轴上下对应，折线图正常显示，柱状图倒立展示，共用一个X轴的比较图例情况。
echarts实现动态柱状图
12-19
echarts实现动态柱状图，满足大屏可视化对实时数据监测的需求
自定义柱状图（可左右滑动）
12-17
添加了手动滑动效果（在屏幕绘制宽度不够时启动滑动。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。）
Echarts图表快速上手指南
虎康的博客
03-08 1030
echarts的快速上手指南 前言 数据可视化已经成为了前端工程师必备的一项技能，数据可视化的工具有好多，今天我们来聊聊echarts。话不多少，我们先分析她的结构 文章目录echarts的快速上手指南一、安装二、引入三、使用四、`option`结构如下 一、安装 官网：https://echarts.apache.org/examples/zh/index.html npm install echarts --save 二、引入 <script src="echarts.js" chars
echarts 如何使柱状图左右展示_如何设置echarts柱状图两组不同的数据错开显示，目前他们时在一起重叠显示的？...
weixin_40001048的博客
12-19 2808
//同比环比var myChart= echarts.init(document.getElementById('bar_chart'));var xAxisData = ['全部','轿车','SUV','MPV'];var data1 = [1.03,0.44,0.88,0.67]; //同比var data2 = [-0.4,-0.56,-0.67,-0.53];//环比option = {...
echarts 大屏模板_用 Python 做一个超全的疫情大屏
weixin_39779467的博客
11-20 523
脚本之家你与百万开发者在一起本文经授权转自公众号 萝卜大杂烩(ID：luobodazahui)如若转载请联系原公众号2020 的开头实在是太烂了，新冠肺炎肆虐神州大地，这场突如其来的灾难影响实在是太大了，全国人民在齐心协力共度难关的同时，也无时无刻不在期盼疫情快点过去。当然我们在隔离办公的同时，每天也都关注着疫情的发展，盼望着“拐点”快点来临，毕竟大家都盼望着外面的新鲜空气呢！这里...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5693
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
echarts左右柱状图
最新发布
06-27
ECharts是一个强大的JavaScript数据可视化库，它可以创建各种图表，包括柱状图。左右柱状图，也称为堆积柱状图，通常用于比较两个类别或时间段内的数据变化。在ECharts中，你可以通过设置`series`的数据结构和堆叠属性来创建这种图表。 以下是一个简单的左右柱状图的创建步骤： 1. 首先，你需要在HTML中引入ECharts的库文件。 2. 定义数据，通常是一个二维数组，其中每一项包含`name`（系列名称）、`data`（每个数据点的值）和可能的`stack`（堆叠层名）。 3. 创建配置对象，设置图表类型为`bar`，并指定堆叠为`'left'`或`'right'`（取决于你希望哪一侧的柱子堆积）。 ```javascript var option = { series: [{ type: 'bar', // 类型为柱状图 stack: '总量', // 堆叠层名 data: [ { name: 'A', value: [10, 20] }, { name: 'B', value: [30, 40] }, ] }] }; ``` 4. 使用ECharts实例的`setOption`方法设置配置，并初始化图表。 ```javascript var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值