【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>

方法一实现效果

csdn-祁许

方法二

实际在项目中使用，发现第一个有局限性，它可以加载官方文档里最简单的一些图，但是示例那些复杂的却无法正确显示到页面上了，在控制台打印说无法找到对应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);
});