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

---

贴个地点~
Apache ECharts官网地点
Apache ECharts示例地点
官网有的时间示例表现不出来，属于正常现象，多进反复就行

---

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

1. 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无关。

1. <template>
2.   <div>
3.     freedomwxe 第一次调试
4.   </div>
6.   <div>
7.     <el-button type="primary">点击</el-button>
8.   </div>
9.   <div>
10.     <span style="margin-left: 30px; color: #666">
11.       <el-icon :size="20" color="#666" style="top: 4px"><View /></el-icon> 666
12.     </span>
13.   </div>
15.   <div id="main" class="box"></div>
17. </template>

复制代码

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

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

复制代码

js部门

下面这块代码和上面的vue直接放到一起
   重点在于onMounted这个钩子函数，假如直接贴上到js里，会发现页面内没有生效。
这里myChart用于获取id=main的dom元素，要确保获取到才华表现到上面对应id的div块。

1. <script setup>
2. import * as echarts from 'echarts';
3. import { onMounted } from 'vue';
6. onMounted(() => {
7.   // 基于准备好的 dom，初始化 echarts 实例
8.   const myChart = echarts.init(document.getElementById('main'));
9.   // 绘制图表
10.   myChart.setOption({
11.     title: {
12.       text: 'ECharts 入门示例'
13.     },
14.     tooltip: {},
15.     xAxis: {
16.       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
17.     },
18.     yAxis: {},
19.     series: [
20.       {
21.         name: '销量',
22.         type: 'bar',
23.         data: [5, 20, 36, 10, 10, 20]
24.       }
25.     ]
26.   });
27. });
28. </script>
31. <style>
32.   .box{
33.     width: 300px;
34.     height: 300px;
35.     background-color: rgb(188, 227, 236);
36.   }
37. </style>

复制代码

方法一实现结果

---

方法二

现实在项目中使用，发现第一个有范围性，它可以加载官方文档里最简单的一些图，但是示例那些复杂的却无法正确表现到页面上了，在控制台打印说无法找到对应dom元素（只管代码逻辑上无误，也大概是我采用了lang=ts的缘故）。
然后ai给的思路是在onMounted层内再套一层隔断时间的函数（nextTick不可），至于时间是多少我试过1、10、100、1000都可以。
template部门

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

1. <section class="lt">
2.     <div class="leftClass">
3.        <div id="left-top-chart"></div>
4.     </div>
5. </section>

复制代码

js or ts部门

有些地方大概存在冗余，根据各自现实代码进行调整

1. <script lang="ts" setup>
2. import {onMounted, reactive ,nextTick,ref} from 'vue'
3. import * as echarts from 'echarts';
5. // 左上部分
6. onMounted(() => {
7.   setTimeout(() => {
8.     const lt_chartDom = document.getElementById('left-top-chart');
9.     if (lt_chartDom) {
10.       // 基于准备好的 dom，初始化 echarts 实例
11.       const ltChart = echarts.init(lt_chartDom);
12.       console.log("left-top-chartDom: ", lt_chartDom)
13.       const ltoption = {
14.         xAxis: {
15.           color:[
16.             '#ffffff',
17.           ],
18.           type: 'category',
19.           boundaryGap: false,
20.           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
21.         },
22.         yAxis: {
23.           color:[
24.             '#ffffff',
25.           ],
26.           type: 'value'
27.         },
28.         series: [
29.           {
30.             color:[
31.               '#41bcf1',
32.             ],
33.             data: [820, 932, 901, 934, 1290, 1330, 1320],
34.             type: 'line',
35.             areaStyle: {}
36.           }
37.         ]
38.       };
39.       ltChart.setOption(ltoption)
41.     } else {
42.       console.log("未找到left-top-chart的dom元素")
43.     }
44.   }, 1);
45. });

复制代码

方法二实现结果

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。