vue中引用echarts图标详细步骤

如何使用echart图标在vue中
就仅仅简单的四步骤 轻松搞定 跟着我的思路 come on !!!

1.首先定义id或者ref

 <div ref='drawtu' style=' width:100%;height:211px;'></div>

2.然后 根据自己的喜好 要么按需引入，要么全局引入

import * as echarts from 'echarts';

3.在方法体中写echart图标函数

 initChart() {
            // the first 初始化实例 这里两种方法一个是id一个是ref
            let drawtut = echarts.init(this.$refs.drawtut);
            //let drawtut = echarts.init(document.getElementById('drawtut'));  这种是id
            let option = {
                标题
                 title: {
                   text: '小试牛刀'
                 },
                 ..........
            //使用Vue数据绑定来更新option对象
            drawtut.setOption(option);
                },

4.要记住 生命周期 中 在使用的组件需要在mounted中调用，然后自己再console.log 打印是否有其值

mounted() {
        this.initChart()
    console.log('id', echarts.init(this.$refs.drawtut));
},

但有的时候会报错

Error in mounted hook: 'Error: Initialize failed: invalid dom'"

报错提示表明该 DOM 元素无效，可能因为在调用 initChart() 之前，DOM 元素尚未完全加载。这可能导致无法正确找到 drawtut 元素

更好的解决问题可以 让其在下一个 DOM 更新周期中执行，确保 DOM 元素已经加载完毕

mounted() {
  this.$nextTick(() => {
    this.initChart();
  });
},

轻松搞定🆗