图例柱状一一对应图echarts 柱状配置项内容和展示

一个图例对应一个柱子。

      option = {
  title: {
    text: '图例与柱状图一一对应',
  },
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: {
    orient: 'vertical',
    right: '3%',
    top: '44%',
    data: [
      '粮食统计调查数据归口管理',
      '农作物单位面积产量调查',
      '县级粮食产量抽样调查',
      '主要农产品中间消耗调查',
      '农产品集贸市场价格调查',
      '农产品生产者价格调查',
      '农作物播种面积调查',
    ],
  },
  grid: { top: '30%', right: '45%', bottom: '30%', containLabel: true },
  yAxis: [
    {
      type: 'category',
      data: [
        '粮食统计调查数据归口管理',
        '农作物单位面积产量调查',
        '县级粮食产量抽样调查',
        '主要农产品中间消耗调查',
        '农产品集贸市场价格调查',
        '农产品生产者价格调查',
        '农作物播种面积调查',
      ],
      axisLabel: { show: false },
      axisTick: { show: false },
    },
  ],
  xAxis: [{ type: 'value', inverse: false, position: 'top', minInterval: 1 }],
  series: [
    {
      name: '粮食统计调查数据归口管理',
      type: 'bar',
      barMaxWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: {
          colorStops: [
            { offset: 0, color: '#1eb8f7' },
            { offset: 1, color: '#f4f8fa' },
          ],
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: 'linear',
          global: false,
        },
        borderRadius: [4, 0, 0, 4],
      },
      data: [123],
      animationDuration: 3000,
    },
    {
      name: '农作物单位面积产量调查',
      type: 'bar',
      barMaxWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: {
          colorStops: [
            { offset: 0, color: '#8694fb' },
            { offset: 1, color: '#e4e7ff' },
          ],
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: 'linear',
          global: false,
        },
        borderRadius: [4, 0, 0, 4],
      },
      data: ['', 234],
      animationDuration: 3000,
    },
    {
      name: '县级粮食产量抽样调查',
      type: 'bar',
      barMaxWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: {
          colorStops: [
            { offset: 0, color: '#f56a81' },
            { offset: 1, color: '#f9d7e0' },
          ],
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: 'linear',
          global: false,
        },
        borderRadius: [4, 0, 0, 4],
      },
      data: ['', '', 312],
      animationDuration: 3000,
    },
    {
      name: '主要农产品中间消耗调查',
      type: 'bar',
      barMaxWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: {
          colorStops: [
            { offset: 0, color: '#fdd491' },
            { offset: 1, color: '#fcf0e6' },
          ],
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: 'linear',
          global: false,
        },
        borderRadius: [4, 0, 0, 4],
      },
      data: [' ', ' ', ' ', 356],
      animationDuration: 3000,
    },
    {
      name: '农产品集贸市场价格调查',
      type: 'bar',
      barMaxWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: {
          colorStops: [
            { offset: 0, color: '#b162fb' },
            { offset: 1, color: '#f0e7ff' },
          ],
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: 'linear',
          global: false,
        },
        borderRadius: [4, 0, 0, 4],
      },
      data: [' ', ' ', ' ', ' ', 411],
      animationDuration: 3000,
    },
    {
      name: '农产品生产者价格调查',
      type: 'bar',
      barMaxWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: {
          colorStops: [
            { offset: 0, color: '#6eefd9' },
            { offset: 1, color: '#e6fbf9' },
          ],
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: 'linear',
          global: false,
        },
        borderRadius: [4, 0, 0, 4],
      },
      data: [' ', ' ', ' ', ' ', ' ', 555],
      animationDuration: 3000,
    },
    {
      name: '农作物播种面积调查',
      type: 'bar',
      barMaxWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: {
          colorStops: [
            { offset: 0, color: '#1eb8f7' },
            { offset: 1, color: '#f4f8fa' },
          ],
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: 'linear',
          global: false,
        },
        borderRadius: [4, 0, 0, 4],
      },
      data: [' ', ' ', ' ', ' ', ' ', ' ', 277],
      animationDuration: 3000,
    },
  ],
};