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

文章目录

• 方法一
• • template渲染部分
  • js部分
  • 方法一实现效果
• 方法二
• • template部分
  • js or ts部分
  • 方法二实现效果

---

贴个地址~
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>

方法一实现效果

---

方法二

实际在项目中使用，发现第一个有局限性，它可以加载官方文档里最简单的一些图，但是示例那些复杂的却无法正确显示到页面上了，在控制台打印说无法找到对应dom元素（尽管代码逻辑上无误，也可能是我采用了lang=ts的缘故）。

然后ai给的思路是在onMounted层内再套一层间隔时间的函数（nextTick不行），至于时间是多少我试过1、10、100、1000都可以。

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);
});

方法二实现效果

over

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