场景

项目背景是vue3 ts中引用Echarts，表格中的数据是通过axios获取的，然后再显示到表格。在获取数据到渲染表格这个部分遇到小问题，本文档用于记录从获取数据到表格渲染出效果的全过程。

对于创建vue3 ts项目与引入Echarts这一块不详细讲解，直接放出他们的地址，可以参照看看官网说明。辅助阅读文档：

快速上手Echarts项目 && 动态图表实时更新 && vue起步（官方文档）

解决方案

先说解决方案后面再说思考过程。把所有代码依次拷贝可以直接运行。

进行引入

import { onMounted, reactive, toRefs, } from 'vue';
import { ECharts, EChartsOption, init } from 'echarts';
import axios from "axios"

设定变量以及定义表格

设定两个Echarts类型的变量用于后面暂存操作dom的数据，在reactive设定两个表格的数据源变量，定义表格的代码官网有太多样例了，这里就不赘述了，这里仅对series里面数据进行微调——data数据换成我们自己定义的数据。

let charComfortableObj: ECharts
let charAlarmObj: ECharts

const datahome = reactive({
  ComfortableoptionArr: [],
  AlarmoptionArr: [],
});

const Comfortableoption: EChartsOption ={内容参照官网}
const Alarmoption: EChartsOption = {内容参照官网，series进行修改，修改后内容如下}
series: [
    {
      data: datahome.ComfortableoptionArr,
      type: 'line',
    }
  ]

加载数据的函数

axios请求数据，后端接口还没做出来我写了一个JSON文件将就一下，这里的res根据实际情况来写。目的是给两个表格数据进行赋值。这里的fresh函数后面说。

function loadData() {
  axios.get("/Node/homeData.json").then((res) => {
    datahome.ComfortableoptionArr = res.data.result.ComfortableoptionArr
    datahome.AlarmoptionArr = res.data.result.AlarmoptionArr
    fresh()
  })
}

获取dom节点创建图表容器

这里的div就不详细说了，只是为了挂载，一个id外没有别的了，id名称随便起，下面对应就行。我的代码这里有样式class，为了方便看其他无用的都砍掉。这里div前两行代码放在template中。后面放在Ts部分（script lang='ts' setup）。做的事情是获取dom元素给表格挂载数据。

<div id="comfortable" ></div>
<div id="alarm"></div>

function getHtml() {
  const charComfortable = document.getElementById('comfortable') as HTMLElement;
  charComfortableObj = init(charComfortable,);
  charComfortableObj.setOption(Comfortableoption);

  const charAlarm = document.getElementById('alarm') as HTMLElement;
  charAlarmObj = init(charAlarm);
  charAlarmObj.setOption(Alarmoption);
}

刷新数据

重头戏是这里。大概功能是将数据进行更新，具体函数功能参照官网setOption。

setOption函数简述为：设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

function fresh() {
  charAlarmObj.setOption<echarts.EChartsOption>({
    series: [
      {
        data: datahome.AlarmoptionArr
      }
    ]
  });
  charComfortableObj.setOption<echarts.EChartsOption>({
    series: [
      {
        data: datahome.ComfortableoptionArr
      }
    ]
  });
}

在生命周期函数调用

onMounted(() => {
  loadData()
  getHtml()  
});

思考过程

开始的时候想的是可能数据没有传过来，后面通过查看临时变量的打印情况发现数据传过来了但是没有显示，这时就思考到如果把数据刷新和加载数据放在一起可能会出现问题。获取数据是一个异步请求的过程，但是数据刷新和加载数据放在一起以后，数据刷新会因为是同步函数先执行，后面执行了加载数据后，数据刷新不会再执行一次，也就是说数据刷新这个函数没有起到应该有的效果。所以，数据刷新函数需要放在数据获取后面。这里的图表数据源不能通过toRefs进行更新（引入后没有高亮说明没用到）。这里的comfortableNum是在 template 有用到过，可以及时更新 template 中的数据，但是不能更新没有在template用到的数据。

const { comfortableNum,ComfortableoptionArr,AlarmoptionArr } = toRefs(datahome)

Echarts在vue setup中的异步数据更新

场景