VUE中使用Echarts圖表

我這里使用的是官方的echarts，並沒有使用vue-echarts，這里我使用的是折線圖，根據需求需要什么類型的圖表，就配置相應的圖表選項就可以了，效果圖如下：

echarts的配置語法可參考：https://www.runoob.com/echarts/echarts-setup.html

官方文檔：https://echarts.apache.org/zh/option.html#title

安裝echarts依賴：

    npm install echarts -S
    或者使用淘寶的鏡像
    npm install -g cnpm --registry= https://registry.npm.taobao.org
    cnpm install echarts -S

 

介紹兩種使用方式：全局引入和按需引入；

 

1、按需引入方式如下：

在需要使用圖表的頁面如：home.vue中這么寫：

<template>
    // 指定圖表容器，需要指定寬高，否則可能不顯示
    <div id="myChart" class="charts-box" style="width: 100%;height: 420px;" />
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入折線圖組件
require('echarts/lib/chart/line')
// 引入提示框和title、圖例組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
    name: 'Home',
    mounted() {
        this.drawLine()
    },
    drawLine() {
      // 基於准備好的dom，初始化echarts實例
      const myChart = echarts.init(document.getElementById('myChart'))
      myChart.showLoading() // 開啟 loading 效果
      setTimeout(() => {
        myChart.hideLoading() // 隱藏 loading 效果
      }, 2000)
      // 繪制圖表
      myChart.setOption({
        title: { text: '瀏覽統計' }, // 為圖表配置標題
        tooltip: {}, // 配置提示信息
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '123', '456', '789', '111', '1231', '5555']
        }, // 配置要在 X 軸顯示的項
        yAxis: {
          type: 'value'
        }, // 配置要在 Y 軸顯示的項
        legend: {
          data: ['瀏覽量', '收藏量']
        }, // 圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示
        series: [
          {
            name: '瀏覽量', // 系列名稱
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1350, 1333, 2000, 100, 2500, 3333], // // 系列中的數據內容
            type: 'line' // // 系列圖表類型
          },
          {
            name: '收藏量',
            data: [1000, 800, 3000, 93, 129, 133, 130, 135, 133, 200, 1000, 250],
            type: 'line'
          }
        ] // 系列列表
      })
    }
}
</script>

 

2、全局引入方式如下：

　在main.js中

    // 引入echarts
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

在需要使用圖表的頁面如：home.vue中這么寫：

<template>
    // 圖表容器，需要指定寬高
    <div id="myChart" class="charts-box" style="width: 100%;height: 420px;" />
</template>

<script>
export default {
    name: 'Home',
    mounted() {
        this.drawLine()
    },
    drawLine() {
      // 基於准備好的dom，初始化echarts實例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.showLoading() // 開啟 loading 效果
      setTimeout(() => {
        myChart.hideLoading() // 隱藏 loading 效果
      }, 2000)
      // 繪制圖表
      myChart.setOption({
       title: { text: '瀏覽統計' }, // 為圖表配置標題
        tooltip: {}, // 配置提示信息
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '123', '456', '789', '111', '1231', '5555']
        }, // 配置要在 X 軸顯示的項
        yAxis: {
          type: 'value'
        }, // 配置要在 Y 軸顯示的項
        legend: {
          data: ['瀏覽量', '收藏量']
        }, // 圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示
        series: [
          {
            name: '瀏覽量', // 系列名稱
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1350, 1333, 2000, 100, 2500, 3333], // // 系列中的數據內容
            type: 'line' // // 系列圖表類型
          },
          {
            name: '收藏量',
            data: [1000, 800, 3000, 93, 129, 133, 130, 135, 133, 200, 1000, 250],
            type: 'line'
          }
        ] // 系列列表
      })
    }
}
</script>

 

所有圖標類型，每個系列通過 type 決定自己的圖表類型：

• type: 'bar'：柱狀/條形圖
• type: 'line'：折線/面積圖
• type: 'pie'：餅圖
• type: 'scatter'：散點（氣泡）圖
• type: 'effectScatter'：帶有漣漪特效動畫的散點（氣泡）
• type: 'radar'：雷達圖
• type: 'tree'：樹型圖
• type: 'treemap'：樹型圖
• type: 'sunburst'：旭日圖
• type: 'boxplot'：箱形圖
• type: 'candlestick'：K線圖
• type: 'heatmap'：熱力圖
• type: 'map'：地圖
• type: 'parallel'：平行坐標系的系列
• type: 'lines'：線圖
• type: 'graph'：關系圖
• type: 'sankey'：桑基圖
• type: 'funnel'：漏斗圖
• type: 'gauge'：儀表盤
• type: 'pictorialBar'：象形柱圖
• type: 'themeRiver'：主題河流
• type: 'custom'：自定義系列