柱状图-带边框柱状图

效果图：

代码：

const chart = this.refs.vChartRef.chart
function upOpt() {
  chart.setOption({
       tooltip: {
          trigger: "axis",
          show: true,
          backgroundColor: "rgba(0, 0, 0, 0.4)",
          borderColor: "transparent",
          padding: [5],
          axisPointer: {
            type: "none",
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: 14,
          },
        },
        legend: {
          show: true,
          top: 0,
          right: '3%',
          itemGap: 30,
          icon: "rect",
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 14,
            fontFamily: "SourceHanSansCN-Regular",
            fontWeight: "normal",
            lineHeight: 22,
            color: "#FFFFFF",
          },
        },
        grid: {
          top: "18%",
          left: "9%",
          right: "4%",
          bottom: "11%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#B3DFFF",
                width: 2, 
              },
            },
            axisLabel: {
              show: true,
              fontSize: 14,
              fontFamily: "SourceHanSansCN-Regular",
              fontWeight: "normal",
              color: "#D8D8D8",
              margin: 10,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            boundaryGap: true,
            data: [
              "03/19",
              "03/20",
              "03/21",
              "03/22",
              "03/23",
              "03/24",
              "03/25",
            ],
          },
        ],

        yAxis: [
          {
            type: "value",
            name: "单位: 件",
            nameGap: 15,
            nameTextStyle: {
              fontSize: 14,
              fontFamily: "SourceHanSansCN-Normal",
              fontWeight: 400,
              color: "#D8D8D8",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#3D5266",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#B3DFFF",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 14,
              fontFamily: "SourceHanSansCN-Regular",
              fontWeight: "normal",
              color: "#D8D8D8",
              margin: 10,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "维保费支出",
            type: "bar",
            barWidth: 10,
            label: {
              show: false,
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(247, 181, 0, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(247, 181, 0, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              borderColor: "#F7B500",
              borderWidth: 1,
            },
            data: [40, 30, 50, 40, 35, 22, 56],
          },
          {
            name: "维保达成率",
            type: "bar",
            barWidth: 10,
            label: {
              show: false,
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(21,154,255,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(21,154,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              borderColor: "#159AFF",
              borderWidth: 1,
            },
            data: [45, 20, 60, 40, 55, 32, 26],
          },
          {
            name: "即将到期",
            type: "bar",
            barWidth: 10,
            label: {
              show: false,
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(250, 81, 81, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(250, 81, 81, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              borderColor: "rgba(250, 81, 81, 1)",
              borderWidth: 1,
            },
            data: [15, 10, 5, 10, 15, 12, 16],
          }
        ],
  })
}
setTimeout(upOpt, 0)