echarts横向柱状图设置可变高度

效果图

1.准备一个div盒子

<div id="detailChart" class="detailChart"></div>

2.画图,根据柱子数量计算出高度

drawChart() {
          var chartDom = document.getElementById("detailChart");
          var myChart = echarts.init(chartDom);
           //高度计算
          myChart.resize({height: this.orderNum.length * 70 + 20});

          var Option = {
            //图表位置
            grid: {
              bottom: "7%",
              top: "1%",
              containLabel: true,
            },
            //X轴
            xAxis: {
              type: "value",
              axisTick: {show: false},
              //不显示X轴刻度线和数字
              splitLine: { show: false },
              axisLabel: { show: false },
            },
            yAxis: [{
              type: "category",
              data: this.orderNum,
              //升序
              inverse: true,
              splitLine: { show: false },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  show:true,
                  color: "#Ffffff",
                  fontSize: '20',
                }
              },
              //key和图间距
              offset: 15,
              nameTextStyle: {
                fontSize:12,
                padding: [0, 0, 0, -30]
              },
            }, {
                type : 'category',
                //升序
                inverse: true,
                nameLocation: 'end',
                position: 'right',
                offset: 0,
                axisLabel: {
                  textStyle: {
                    show:true,
                    color: "#Ffffff",
                    fontSize: '15',
                  }
                },
                axisTick : {show: false},
                axisLine: {show: false},
                data : this.participants,
              }
            ],
            series: [
              {
                //柱状图自动排序,排序自动让Y轴名字跟着数据动
                type: "bar",
                data: this.yList,
                barWidth: 12,
                barGap: 20,
                smooth: true,
                valueAnimation: true,
                colorBy: 'data',
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#16cfc3'
                }, {
                  offset: 1,
                  color: '#1698d1'
                }]),
                //Y轴数字显示部分
                showBackground: 'true',
                backgroundStyle : {
                  borderRadius: 7,
                },
                label: {
                  show: true,
                  formatter: "{b}",
                  position: ['0%', '-120%'],
                  valueAnimation: true,
                  offset: [5, -2],
                  textStyle: {
                    color: "#FFFFFF",
                    fontSize: 13,
                  },
                },
                itemStyle: {
                  shadowColor: '#010E29',
                  emphasis: {
                    barBorderRadius: 7,
                  },
                  //颜色样式部分
                  normal: {
                    barBorderRadius: 7,
                  },
                },
              },
            ],
          };
          myChart.setOption(Option);
        },

3.css给div设置最大和最小高度

.detailChart{
    width: 99%;
    //height: 500px;
    min-height: 100px;
    max-height: 490px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用中的代码和注释,要实现echarts横向柱状图的柱高度自适应,可以按照以下步骤进行操作: 1. 在HTML代码中,创建一个div元素作为echarts的容器,并设置其宽度为100%: ``` <div id="main2" style="width:100%"></div> ``` 2. 在JavaScript代码中,使用echarts的API初始化图表,并设置图表的配置项option2: ``` let myChart = this.$echarts.init(document.getElementById('main2')); myChart.setOption(option2); ``` 3. 根据数据源的长度和每个柱状的高度,计算容器的自适应高度: ``` var autoHeight = option2.yAxis.data.length * 50 + 150; ``` 4. 使用echarts的getDom()方法获取图表的节点,并分别设置节点的高度: ``` myChart.getDom().style.height = autoHeight + "px"; myChart.getDom().childNodes<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts横向柱状图](https://download.csdn.net/download/qq_42396791/11856336)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [echarts横向柱状图高度随动态数据长度自适应](https://blog.csdn.net/weixin_54351962/article/details/124297111)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [echarts横向柱状图设置可变高度](https://blog.csdn.net/qq_56489154/article/details/128821365)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值