柱状图背景和外面的做到统一 echarts

 三块地方：

 三个地方都要复制过去，不然会报错。

 xAxis: [
    {
      type: "category",
      data: [
        "溧阳市",
        "金坛区",
        "武进区",
        "新北区",
        "天宁区",
        "钟楼区",
        "经开区",
      ],
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval:0,//强制显示所有类目
        show: true,
        fontSize: 14,
        fontFamily: "MicrosoftYaHei",
        color: "rgba(255,255,255,0.7)",
        lineHeight: 14,
      },
    },
    {
      axisTick: false,
      type: "category",
      data: [
        "溧阳市",
        "金坛区",
        "武进区",
        "新北区",
        "天宁区",
        "钟楼区",
        "经开区",
      ],
      axisLabel: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      min: 0,
      // minInterval:1,
      nameTextStyle: {
        color: "#FFFFFF",
        fontSize: 14,
        fontFamily: "MicrosoftYaHeiLight",
        lineHeight: 14,
      },
      splitLine: {
        lineStyle: {
          type: "dotted",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: "dotted",
        },
      },
      axisLabel: {
        show: true,
        fontSize: 14,
        fontFamily: "MicrosoftYaHei",
        color: "#DEF1FF",
        lineHeight: 19,
      },
    },
    {
      type: "value",
      min: 0,
      max: 100,
      splitLine: {
        show: false,
        lineStyle: {
          type: "solid",
          color: "rgb(221, 242, 255,0.1)"
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          type: "dotted",
        },
      },
      axisLabel: {
        show: false,
        fontSize: 14,
        fontFamily: "MicrosoftYaHei",
        color: "#DEF1FF",
        lineHeight: 19,
      },
    },
  ],
  series: [
    {
      name: "已办结",
      type: "bar",
      data: [0, 0, 0, 0, 0, 0, 0],
      barWidth: 10, //柱子宽度
      barGap: 0.1, //柱子之间间距
      markPoint: {
        data: [0, 0, 0, 0, 0, 0, 0].map((item, index) => {
          return {
            coord: [index, item],
            itemStyle: {
              color: "#28B3F9"
            },
            symbolSize: [12, 2],
            symbolOffset: [0, 0],
            symbol: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAADCAYAAAAp+adOAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOaADAAQAAAABAAAAAwAAAABcACqHAAAAKElEQVQoFWOc/ez/fwYoSJViZISxkcVhYoOdxuV+psHucGq4b0R4EgAU2guFUrWCeQAAAABJRU5ErkJggg=='
          };
        }),
        emphasis:{//使用emphasis
          disable:false,
          scale:false,//不缩放
          scaleSize:0,//为了防止失效直接设置未0
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0E3148",
            },
            {
              offset: 1,
              color: "#28B3F9",
            },
          ]),
        },
      },
      label: {
        show: false,
        position: 'top',
        // position: 'inside',
        distance: 8,
        formatter: (params) => {
          return `{a|${params.value}}`
        },
        rich: {
          a: {
            color: '#FFF6C5',
            fontSize: 18,
            fontFamily: "Impact"
          }
        }
      },
    },
    {
      name: "已驳回",
      type: "bar",
      data: [0, 0, 0, 0, 0, 0, 0],
      barWidth: 10,
      barGap: 0.1,
      markPoint: {
        data: [0, 0, 0, 0, 0, 0, 0].map((item, index) => {
          return {
            coord: [index, item],
            itemStyle: {
              color: "#00D586"
            },
            symbolSize: [12, 2],
            symbolOffset: [0, 0],
            symbol: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAADCAYAAAAp+adOAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOaADAAQAAAABAAAAAwAAAABcACqHAAAAKElEQVQoFWOc/ez/fwYoSJViZISxkcVhYoOdxuV+psHucGq4b0R4EgAU2guFUrWCeQAAAABJRU5ErkJggg=='
          };
        }),
        emphasis:{//使用emphasis
          disable:false,
          scale:false,//不缩放
          scaleSize:0,//为了防止失效直接设置未0
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#172C40",
            },
            {
              offset: 1,
              color: "#00D586",
            },
          ]),
        },
      },
      label: {
        show: false,
        position: 'top',
        // position: 'inside',
        distance: 8,
        formatter: (params) => {
          return `{a|${params.value}}`
        },
        rich: {
          a: {
            color: '#FFF6C5',
            fontSize: 18,
            fontFamily: "Impact"
          }
        }
      },
    },
    {
      name: "已回访",
      type: "bar",
      data: [0, 0, 0, 0, 0, 0, 0],
      barWidth: 10,
      barGap: 0.1,
      markPoint: {
        data: [0, 0, 0, 0, 0, 0, 0].map((item, index) => {
          return {
            coord: [index, item],
            itemStyle: {
              color: "#FFEC87"
            },
            symbolSize: [12, 2],
            symbolOffset: [0, 0],
            symbol: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAADCAYAAAAp+adOAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOaADAAQAAAABAAAAAwAAAABcACqHAAAAKElEQVQoFWOc/ez/fwYoSJViZISxkcVhYoOdxuV+psHucGq4b0R4EgAU2guFUrWCeQAAAABJRU5ErkJggg=='
          };
        }),
        emphasis:{//使用emphasis
          disable:false,
          scale:false,//不缩放
          scaleSize:0,//为了防止失效直接设置未0
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#152F3D",
            },
            {
              offset: 1,
              color: "#FFEC87",
            },
          ]),
        },
      },
      label: {
        show: false,
        position: 'top',
        // position: 'inside',
        distance: 8,
        formatter: (params) => {
          return `{a|${params.value}}`
        },
        rich: {
          a: {
            color: '#FFF6C5',
            fontSize: 18,
            fontFamily: "Impact"
          }
        }
      },
    },
    {
      name: "已派单",
      type: "bar",
      data: [0, 0, 0, 0, 0, 0, 0],
      barWidth: 10,
      barGap: 0.1,
      markPoint: {
        data: [0, 0, 0, 0, 0, 0, 0].map((item, index) => {
          return {
            coord: [index, item],
            itemStyle: {
              color: "#FF6271"
            },
            symbolSize: [12, 2],
            symbolOffset: [0, 0],
            symbol: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAADCAYAAAAp+adOAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOaADAAQAAAABAAAAAwAAAABcACqHAAAAKElEQVQoFWOc/ez/fwYoSJViZISxkcVhYoOdxuV+psHucGq4b0R4EgAU2guFUrWCeQAAAABJRU5ErkJggg=='
          };
        }),
        emphasis:{//使用emphasis
          disable:false,
          scale:false,//不缩放
          scaleSize:0,//为了防止失效直接设置未0
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#172C40",
            },
            {
              offset: 1,
              color: "#FF6271",
            },
          ]),
        },
      },
      label: {
        show: false,
        position: 'top',
        // position: 'inside',
        distance: 8,
        formatter: (params) => {
          return `{a|${params.value}}`
        },
        rich: {
          a: {
            color: '#FFF6C5',
            fontSize: 18,
            fontFamily: "Impact"
          }
        }
      },

    },
    {
      type: "bar",
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        color: "rgba(221, 242, 255, 0.1)",
      },
      data: [
        "溧阳市",
        "金坛区",
        "武进区",
        "新北区",
        "天宁区",
        "钟楼区",
        "经开区",
      ].map(() => 100),
      barWidth: 50,
    },
  ],