[Echarts的Y轴文字居中]

实现对称的Echarts柱状图样式，及y轴文字居中

主要实现的是如下图的页面样式，文字居中是采用y轴的偏移offset，不是特别完美，需要手动调节,图片下面时代码。

下面展示一些 内联代码片。

<template>
  <div class="pic" style="height: 100%; width: 100%">
    <div ref="bc" style="height: 100%; width: 100%" />
  </div>
</template>

<!--股权穿透图-->

<script>
import * as Echarts from "echarts";

export default {
  data() {
    return {};
  },

  mounted() {
    this.initChart(this.$refs.bc);
  },

  methods: {
    initChart(chart) {
      const myChart = Echarts.init(this.$refs.bc);
      const addr_arr = ['涪城区','游仙区','安州区','高新区','江油市','梓潼县','三台县','盐亭县','平武县','北川县']

      const data1 = [1300, 220, 455, 566, 454,555,666,777,888,999,]; // 监测设备

      const data22 = [400, 500, 330, 500, 230,555,666,777,888,999,]; // 监测点

      const data2 = [];

      const maxPerCent = Math.max.apply(null, data22); // 完成率中的最大值
      const maxnumber = Math.max.apply(null, data1);//监测设备的最大值
      //为了实现对称，向每个数组推最大的数，并不显示在页面
     const maxallnumber = Math.max(maxPerCent,maxnumber);
      data1.push(maxallnumber);
      data22.push(maxallnumber);
      data22.forEach(function (ele) {
        data2.push(-Math.abs(ele));
      }); // 监测点的负数转换，形成新数组
      myChart.setOption({
        title: {},

        tooltip: {
          trigger: "axis",

          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效

            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },

          formatter: function (params) {
            return (
              params[0].name +
              "<br>监测点：" +
              params[1].value +'个'+
              "<br>监测设备：" +
              Math.abs(data22[params[0].dataIndex]) +'个'
            ); // 换算
          },
        },

        legend: {
          data: ["监测点", "监测设备"],
          padding: [
            25, // 上
            0, // 右
            0, // 下
            0, // 左
          ],
          left: "center",
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 16,
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",

          containLabel: true,
        },

        xAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
            },

            position: "bottom",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#2F4357",
              },
            },
            splitNumber: 11,

            axisLabel: {
              fontSize: 10,
              fontFamily: "Microsoft YaHei",
              fontWeight: "bold",
              color: "#FFFFFF",
              lineHeight: 18,
              formatter: function (value, index) {
                //将X轴的数字转换为正数
                if (value<0) {
                  return -value;
                }else{
                  return value;
                }
              },
            },
          },
        ],

        yAxis: [
          {
            type: "category",
            position: "right",
            //去掉y轴的线
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            nameLocation: "center",
            nameTextStyle: {
              verticalAlign: "middle",
            },
            //y轴的偏移，后期可以根据props传值进行计算
            offset: -220,
            //层级
            zlevel: 1000,
            

            data: addr_arr, // 更改数组

            axisLabel: {
              fontSize: 16,
              fontFamily: "Microsoft YaHei",
              fontWeight: "bold",
              color: "#080808",
              lineHeight: 18,

              formatter: function (value) {
                if (value.length > 7) {
                  return value.substring(0, 7) + "...";
                } else {
                  return value;
                }
              },
            },
          },
        ],

        series: [
          {
            name: "监测点",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              formatter: function (params) {
                return Math.abs(data22[params.dataIndex]); // 换算
              },
            },

            itemStyle: {
              color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FBD7B6" },
                { offset: 1, color: "#FD9D3F" },
              ]),
            },
            //中间图形的高度
            barWidth: 18,

            data: data2,
          },

          {
            name: "监测设备",

            type: "bar",

            stack: "总量",

            label: {
              show: false,

              formatter: function (params) {
                return params.value;
              },
            },

            itemStyle: {
              // 背景颜色线性
              color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#92E2FF" },
                { offset: 1, color: "#01CCFF" },
              ]),
            },

            barWidth: 10,

            data: data1,
          },
        ],
      });
    },
  },
};
</script>