vue3+echarts 简易思路实现对称轴式的渐变柱状图（每个柱形颜色不一）

基于vue3和echarts，画出以Y轴为对称轴的柱状图，且柱状图的每个柱形颜色不一，视图整体形成一个渐变色

效果图

开发思路拆解

1.  因视图的实际数据无负数，echarts插件在视图数据为负数时才在左边，因此，将画两个视图形成对称图形；
2. 柱状图的渐变颜色，由固定色值加上透明度，动态获取新的色值至柱形图颜色；
3. 选择一个视图显示Y轴，其中一个视图X轴对称显示，对应设置为：inverse=true

echarts配置

/** 左边视图配置 */
const leftOption = ref({
  title: {
    text: '产品数(个)',
    right: 0,
    textStyle: {
      color: '#549AF4',
      fontSize: 12,
    },
  },
  legend: {
    show: false,
  },
  tooltip: {},
  xAxis: {
    show: false,
    inverse: true, //反向坐标轴
  },
  yAxis: {
    type: 'category',
    show: false,
    data: [
      '腾讯控股',
      '百度',
      '苹果',
      '亚马逊',
      '谷歌',
      '华为技术',
      '微软公司',
      'Facebook',
      '英特尔',
    ],
  },
  grid: {
    left: '0%',
    right: '0%',
    top: '20px',
    bottom: '0%',
  },
  series: [
    {
      name: '产品数(个)',
      type: 'bar',
      data: [213, 341, 971, 114, 310, 113, 223, 324, 902, 124],
      itemStyle: {
        color: ({ dataIndex }: any) => {
          const transparency = 2 / dataIndex
          return `rgba(84, 154, 244, ${transparency > 1 ? 1 : transparency})`
        },

        borderRadius: [5, 5, 5, 5],
      },
    },
  ],
})

/** 右边视图配置 */
const prodNumOption = ref({
  title: {
    text: '规模数(亿元)',
    left: '50',
    textStyle: {
      color: '#FDCA3A',
      fontSize: 12,
    },
  },
  legend: {
    show: false,
  },
  tooltip: {},
  xAxis: {
    show: false,
  },
  yAxis: {
    type: 'category',
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
      alignWithLabel: true,
    },
    axisLabel: {
      interval: 0, //当高度不够时，不显示全部刻度标签，因此此处设置成 0 强制显示所有标签
      fontSize: 10,
    },
    data: [
      '腾讯控股',
      '百度',
      '苹果',
      '亚马逊',
      '谷歌',
      '华为技术',
      '微软公司',
      'Facebook',
      '英特尔',
    ],
  },
  grid: {
    left: '55',//此处设置用于显示Y轴标签
    right: '0%',
    top: '20px',
    bottom: '0%',
  },
  series: [
    {
      name: '规模数(亿元)',
      type: 'bar',
      data: [2323, 3334, 3397, 3314, 3330, 1333, 2333, 3423, 922, 214],
      itemStyle: {
        color: ({ dataIndex }: any) => {
          //计算颜色透明度
          const transparency = 2 / dataIndex;
          return `rgba(253, 202, 58, ${transparency > 1 ? 1 : transparency})`
        },
        borderRadius: [5, 5, 5, 5],
      },
    },
  ],
})

css样式以flex布局，且各为50%即可，这里不作代码展示。