echarts 柱状图固定高度

可以使用自适应高度的方式来实现echarts柱状图的高度自适应。具体实现方法是通过获取y轴数据源的长度，然后根据每个柱状图的高度和预留高度计算出自适应的高度，并将该高度设置给echarts图表的节点。代码中的实现方法如下：

var autoHeight = option2.yAxis.data.length* 50 + 150 //获取option2配置项中y轴的数据源的长度*每个柱状你想设定的高度+150的预留高度
myChart.getDom().style.height = autoHeight + "px" //echarts有个getDom（）的方法可以设置获取 ECharts 实例容器的 dom 节点，给节点分别设置高度
myChart.getDom().childNodes[0].style.height = autoHeight + "px"
myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight)
myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px"

相关问题

echarts柱状图高度固定

要固定 Echarts 柱状图的高度，可以通过设置图表容器的样式来实现。以下是一个示例：

import React from 'react';
import ReactEcharts from 'echarts-for-react';

function BarChart() {
  // 柱状图数据
  const data = {
    categories: ['A', 'B', 'C', 'D', 'E'],
    series: [120, 200, 150, 80, 70],
  };

  // 设置图表容器的样式
  const chartStyle = {
    height: '300px', // 固定高度
    width: '100%',
  };

  // 构造 Echarts 配置项
  const option = {
    xAxis: {
      type: 'category',
      data: data.categories,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'bar',
        data: data.series,
      },
    ],
  };

  return (
    <div style={chartStyle}>
      <ReactEcharts option={option} />
    </div>
  );
}

export default BarChart;

在上述代码中，我们通过 `chartStyle` 对象指定了图表容器的高度为固定的 `300px`，并将其应用到图表容器的样式中。然后，使用 `ReactEcharts` 组件渲染柱状图，传入相应的配置项 `option`。这样就能够实现柱状图高度的固定。你可以根据需求调整 `chartStyle` 对象中的其他样式属性，如宽度、背景色等。

echarts柱状图显示数值同一高度

如果你想让柱状图显示的数值在同一高度，可以在ECharts中使用“label”属性来设置每个柱形的标签。具体来说，你可以设置“position”属性为“top”，并将“formatter”属性设置为返回相同值的函数，例如：

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [10, 10, 10, 10],
        type: 'bar',
        label: {
            show: true,
            position: 'top',
            formatter: function(params) {
                return '10';
            }
        }
    }]
};

在这个示例中，每个柱形都设置了相同的数据值（10），并且标签的“position”属性设置为“top”，“formatter”属性返回固定值“10”。这将导致所有标签在同一高度上显示“10”，从而使所有柱状图的数值看起来相同。