如何使用Echart 5.5.0创建箱线图

Question

我需要实现如下图所示的比例图。

我尝试使用 Echarts 5.5.0 创建这个带有箱线图的比例哈特。

这里是代码：https://codesandbox.io/p/sandbox/error-bar-on-catesian-v9vmmk?file=%2Findex.js

但是我无法定义和完成我的图表。

有什么想法吗？

提前非常感谢您。

本

Answer 1

为了简化示例，我使用固定值而不是生成随机值。

在您的示例中，您将类别与 X 轴相关联。如果您想创建水平图表，您应该将它们与 Y 轴相关联。

您可以使用

api.coord()

来计算从 到 的值的位置。这里，X轴和Y轴的值必须以相反的方式输入。

通过这两项修改，我们得到了水平图。由于您没有提供更多信息，我只能假设这就是意图。

图表上的照片上有一条额外的中间线，称为

Mid Value

。为此，您只需取最大值和最小值的平均值即可。我增加了线条的高度并将其厚度加倍。

/**
 ** Initialize
 */
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom);

/**
 ** Data
 */
const categoryData = ['category0', 'category1', 'category2', 'category3', 'category4'];
const barData = [30, 50, 70, 60, 80];
const errorData = [
  ['category0', 10, 40],
  ['category1', 30, 60],
  ['category2', 50, 80],
  ['category3', 40, 70],
  ['category4', 60, 90]
];

/**
 ** Option
 */
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  title: {
    text: 'Horizontal Boxplot'
  },
  legend: {
    data: ['bar', 'error']
  },
  yAxis: {
    type: 'category',
    data: categoryData
  },
  xAxis: {},
  series: [
    {
      type: 'bar',
      name: 'bar',
      data: barData,
      itemStyle: {
        color: '#cce0ff'
      }
    },
    {
      type: 'custom',
      name: 'error',
      itemStyle: {
        borderWidth: 1.5
      },
      renderItem: function (params, api) {
        const yValue = api.value(0);
        
        const lowPoint = api.coord([api.value(1), yValue]);
        const midPoint = api.coord([(api.value(1) + api.value(2)) / 2, yValue]);
        const highPoint = api.coord([api.value(2), yValue]);
        
        const halfHeight = api.size([1, 1])[1] * 0.1;
        
        const style = api.style({
          stroke: api.visual('color'),
          fill: undefined
        });
        return {
          type: 'group',
          children: [
            // Line
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: lowPoint[0],
                y1: lowPoint[1],
                x2: highPoint[0],
                y2: highPoint[1]
              },
              style: style
            },
            // Low Value
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: lowPoint[0],
                y1: lowPoint[1] - halfHeight,
                x2: lowPoint[0],
                y2: lowPoint[1] + halfHeight
              },
              style: style
            },
            // Mid Value
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: midPoint[0],
                y1: midPoint[1] - halfHeight * 2,
                x2: midPoint[0],
                y2: midPoint[1] + halfHeight * 2
              },
              style: {...style, lineWidth: style.lineWidth * 2}
            },
            // High Value
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: highPoint[0],
                y1: highPoint[1] - halfHeight,
                x2: highPoint[0],
                y2: highPoint[1] + halfHeight
              },
              style: style
            }
          ]
        };
      },
      encode: {
        x: [1, 2],
        y: 0
      },
      data: errorData,
      z: 100
    }
  ]
};

/**
 ** Render Chart
 */
chart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="chart" style="width: 650px; height: 250px;"></div>