1. npm安裝 echarts

npm install echarts --save

2. 引入Main.js中

// 引入方式如下，否則報錯 import * as echarts from 'echarts' // 將 createApp(App) 封裝 let app=createApp(App); // 注冊全局的方法 app.config.globalProperties.$echarts = echarts;

3. 使用 echarts 第一步

給 echarts頁面 準備一個寬高 <div id="myChart" :style="{ width: '1200px', height: '500px' }"></div>

4. 使用 echarts 第二步

mounted() {// 準備實例//this.$root => applet myChart = this.$root.$echarts.init(document.getElementById("myChart"));// echarts 配置// 繪制圖表myChart.setOption({title: { text: "時間" },tooltip: {},xAxis: {data: ["8-21", "8-22", "8-23", "8-24", "8-25", "8-26"],},yAxis: {},series: [{name: "日期",type: "bar",data: [6, 12, 12, 18, 12, 18],},],});} }

最后echarts完成了初步的入門

參考官方文檔鏈接：?https://echarts.apache.org/

總結

以上是生活随笔為你收集整理的Vue3 --- 安装和使用echarts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。