vue中echarts的使用，包含饼图、折线图、竖形柱状图

UI图

代码实现：

css样式，echart容器必须设置宽高

  #bottomChart{
          width: 100%;
          height: 34vh;
        }

    mounted() {
      this.nowDate = moment(new Date()).format('YYYY.MM.DD')
      this.nowTime = moment(new Date()).format('HH:mm:ss')
      //定义一套绿色的皮肤
      let bottomChart = echarts.init(document.getElementById('bottomChart'))
      let rightChart = echarts.init(document.getElementById('rightChart'))
      let leftChart = echarts.init(document.getElementById('leftChart'))
      window.onresize = () => {
        bottomChart.resize()
        rightChart.resize()
        leftChart.resize()
      }
      // 底部的chart
      const xNames = ["xx分行", "xx分行", "xx分行", "xx分行", "xx分行"]
      const data1 = [100,220,56,166,199]
      const data2 = [300,420,356,166,499]
      this.renderBottomChart(bottomChart,xNames,data1,data2)
    //  右侧chart
      let xNamesRight = []
      for (let i=1;i <= 12; i++){
        xNamesRight.push(`${i}月`)
      }
      const rightData1 = [1,2,3,14,5,56,87,5,4,3,22,22]
      const rightData2 = [11,2,23,43,54,6,37,54,54,33,22,122]
      this.renderRightChart(rightChart,xNamesRight,rightData1,rightData2)
    //  左侧两个饼图
      this.renderLeftChart(leftChart,xNamesRight,rightData1,rightData2)
    },

  methods: {
      fontSize(res){ // 自适应字体大小,调用this.fontSize(0.16)
        let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res*fontSize;
      },
      resizeHeight(res){ // 自适应条形图高度 调用this.resizeHeight(10)
        let clientHeight = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
        if (!clientHeight) return;
        let h = clientHeight / 1080;
        return parseInt(res*h);
      },
      renderBottomChart(chart,xNames,data1,data2) {
        let option = {
          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow",
              "shadowStyle": {
                "color": "rgba(0,27,2,0.03)"
              }
            },
            "textStyle": {
              "color": "#fff"
            }
          },
          "grid": { // 类似css里的padding 到内容区上右下左的边距
            "x": 65,
            "y": 100,
            "x2": 40,
            "y2": 40,
          },
          "legend": {// 图例
            "data": [
              "放款金额/亿",
              "申请金额/亿",
            ],
            "right": 40,
            "top": 40,
            "icon": "roundRect",
            "itemWidth": 35,
            "itemHeight": 10,
            "selecte