先看效果图

<template>
  <!-- 工贸库存组件 -->
  <div id="main"></div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null,
      option: null
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("main"));
    this.option = {
      backgroundColor: "#E5EEF9",
      title:{
          text:"工贸库存",
          textStyle:{
              color:"#fff",
              fontSize:26
          },
          backgroundColor:'rgba(0,32,96,1)',
          borderColor:"#000"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" }
      },
      grid: {
        top: "25%",
        right: "45",
        bottom: "20",
        left: "30"
      },
      legend: {
        data: [{ name: "库存" }, { name: "超期库存" }, { name: "占比" }],
        top: "0%",
        textStyle: {
          color: "black" //图例文字
        }
      },
      xAxis: [
        {
          type: "category",
          data: ["2015", "2016", "2017", "2018", "2019", "2020"],
          axisLine: { lineStyle: { color: "#939495" } },
          axisLabel: {
            textStyle: { color: "#939495", fontSize: "14" }
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "",
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 14,
            color: "#939495"
          },
          axisLine: {
            min: 0,
            max: 10,
            lineStyle: { color: "#939495" }
          } //左线色
        },
        {
          type: "value",
          name: "",
          show: true,
          axisLabel: {
            show: true,
            fontSize: 14,
            formatter: "{value} %",
            color: "#939495"
          },
          axisLine: { lineStyle: { color: "#939495" } }, //右线色
          splitLine: {
            show: false,
            lineStyle: { color: "#939495" }
          } //x轴线
        }
      ],
      series: [
        {
          name: "库存",
          type: "bar",
          data: [36.6, 38.8, 40.84, 41.6, 20, 30],
          barWidth: "50",
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: "#4F81BD"
            }
          },
          barGap: "0.2"
        },
        {
          name: "超期库存",
          type: "bar",
          data: [14.8, 14.1, 15, 16.3, 30, 29],
          barWidth: "50",
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: "#C62B2D"
            }
          },
          barGap: "0.2"
        },
        {
          name: "占比",
          type: "line",
          yAxisIndex: 1,
          data: [5, 6.01, 5.26, 4.48, 3, 5],
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: "#FCC519"
            }
          },
          smooth: true
        }
      ]
    };

    this.myChart.setOption(this.option);
    window.addEventListener("resize", function() {
      this.myChart.resize();
    });
  }
};
</script>
<style>
#main {
  width: 90%;
  height: 300px;
}
</style>