【Vue】在Vue3中使用Echarts的示例两种方法

原创已于 2025-02-19 23:27:30 修改 · 3.2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts #前端 #vue #typescript

于 2025-02-07 21:59:21 首次发布

文章目录

方法一
方法二
其他补充

贴个地址~
Apache ECharts官网地址
 Apache ECharts示例地址
官网有的时候示例显示不出来，属于正常现象，多进几次就行

开始使用前，记得先安装好echart

npm install echarts --save

以下代码我采用的都是vue文件内全部引入，是否按需引入看各自项目要求进行精简。

免责声明（bushi）
我采用的版本是：
“echarts”: “^5.6.0”
“vue”: “^3.5.13”
“vite”: “^6.0.5”,
“vite-plugin-vue-devtools”: “^7.7.0”

方法一

template渲染部分

最简单的柱状图例子，跟着官方文档走的 -> Apache ECharts - 在项目中引入ECharts

在vue前面写上的显示区域div块的代码，下面代码是我自己的尝试内容，element-plus（也就是包含el-前缀的标签）是另外的内容，和Echart无关。

<template>
  <div>
    freedomwxe 第一次调试
  </div>

  <div>
    <el-button type="primary">点击</el-button>
  </div>
  <div>
    <span style="margin-left: 30px; color: #666">
      <el-icon :size="20" color="#666" style="top: 4px"><View /></el-icon> 666
    </span>
  </div>

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

</template>

重点在id=main的div块这里，和下面js代码相互对应

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

js部分

下面这块代码和上面的vue直接放到一起

重点在于onMounted这个钩子函数，如果直接贴上到js里，会发现页面内没有生效。
这里myChart用于获取id=main的dom元素，要确保获取到才能显示到上面对应id的div块。

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';


onMounted(() => {
  // 基于准备好的 dom，初始化 echarts 实例
  const myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
});
</script>


<style>
  .box{
    width: 300px;
    height: 300px;
    background-color: rgb(188, 227, 236);
  }
</style>

方法一实现效果

csdn-祁许

方法二

实际在项目中使用，发现第一个有局限性，它可以加载官方文档里最简单的一些图，但是示例那些复杂的却无法正确显示到页面上了，在控制台打印说无法找到对应dom元素（尽管代码逻辑上无误，也可能是我采用了lang=ts用的typescript的缘故）。
然后 ai 给的思路是在onMounted层内再套一层间隔时间的函数（nextTick不行），至于时间是多少我试过1、10、100、1000都可以，起到的作用就是等待这个chart被完全加载。

template部分

随意加上你要的div块，但是id必须与后续js（ts）里匹配

<section class="lt">
    <div class="leftClass">
       <div id="left-top-chart"></div>
    </div>
</section>

js or ts部分

有些地方可能存在冗余，根据各自实际代码进行调整

<script lang="ts" setup>
import {onMounted, reactive ,nextTick,ref} from 'vue'
import * as echarts from 'echarts';

// 左上部分
onMounted(() => {
  setTimeout(() => {
    const lt_chartDom = document.getElementById('left-top-chart');
    if (lt_chartDom) {
      // 基于准备好的 dom，初始化 echarts 实例
      const ltChart = echarts.init(lt_chartDom);
      console.log("left-top-chartDom: ", lt_chartDom)
      const ltoption = {
        xAxis: {
          color:[
            '#ffffff',
          ],
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          color:[
            '#ffffff',
          ],
          type: 'value'
        },
        series: [
          {
            color:[
              '#41bcf1',
            ],
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      ltChart.setOption(ltoption)

    } else {
      console.log("未找到left-top-chart的dom元素")
    }
  }, 1);    //可以设置等待时间
});

方法二实现效果

csdn-祁许

其他补充

如果有多层套壳加载的，可以试试nextTick函数，可以实现分开vue和ts文件后仍然能导入加载

举个栗子
在vue的script里加载如下代码

nextTick(() => {
    // 初始化图表 (确保图表在正确的顺序中加载)
    initializexxxxChart(xxx);
});

ts文件里

export const initializexxxxChart = () => {
  nextTick(() => {
        const rt_chartDom = document.getElementById('xxxxxxchart');
  });
}

也可以实现chart的加载

over

理解或代码有误之处欢迎指正~