Vue echarts中怎么异步加载数据 ?

Question

这样单独放在一个js文件里 然后在组件引入 报错 查找不到, 里面的数据从后台服务器拿到数据后怎么给到option对应的数据里,所有的数据都是动态的
export const option = {
title: [

{
  text: "车辆状态"
},
{
  text: total.value,
  left: "30%",
  top: "46%",
  textAlign: "center",
  textBaseline: "middle",
  textStyle: {
    color: "#8483EF",
    fontWeight: "normal",
    fontSize: 42
  }
},
{
  text: total.name,
  left: "30%",
  top: "55%",
  textAlign: "center",
  textBaseline: "middle",
  textStyle: {
    color: "#999",
    fontWeight: "normal",
    fontSize: 20
  }
}

],
tooltip: {

trigger: "item",
formatter: "{b}",
backgroundColor: "rgba(0,0,0,0.7)", // 背景
padding: [8, 10] //内边距

},
legend: {

orient: "",
icon: "circle",
right: 100,
top: "center",
itemGap: 18,
textStyle: {
  color: "#666",
  fontSize: 16
},
// formatter: function (series) {
//   return series[0].data[0].value
// },
data: data_name

},
// graphic: {
// type: "text",
// left: "22%", // 相对父元素居中
// top: "middle", // 相对父元素居中
// padding: [10, 10],
// style: {
// fill: "#777",
// textAlign: "center",

// text: [" 2,000n 车辆总数"],
// font: "30px Microsoft YaHei"
// }
// },
series: [

{
  type: "pie",
  radius: [146, 160],
  center: ["30%", "50%"],
  color: "blue",
  hoverAnimation: false,
  avoidLabelOverlap: false,
  label: {
    normal: {
      show: false,
      position: "center"
    },
    formatter: `{value} 辆`
  },
  data: originalData
  // data: [
  //   {
  //     value: 150,
  //     name: "置业中",
  //     itemStyle: {
  //       color: "blue"
  //     }
  //   },
  //   {
  //     value: 150,
  //     name: "作业中",
  //     itemStyle: {
  //       color: "pink"
  //     }
  //   },
  //   {
  //     value: 150,
  //     name: "已报废",
  //     itemStyle: {
  //       color: "purple"
  //     }
  //   },
  //   {
  //     value: 150,
  //     name: "维修中",
  //     itemStyle: {
  //       color: "hotpink"
  //     }
  //   },
  //   {
  //     value: 150,
  //     name: "超载中",
  //     itemStyle: {
  //       color: "skyblue"
  //     }
  //   },
  //   {
  //     value: 1000,
  //     name: "请假中",
  //     itemStyle: {
  //       color: "lightgreen"
  //     }
  //   }
  // ]
}

]
}

Answer 1

先在外层定义好 option 数据请求回来之后 修改 option 然后 init