效果圖

安裝Echarts

cnpm install echarts --save

vue頁面使用

<template><div id="myChart123" :style="{width: '1500px', height: '550px'}"></div> </template><script> // 引入echarts import * as echarts from 'echarts' import {onMounted} from "vue";export default {setup() {onMounted(() => { // 需要獲取到element,所以是onMounted的Hooklet myChart = echarts.init(document.getElementById("myChart123"));// 繪制圖表myChart.setOption({xAxis: {data: ["4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"]},yAxis:{},series: [{name: "用戶量",type: "line",data: [8, 15, 31, 13, 15, 22, 11]}]});window.onresize = function () { // 自適應大小myChart.resize();};});} } </script>

總結

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

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