vue3 动态刷新echarts数据

最近在搞vue3项目，用composition API的写法的话的的确确之前很多插件都不好用了，echarts数据刷新这里也是苦恼了一阵

首先setup全局数据用provide和inject就能搞定，主要是数据刷新这里的写法。因为vue3的setup里屏蔽了this，并且在setup调起的时期页面还没构建生成，获取不到元素，所以不能像vue2那样直接this.setOption了，要稍微改动一下

...
setup() {
	let echarts = inject("ec");  // 我的项目把echarts注册到全局了，所以从这里拿，这个看具体需求
    let chart; // 这里是chart的根
    
	const chartOption = (param) => chart.setOption({  // 这里把配值项封装成方法，用这个方法来进行刷新
		title: {text: "这里是title"},
      	tooltip: { // 鼠标移上去的提示
        trigger: 'axis',   // 以坐标轴为参数
        axisPointer: {      // 好像是显示十字线：）
          type: 'cross'
        },
        backgroundColor: 'rgba(255,255,255,0.8)',   // 背景
        position: (pos, params, el, elRect, size) => {  // 弹窗显示的位置，这里为了保持在左右上角
          let obj = {top: 10};
          obj[['left', 'right'][+(pos[0] < size['viewSize'][0] / 2)]] = 30;
          return obj
        },
        extraCssText: 'text-align: left'
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: 'BTC-USDT',
          type: "k",
          data: param
        },
      ],
    });


    onMounted(() => {   //需要获取到element,所以是onMounted的Hook
      chart = echarts.init(document.getElementById("customerChart"));  // 这里就可以获取到这个元素了
      
      chartOption(testData)  // 绘制图表

      window.onresize = function () { //自适应大小
        chart.resize();
      };
    });
    
    return {
      chartOption
    }
}

用这种写法每次需要更新的时候就调用 chartOption 方法就好了
本文的例子是K线图，其他类型图同理