vue 项目使用echarts异步加载，xAxis坐标轴不显示

1.安装echarts

cnpm install echarts -S

2.main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

3.tool.vue

<template>
  <div id="Toolrecord" class="box">
    <div id="Toolrecordecharts" :style="{height:height,width:width}" class="charts"></div>
  </div>
</template>

import echarts from "echarts";//作为子组件，此处也得引入
export default {
  name: "Toolrecord",
  data() {
    return {};
  },
  props: {
    height: {
      type: String,
      default: "15vw"
    },
    width: {
      type: String,
      default: "30vw"
    }
  },
  mounted() {
    this.draw();
    window.addEventListener("resize", () => {
      this.chart.resize(); //监听屏幕大小，来刷新画布
    });
  },
  methods: {
    draw() {
      this.chart = echarts.init(document.getElementById("Toolrecordecharts"));
      this.$http.get("../../static/toolrecord.json").then(function(res) {
        var serie = [];
        for (var i = 0; i < res.body.series.length; i++) {
          serie.push({
            name: res.body.series[i].name,
            type: "bar",
            markPoint: {
              data: res.body.series[i].markPoint
            },
            markLine: {
              data: res.body.series[i].markLine
            },
            data: res.body.series[i].data
          });
        }
        this.chart.setOption({
          backgroundColor: "transparent",
          title: {
            text: "刀具记录",