vue裏面使用Echarts

Echarts

main.js 註冊全局echarts

// echarts
import echarts from './core/echarts'
Vue.prototype.$echarts = echarts

core/echarts.js echarts按需引入

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入餅圖組件
require('echarts/lib/chart/pie')

// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default echarts

use.vue 使用echarts實例

<template>
  <div id="myChart" class="myChart" :style="{width: '300px', height: '150px', margin: '0 auto'}"></div>
</template>

<script>
export default {
  data:{
    return {
      pie: {
        tooltip: { // 圖例的 tooltip 配置，配置項同 legend.tooltip。默認不顯示，可以在 legend 文字很多的時候對文字做裁剪並且開啓 tooltip
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        itemWidth: '10', // 圖例標記的圖形寬度
        textStyle:{},
        legend: { // 圖例
          orient: 'vertical',
          x: 'right',
          icon: 'round', // 和data裏面的icon類型，設置的是所有icon
          data: [{ // 圖例的數據可以是對象或者字符串類型
            name:'直接訪問', // 圖例項的名稱，應等於某系列的name值（如果是餅圖，也可以是餅圖單個數據的 name）
            // 強制設置圖形爲圓。
            icon: 'circle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            // 設置文本爲紅色
            textStyle: { // 圖例項的文本樣式。
                color: 'red'
            }
          }, '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
        },
        series: [
          {
            name: '訪問來源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '15',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '直接訪問' },
              { value: 310, name: '郵件營銷' },
              { value: 234, name: '聯盟廣告' },
              { value: 135, name: '視頻廣告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    drawLine () {
      // 基於準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 繪製圖表
      myChart.setOption(this.pie)
    },
  },
  mounted () { // 注意，必須mounted後繪製
    this.drawLine()
  },
}