立体柱状图&底部加背景

    echarts() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      const echarts = this.$echarts.init(document.getElementById("echarts"));
      let xName = [
        "计算机/互联网",
        "销售/客服",
        "会计/金融",
        "生产/物流",
        "建筑/房地产",
        "制药/医疗",
      ];
      let minData = [6, 5, 5, 3, 2, 3];
      let maxData = [12, 10, 8, 6, 4, 5];
      let lineData = [3, 8, 5, 7, 6, 5];
      // 柱状图粗细
      let barWidth = 20;
      let option = {
        // backgroundColor: "#021132",
        tooltip: {
          show: true,
          formatter: function (params) {
            return (
              params.seriesName +
              "</br>" +
              params.name +
              ":" +
              params.value +
              "k"
            );
          },
        },
        // 图表位置
        grid: {
          top: 10,
          left: 60,
          bottom: 60,
        },
        xAxis: {
          data: xName,
          axisLine: {
            show: false,
          },
          // 内部分割线
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(8, 86, 82, .75)",
            },
          },
          // x轴文字
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
            formatter: function (params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 3; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p === rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              return newParamsName;
            },
            margin: 10, //刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          // axisTick: {
          //   show: false,
          // },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(8, 86, 82, .75)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
        },
        series: [
          {
            // 上半截柱子
            name: "最高薪资",
            type: "bar",
            barWidth: barWidth,
            barGap: "-100%",
            z: 0,
            itemStyle: {
              color: "#0A80D7",
              opacity: 1,
            },
            data: maxData,
          },

          {
            //下半截柱子
            name: "最低薪资",
            type: "bar",
            barWidth: barWidth,
            barGap: "-100%",
            itemStyle: {
              //lenged文本
              opacity: 1,
              color: function (params) {
                return new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#103562", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#103562", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            data: minData,
          },
          {
            z: 20,
            name: "平均薪资",
            type: "line",
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              shadowColor: "#FFEB5D",
              shadowBlur: 20,
              borderColor: "#FFEB5D",
              borderWidth: 5,
            },
            lineStyle: {
              width: 3,
              color: "#FFEB5D",
              shadowColor: "#FFEB5D",
              shadowBlur: 20,
            },
            data: lineData,
          },
          {
            //上半截柱子顶部圆片
            name: "---",
            type: "pictorialBar",
            tooltip: {
              show: false,
            },
            symbolSize: [barWidth, 15],
            symbolOffset: [0, -5],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              color: "#2FACEC",
              opacity: 1,
            },
            label: {
              show: false,
              position: "top",
              fontSize: 16,
              color: "#fff",
            },
            data: maxData,
          },
          {
            //下半截柱子顶部圆片
            name: "---",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            symbolSize: [barWidth, 15],
            symbolOffset: [0, -10],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                return new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#0D72B3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0D72B3", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            label: {
              show: false,
              position: "top",
              fontSize: 16,
              color: "#fff",
            },
            symbolPosition: "end",
            data: minData,
          },
          {
            //下半截柱子底部圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [barWidth, 15],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                return new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#0D72B3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0D72B3", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            data: [1, 1, 1, 1, 1, 1],
          },
          // 底部背景
          // {
          //   name: "第一圈",
          //   type: "pictorialBar",
          //   symbolSize: [47, 16],
          //   symbolOffset: [0, 11],
          //   z: 11,
          //   itemStyle: {
          //     normal: {
          //       color: "transparent",
          //       borderColor: "#3ACDC5",
          //       borderWidth: 2,
          //     },
          //   },
          //   data: [1, 1, 1, 1, 1, 1],
          // },
          // {
          //   name: "第二圈",
          //   type: "pictorialBar",
          //   symbolSize: [62, 22],
          //   symbolOffset: [0, 17],
          //   z: 10,
          //   itemStyle: {
          //     normal: {
          //       color: "transparent",
          //       borderColor: "#02c3f1",
          //       borderWidth: 2,
          //     },
          //   },
          //   data: [1, 1, 1, 1, 1, 1],
          // },
        ],
      };
      echarts.setOption(option);
    },