Vue3 --- 安装和使用echarts
生活随笔
收集整理的這篇文章主要介紹了
Vue3 --- 安装和使用echarts
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 解决XShell连接时无法root用户登
- 下一篇: Vue 实现 Open Graph 分享