echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。

实现路径

• 设置坐标轴不显示
• 配置series，使用echarts提供的象形柱图（pictorialBar）画出上下椭圆。使用柱状图画出柱体。
• 配置上部椭圆的lable，柱体的lable。

代码实现

//数据形式
//上下椭圆
topPicList: [
        { value: 20, label: { color: "rgba(21, 100, 232, 1)" } },
        { value: 40, label: { color: "rgba(21, 100, 232, 1)" } },
        { value: 30, label: { color: "rgba(6, 210, 141, 1)" } },
        { value: 80, label: { color: "rgba(251, 177, 0, 1)" } },
        { value: 60, label: { color: "rgba(0, 255, 255, 1)" } },
  ],
//柱状图
barList: [
        {
          value: 20,
          name: "纺织类",
          percentage: "4.9%",
        },
        {
          value: 40,
          name: "农产品",
          percentage: "5.8%",
        },
        {
          value: 30,
          name: "生活用品",
          percentage: "10.72%",
        },
        {
          value: 80,
          name: "化纤类",
          percentage: "14.33%",
        },
        {
          value: 60,
          name: "纺织类",
          percentage: "64.21%",
        },
      ],
    dataList: [20, 40, 30, 80, 60],

设置坐标轴不可见

let option = {
      grid: {
        top: "30%",
        left: "10%",
        right: "4%",
        bottom: "14%",
        containLabel: false,
      },     //grid用于设置图形位置。
      xAxis: {
        data: ["2012", "2014", "2018", "2020", "2022"],
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
          textStyle: {
            color: "#e54035",
          },
        },
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },

配置上下椭圆

// 下部椭圆 
{
  name: "",
  type: "pictorialBar",
  symbolSize: [30, 10], //宽高
  symbolOffset: [0, 6], //偏移
  // "barWidth": "20",
  z: 12,
  data: this.dataList,
  itemStyle: {
    normal: {
      color: (params) => {
        return this.linearFn(params);
      },
    },
  },
},
  // 上部椭圆           
{
  name: "",
  type: "pictorialBar",
  symbolSize: [30, 10],
  symbolOffset: [0, 6],
  // "barWidth": "20",
  z: 12,
  data: this.dataList,
  itemStyle: {
    normal: {
      color: (params) => {
        return this.linearFn(params); 
      },
    },
  },
},
    
    
//methods中的方法
linearFn(params) {
   //不同柱子上椭圆的颜色数组。
  let ColorList = [
    ["rgba(63, 168, 242, 1)", "rgba(21, 100, 232, 1)"],
    ["rgba(63, 168, 242, 1)", "rgba(21, 100, 232, 1)"],
    ["rgba(163, 255, 224, 1)", "rgba(6, 210, 141, 1)"],
    ["rgba(255, 230, 170, 1)", "rgba(251, 177, 0, 1)"],
    ["rgba(0, 255, 255, 1)", "rgba(0, 255, 255, 1)"],
  ];
  let index = params.dataIndex;
  //椭圆颜色渐变， 
  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: ColorList[index][0],
    },
    {
      offset: 1,
      color: ColorList[index][1],
    },
  ]);
},

因为每个柱状图的颜色不一样，并且有渐变色。所以在itemStyle中配置。

在这里需要注意的是，这里使用this.4echarts会报错，需要重新引入echarts。 import * as echarts from “echarts”;
我想大概是this的原因吧，但是我将this输出后没有看出来哪里有什么不同，哪位大佬知道可以指点一二。

配置柱状图，和配置每个椭圆的颜色一样，在itemStyle中使用函数动态

{
  type: "bar",
  //silent: true,
  barWidth: "30",
  data: this.barList,
  itemStyle: {
    normal: {
      color: (params) => {
        return this.radialFn(params);
      },
    },
  },
},

现在将所有配置整理一下，变为如下所示

let option = {
  grid: {
    top: "30%",
    left: "10%",
    right: "4%",
    bottom: "14%",
    containLabel: false,
  },
  xAxis: {
    data: ["2012", "2014", "2018", "2020", "2022"],
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
      textStyle: {
        color: "#e54035",
      },
    },
  },
  yAxis: {
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  series: [
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [30, 10],
      symbolOffset: [0, -6], // 上部椭圆
      symbolPosition: "end",
      z: 12,
      // "barWidth": "0",
      data: this.topPicList,
      itemStyle: {
        normal: {
          color: (params) => {
            return this.linearFn(params);
          },
        },
      },
    },
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [30, 10],
      symbolOffset: [0, 6], // 下部椭圆
      // "barWidth": "20",
      z: 12,
      data: this.dataList,
      itemStyle: {
        normal: {
          color: (params) => {
            return this.linearFn(params);
          },
        },
      },
    },
    {
      type: "bar",
      //silent: true,
      barWidth: "30",
      data: this.barList,
      itemStyle: {
        normal: {
          color: (params) => {
            return this.radialFn(params);
          },
        },
      },
    },
  ],
};
//获取元素
this.myChart = this.$echarts.init(this.$refs.myechart);
//绘图
this.myChart.setOption(option);

现在图形有了，现在就是让图形顶部的字儿和图形对应起来。

NO.排名lble配置

这里我选择配置在上部椭圆顶部

{
  name: "",
  type: "pictorialBar",
  symbolSize: [30, 10],
  symbolOffset: [0, -6], // 上部椭圆
  symbolPosition: "end",
  z: 12,
  label: {
    normal: {
      show: true,
      position: "top",  //在顶部显示
      fontSize: 16,
      fontWeight: "bold",
      formatter: (params) => {
        //去重，排序，这里去重的目的是防止排名混乱
        let list = Array.from(
          new Set(this.dataList.sort((a, b) => b - a))
        );
        let index = list.findIndex((item) => item === params.value) + 1;
        return `NO.${index}`;
      },
    },
  },
  data: this.topPicList,
  itemStyle: {
    normal: {
      color: (params) => {
        return this.linearFn(params);
      },
    },
  },
},

柱状图顶部配置，lable背景图

{
    type: "bar",
    //silent: true,
    barWidth: "30",
    data: this.barList,
    itemStyle: {
        normal: {
          color: (params) => {
            return this.radialFn(params);
          },
       },
    },
    label: {
        normal: {
          show: true,
          position: "top",
          distance: 35,
          align: "center",
          // backgroundColor: "inherit",
          // padding: [3, 10, 10, 5],
          formatter: (params) => {
            if (params.name === "纺织类") {
              return [`{bg1|${params.name} ${params.data.percentage}}`];
            } else if (params.name === "农产品") {
              return [`{bg2|${params.name} ${params.data.percentage}}`];
            } else if (params.name === "生活用品") {
              return [`{bg3|${params.name} ${params.data.percentage}}`];
            } else if (params.name === "化纤类") {
              return [`{bg4|${params.name} ${params.data.percentage}}`];
            } else {
              return [`{bg5|${params.name} ${params.data.percentage}}`];
            }
          },
          rich: {
            bg1: {
              color: "#fff",
              fontSize: 12,
              height: 22,
              lineHeight: 20,
              backgroundColor: {
                image: require("@/views/dataanalysis/listOfTopics/economic/images/light5.d.png"),
              },
            },
            bg2: {
              color: "#fff",
              fontSize: 12,
              height: 22,
              lineHeight: 20,
              backgroundColor: {
                image: require("@/views/dataanalysis/listOfTopics/economic/images/light4.d.png"),
              },
            },
            bg3: {
              color: "#fff",
              fontSize: 12,
              height: 22,
              lineHeight: 20,
              backgroundColor: {
                image: require("@/views/dataanalysis/listOfTopics/economic/images/light3.d.png"),
              },
            },
            bg4: {
              color: "#fff",
              fontSize: 12,
              height: 22,
              lineHeight: 20,
              backgroundColor: {
                image: require("@/views/dataanalysis/listOfTopics/economic/images/light2.d.png"),
              },
            },
            bg5: {
              color: "#fff",
              fontSize: 12,
              height: 22,
              lineHeight: 20,
              backgroundColor: {
                image: require("@/views/dataanalysis/listOfTopics/economic/images/light1.d.png"),
              },
            },
          },
        },
  },
},

这里需要注意的是背景图需要使用require引入，不然会出现找不到的情况，也可以将图片存在public目录的img文件夹下，可以不使用require引入