---

貼個地址~
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

理解或代碼有誤之處歡迎指正~