vue项目中使用echarts

最新推荐文章于 2023-10-28 22:20:16 发布

前端张三

最新推荐文章于 2023-10-28 22:20:16 发布

阅读量446

点赞数

分类专栏： vue3 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/weixin_44784401/article/details/126783250

版权

vue3 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

本文介绍了在Vue3项目中使用ECharts时遇到的DOM未找到错误及其解决方案。通过nextTick确保在DOM挂载后再进行ECharts初始化，从而避免了错误。同时提供了完整的代码示例，包括HTML结构、CSS样式和JavaScript部分，展示了如何正确引入并绘制ECharts图表。

摘要由CSDN通过智能技术生成

0： echart官网，在项目中引入本文安装引入参考echart官网示例
1：安装

npm install echarts --save

2：引入

import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

注意点1：echarts5.0以上版本引入时，需要添加 as，否则会引入失败指令为：import * as echarts from ‘echarts’*
3：一个显示echarts的出口

<div id="main"></div>

4：绘制图表


myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

注意点2：会出现报错：Uncaught (in promise) Error: Initialize failed: invalid dom，如下图
在这里插入图片描述
问题：看报错是说没有这个dom，我使用的是vue3项目，所以在setup函数中理论上是在create函数里的，这个时候dom还没有挂载
思考：在create中如何获取dom，脑海里肯定会想到setTimeout和nextTick，同理可得，使用onMounted也是可以的。所以出现了以上报错说没有dom的，可以使用setTimeout、nextTick和onMounted包裹你的代码，这里使用了nextTick来展示解决方法。
5：完整代码
注意点3：html中的表格一点要有宽高
（1）html

<div id="main"></div>

（2）css

<style scoped lang="less">
#main{
    width: 500px;
    height: 500px;
}
</style>

（3）javascript

<script lang="tsx" setup>
import { nextTick, onMounted} from 'vue'
// 使用setTimeout，nextTick, onMounted都可以
nextTick(()=>{
  var myChart = echarts.init(document.getElementById('histogram'));
    // 绘制图表
    myChart.setOption({ 
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
  });
})
</script>