vue-admin-template 新手學習（八）Echarts圖表

最新推荐文章于 2026-01-11 01:19:33 发布

原创

最新推荐文章于 2026-01-11 01:19:33 发布 · 1.2k 阅读

标签

#vue.js

收录于

本文介绍了如何在Vue项目中使用Echarts进行图表展示。首先通过npm安装echarts依赖，然后在main.js中全局引入。接着在组件的mounted生命周期钩子中实例化Echarts对象，并确保DOM已加载。最后，在methods中定义配置图表的方法，更多Echarts属性配置可参考官方网站。

安裝依賴 npm install echarts --save

在main.js全局引入

import echarts from 'echarts'

Vue.prototype.$eacharts = echarts

準備echarts容器

<template>
  <div class="chart-container">
    <chart height="100%" width="100%" />
  </div>
</template>

在mounted生命週期函數中實例化對象確保dom元素已經掛載到頁面

  mounted() {
    this.initChart()
  }

在methods 定義一個方法

initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const xData = (function() {
        const data = []
        for (let i = 1; i < 13; i++) {
          data.push(i + 'month')
        }
        return data
      }())
      this.chart.setOption({

        //設置title legend grid series xAxis yAxis tooltip dataZoom 。。。
      })
  }
}