image.png

以下代碼均可解決上述問題

<template>
  <div class="data_visualization">
    <div class="progress_statistics">
      <div id="qualityChart" :style="{ width: '383px', height: '227px' }"></div>
    </div>

    <div class="data_statistics">
      <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
      <el-radio-group v-model="type" @change="getData()" class="button_group" size="mini">
        <el-radio-button label="1">近10天</el-radio-button>
        <el-radio-button label="2">近30天</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import qs from "qs";

// 按需引入echarts
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱狀圖組件
require("echarts/lib/chart/bar");
// 引入提示框和title組件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import { LegendComponent, GridComponent } from "echarts/components";
echarts.use([LegendComponent, GridComponent]);

export default {
  data() {
    return {
      p_id: 11111,
      type: 1,
      markInfo:{
        domId:'markChart',
        name:'標注進度統(tǒng)計',
        yAxisList:["質檢合格數(shù)", "已質檢數(shù)", "已標注數(shù)"],
        textArr:[
          {finish:'質檢判斷為合格數(shù)據(jù)總量',unfinish:'質檢判斷為不合格數(shù)據(jù)總量'},
          {finish:'已質檢數(shù)據(jù)總量',unfinish:'未驗收的數(shù)據(jù)總量（包含未驗收包，驗收中包、驗收失效的包）'},
          {finish:'已完成標注數(shù)據(jù)總量',unfinish:'未標注數(shù)據(jù)總量（包含待領取包、標注中包、失效包、打回包）'}
        ]
      },
      mark: {}, //標注
      qualityInfo:{
        domId:'qualityChart',
        name:'質檢進度統(tǒng)計',
        yAxisList:["驗收合格數(shù)", "已驗收數(shù)", "已質檢數(shù)"],
        textArr:[
          {finish:'驗收判斷為合格的數(shù)據(jù)總量',unfinish:'驗收判斷為不合格的數(shù)據(jù)總量'},
          {finish:'已驗收的數(shù)據(jù)總量',unfinish:'未驗收的數(shù)據(jù)總量（包含未驗收包，驗收中包、驗收失效的包）'},
          {finish:'已完成質檢的數(shù)據(jù)總量',unfinish:'未質檢數(shù)據(jù)總量'},
        ]
      },
      quality: {}, // 質檢
      acceptInfo:{
        domId:'acceptChart',
        name:'驗收進度統(tǒng)計',
        yAxisList:["已驗收數(shù)"],
        textArr:[
          {finish:'已完成驗收數(shù)據(jù)總量',unfinish:'未驗收的數(shù)據(jù)總量'}
        ]
      },
      accept: {}, // 驗收
      count_label: [], // 圖例
      count_list: [],
    };
  },
  mounted() {
          this.drawLine(this.markInfo, mark);
          this.drawLine(this.qualityInfo, quality);
          this.drawLine(this.acceptInfo, accept);
          this.draw(count_label, this.count_list);
  },
  methods: {
    drawLine(info, obj) {
      // 基于準備好的dom，初始化echarts實例
      let myChart = echarts.init(document.getElementById(info.domId));
      // 繪制圖表
      myChart.setOption({
      // 圖標標題
        title: {
          text: info.name,
          textStyle: {
            color: "#FFF", //顏色
            fontSize: 14, //大小
            fontWeight: "normal", //粗細
          },
        },
      // 表格提示框
        tooltip: {
          backgroundColor: "#4B515E", 
          borderColor:'#4B515E',
          extraCssText:'width:150px;white-space:pre-wrap;',// 設置允許換行
          formatter: function (params) { //設置返回的提示數(shù)據(jù)
            if(params.seriesName == 'blue'){
              return info.textArr[params.dataIndex].finish;
              }else if(params.seriesName == 'grey'){
                return info.textArr[params.dataIndex].unfinish;
            }
          },
          textStyle:{
            color:'#FFF'
          }
        },
       // 設置圖標的邊距
        grid: {
          left: "-14%",// 2、y軸的label左對齊
          right: "17%",
          bottom: "0%",
          containLabel: true,
        },
        color: ["#194DE8", "#51525B"],
        barWidth: 12,
        xAxis: {
          type: "value",
          splitLine: { show: false },
          axisLine: {
            show: true, 
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#FFF"
            },
          },
        },
        yAxis: {
          type: "category",
          data: info.yAxisList,
          axisLine: {
            show: false, //y軸線消失
          },
          axisTick: {
            show: false, //y軸坐標點消失
          },
          axisLabel: {
            show: true,
            interval:0,//1、橫軸信息全部顯示
            left:0,
            margin:67,// 3、y軸的label左對齊
            textStyle: {
              color: "#BEBEBE", 
              align:'left' //** 
            },
          },
        },
        series: [
          {
            name: 'blue',
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: obj.finish_progress,
            itemStyle: {
              emphasis: {
                // 普通圖表的高亮顏色
                color: "#6D9FFF",
                textStyle: {
                  // 文字樣式
                  color: "#FFF",
                },
              },
              normal: {
                //柱形圖圓角，初始化效果
                barBorderRadius: [6, 0, 0, 6],
              },
            },
          },
          {
            name: 'grey',
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: obj.finish_check_progress,
            itemStyle: {
              // emphasis:{
              //     // 普通圖表的高亮顏色
              //     color: "#51525B"
              // },
              normal: {
                //柱形圖圓角，初始化效果
                barBorderRadius: [0, 6, 6, 0],
                // label: {
                // //   show: true,
                // //   position: 'right',//數(shù)據(jù)在中間顯示
                // //   formatter:'{c}%'//百分比顯示，模板變量有 {a}、、{c}、u0z1t8os，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值，百分比。u0z1t8os數(shù)據(jù)會根據(jù)value值計算百分比
                //     // 重寫未完成label，通過計算屬性重新給formatter賦值，返回
                //     show: true,   // 計算的總數(shù)
                //     position: 'right',
                //     formatter: function (params) {
                //         console.log('params',params)
                //         // return params.value + data1[params.dataIndex]
                //     }
                // }
              },
            },
          },
          {
          // 該列用于做統(tǒng)計
            name: 'transparent',
            type: "bar",
            stack: "total",
            label: {
              normal: {
                show: true,
                position: "right",
                // formatter:'{c}%',//百分比顯示，模板變量有 {a}、、{c}、u0z1t8os，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值，百分比。u0z1t8os數(shù)據(jù)會根據(jù)value值計算百分比
                formatter: function (params) {
                  // console.log(params);
                  return (obj.finish_qualified_progress[params.dataIndex] + "%");
                },
                padding:[0,10,0,8],
                textStyle: { color: "#FFF" },
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(128, 128, 128, 0)", // 柱狀圖顏色設為透明
              },
            },
            z: -1,
            //不同系列的柱間距離，為百分比,如果想要兩個系列的柱子重疊，可以設置 barGap 為 '-100%'。
            // barGap: '-100%',
            data: [0, 0, 0],
          },
        ],
      });
    },

    draw(legend, data) {
      var chartDom = document.getElementById("myChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          left: "left", // 位置
          padding:[40, 0, 0, 22],
          icon: "roundRect", //形狀  類型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 30, // 設置寬度
          itemHeight: 5, // 設置高度
          itemGap: 53, // 設置間距
          textStyle: {
            //文字樣式
            color: "#BEBEBE",
            fontSize: "14",
          },
          data: legend,
        },
        grid: {
          top:'30%',
          left: "3%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        dataset: {
          source: data,
        },
        xAxis: { 
          type: "category",
          axisLabel:{
            // interval:0,//橫軸信息全部顯示
            // rotate:-20,//-15度角傾斜顯示   
          }
        },
        yAxis: {},
        barWidth: 10,
        barBorderRadius: [6, 6, 6, 6],
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: "#6D9FFF",
                //柱形圖圓角，初始化效果
                barBorderRadius: [6, 6, 0, 0],
              },
            },
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: "#4271FF",
                //柱形圖圓角，初始化效果
                barBorderRadius: [6, 6, 0, 0],
              },
            },
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: "#194DE8",
                //柱形圖圓角，初始化效果
                barBorderRadius: [6, 6, 0, 0],
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      // option && myChart.setOption(option,{replaceMerge:['xAxis']});
    },
  },
};
</script>

參考：echarts 左側y軸文字左齊