echarts柱状图用组件的方式，获取同一接口不同的柱状图

echarts-box.vue

<template>
  <div class="chart-box" ref="centerOnlineRate" v-chart-resize></div>
</template>

<script>
export default {
  name: "ZhejiangIntranetEchartsBox",

  props: {
    xAxisData: {
      type: Array,
      default: () => [
        "杭州",
        "宁波",
        "温州",
        "金华",
        "湖州",
        "绍兴",
        "衡州",
        "台州",
        "丽水",
        "丹州",
      ],
    },
    yAxisData: {
      type: Array,
      default: () => [90, 80, 70, 80, 70, 60, 100, 70, 60, 50, 30],
    },
    formatterData: {
      type: String,
      default: "45%",
    },
  },

  data() {
    return {
      barData: {
        grid: {
          top: "5%",
          left: "8%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          data: [
            "杭州",
            "宁波",
            "温州",
            "金华",
            "湖州",
            "绍兴",
            "衡州",
            "台州",
            "丽水",
            "丹州",
          ],
          splitLine: {
            show: false, // 网格线
          },
          axisTick: {
            show: false, // 坐标轴刻度
          },

          axisLine: {
            show: true,
            lineStyle: {
              type: "solid", //y轴分割线类型
              color: "#4EA9FD",
              width: 1,
            },
          },
          // x坐标展示文字
          axisLabel: {
            textStyle: {
              color: "#9ECCFF",
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false, // 网格线
          },

          axisLine: {
            show: true,
            lineStyle: {
              type: "solid", //y轴分割线类型
              color: "#4EA9FD",
              width: 1,
            },
          },
          // x坐标展示文字
          axisLabel: {
            formatter: "{value}%",
            textStyle: {
              color: "#9ECCFF",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            data: [90, 80, 70, 80, 70, 60, 100, 70, 60, 50, 30],
            type: "bar",
            barWidth: "12",
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 1,
                  color: "#022662", // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: "#38B6F0", // 100% 处的颜色
                },
              ],
            },
            markLine: {
              silent: true,
              symbol: "none",
              label: {
                color: "#9ECCFF",
                fontSize: 14,
                formatter: "45%",
              },
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
              lineStyle: {
                type: "solid",
                color: "#62C4EF",
                width: 1,
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          backgroundColor: "#5fccff", //设置自定义背景
          borderColor: "#5cdbd3", //设置自定义边框颜色
          extraCssText:
            //额外附加到浮层的css样式，此处为为浮层添加阴影及padding
            "box-shadow: 0 0 5px rgba(181, 245, 236, 0.5);padding:10px 15px; color: #001543;",
          axisPointer: {
            label: {
              show: false,
              backgroundColor: "pink",
              color: "#001543",
            },
          },
          formatter: function (params) {
            if (params.color) {
              var res = `
            <div>
                <span
                  style="display:inline-block;
                    margin-right:5px;
                    border-radius:10px;
                    width:10px;
                    color:red;
                    height:10px;
                    background-color:${params.color.colorStops[0].color}"
                ></span>
                 <span>${params.name}: ${params.data}%</span>
            </div>
            `;
              return res;
            }
          },
        },
      },
      handle: null,
    };
  },
  computed: {
    chartData() {
      return {
        xAxisData: this.xAxisData,
        yAxisData: this.yAxisData,
      };
    },
  },

  mounted() {
    this.initChart();
    window.addEventListener("resize", this.resize);
  },

  methods: {
    initChart() {
      this.handle = this.$echarts.init(this.$refs.centerOnlineRate);
    },
    setOption() {
      if (!this.handle) {
        return;
      }
      this.barData.xAxis.data = this.xAxisData;
      this.barData.series[0].data = this.yAxisData;
      this.barData.series[0].markLine.label.formatter = this.formatterData;
      this.handle.setOption(this.barData);
    },
    resize() {
      if (!this.handle) {
        return;
      }
      this.handle.resize();
    },
  },

  watch: {
    chartData() {
      this.setOption();
    },
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="scss" scoped>
.chart-box {
  widows: vw(584);
  height: vh(170);
}
</style>

middle-area.vue

<template>
    <echarts-box
      :x-axis-data="gisxAxisData"
      :y-axis-data="gisData"
      :formatterData="gissvg + '%'"
    ></echarts-box>
    <div class="entrust-status">{{ data50001.kvalue }}</div>
    <echarts-box
      :x-axis-data="appAxisData"
      :y-axis-data="appData"
      :formatterData="appsvg + '%'"
    ></echarts-box>
</template>
<script>
import EchartsBox from "@/components/echarts-box.vue";

 data() {
    return {
      gisData: [],
      appData: [],
      gisxAxisData: [],
      appAxisData: [],
    };
  },
 mounted() {
    this.getChartData();
  },

 methods: {
    getChartData() {
      getZaiXianLv().then((res) => {
        if (res.code == 0) {
          let gisData = [];
          let appData = [];
          let gisAxisData = [];
          let appAxisData = [];
          let tempGisArr = res.data.concat([]).sort((a, b) => {
            return parseInt(b.giszxl) - parseInt(a.giszxl);
          });
          let tempAppArr = res.data.concat([]).sort((a, b) => {
            return parseInt(b.appzxl) - parseInt(a.appzxl);
          });
          tempGisArr.forEach((item) => {
            gisData.push(item.giszxl);
            gisAxisData.push(item.fy);
          });
          tempAppArr.forEach((item) => {
            appData.push(item.appzxl);
            appAxisData.push(item.fy);
          });
          this.gisData = gisData;
          this.appData = appData;
          this.gisxAxisData = gisAxisData;
          this.appAxisData = appAxisData;
          this.gissvg = res.data[0].gissvg;
          this.appsvg = res.data[0].appsvg;
        }
      });
    },
  },

</script>