如何使用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();
});
},
轻松搞定🆗