用vue引入echarts柱狀圖之后, 布局全亂了?

之前在js直接引用echarts可以正常使用, 下面的圖是我之前做的

但是用了vue之后, 布局全亂了, 調(diào)也調(diào)不了

1. html

1. js

export default {

mounted() {
/* 統(tǒng)計柱狀圖 */
var myChart = echarts.init(document.getElementById("main"));

// 指定圖表的配置項和數(shù)據(jù)
var statistics = {
  title: {
    text: "面積",
    textStyle: {
      fontWeight: "normal",
      color: "#fff", // 標題顏色
      fontSize: 14
    },
    left: "center"
  },
  tooltip: {
    // 鼠標移動柱狀圖是提示文字
    show: true
  },
  legend: {
    // data: ['面積'],
    textStyle: {
      fontSize: 12
    }
  },
  // 橫坐標
  xAxis: {
    data: ["灌木", "森林", "森林", "樹木", "小樹", "大樹", "紅樹"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    }
  },
  // 縱坐標
  yAxis: {
    // 設(shè)置坐標軸字體顏色
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#07405c"]
      }
    }
  },
  //配置樣式
  itemStyle: {
    color: '#06ae7c',
    //鼠標懸停時：
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: "rgba(0, 0, 0, 0.5)"
    }
  },
  series: [
    {
      type: "bar",
      barWidth: 50, // 設(shè)置柱的寬度
      data: [38, 23, 35, 12, 26, 8, 36]
    }
  ]
};

// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(statistics);

}
}