vue使用Echarts相關圖表的方法以及案例

Vue 專案中 使用 Echarts 圖表

1、在vue專案中安裝 vue-echarts

• 使用npm安裝

npm install vue-echarts

2、在 main.js檔案中引入echarts

import ECharts from 'vue-echarts/components/ECharts.vue'  // 引入vue-echarts 組件
Vue.component('echarts', ECharts) // 全域注冊組件

import echarts from 'echarts/lib/echarts' // 引入echarts 實體
Vue.prototype.$echarts = echarts   // 把echats實體 系結到vue的實體物件上

Vue.prototype.$echartsResize = function (refs) {   // echarts圖例縮放實體
  window.addEventListener("resize", function () {
    refs.resize()
  })
}

案例1： 環形圖

<template>
 <echarts :options="option" :auto-resize="true"></echarts>
</template>

<script>
export default {
  data() {
    return {
      option:{},
      option4Data: [
          {value: 39, name: '5000元以下'},
          {value: 19, name: '1000-2000元'},
          {value: 22, name: '2000-3000元'},
          {value: 11, name: '3000-4000元'},
          {value: 19, name: '4000元-5000元'},
          {value: 12, name: '50000元以上'},
        ]
    }
  },
  created () {
    this.getEpyData()
  },
  methods: {
    getEpyData() {
      this.option = {
          tooltip: {  //  提示框
            trigger: 'item', // 觸發型別: 'item'：資料項圖形觸發、'axis':坐標軸觸發、'none': 不觸發 
            padding:[10,30,10,30], // 內邊距 從第一個開始，上-右-下-左
            backgroundColor:'rgba(255,255,255,0.8)', // 背景顏色
            extraCssText:'box-shadow: 0px 0px 8px 0px rgba(150,178,191,0.5); ', // 額外添加到浮層的css樣式,本樣式為陰影，
            textStyle : {  // 提示框浮層的文本樣式
              color: '#333333',  
              fontFamily: 'PingFangSC, PingFangSC-Regular',
              fontSize: 12,
            },
            formatter: '{b} , {d}%' // 提示框浮層內容格式器，支持字串模板和回呼函式兩種形式，
            /**
            	本圖中使用的是 字串模版，  根據情況使用不同的形式
                折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
				散點圖（氣泡）圖 : {a}（系列名稱），{b}（資料名稱），{c}（數值陣列）, {d}（無）
				地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合并數值）, {d}（無）
				餅圖、儀表盤、漏斗圖: {a}（系列名稱），{b}（資料項名稱），{c}（數值）, {d}（百分比）
            */
          },
          legend: { // 圖例組件，泛指圖形以外的指示器
            align: 'left',  // 圖例標記和文本的對齊
            orient: 'vertical', // 圖例串列的布區域向
            itemWidth: 10, // 更改legend圖示大小
            itemGap: 10, // 圖例每項之間的間隔
            bottom: 20, // 圖例組件離容器下側的距離
            height: '18%', // 圖例組件的高度，默認自適應
            icon: 'circle',  // 圖例項的 icon : 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 也可以通過 'image://http://xxx.xxx.xxx/a/b.png' 設定為圖片
            data: this.option4Data, // 圖例的資料陣列，
            formatter: (name) => {   // 用來格式化圖例文本，支持字串模板和回呼函式兩種形式，
              let data = this.option4Data
              let total = 0
              let target
              for (let i = 0; i < data.length; i++) {
                total += data[i].value
                if (data[i].name === name) {
                  target = data[i].value
                }
              }
              let arr = [
                '{a|' + name + '}{c|' + ((target / total) * 100).toFixed(0) + '%}'
              ]
              return arr.join('\n')
            },
            textStyle: { // 圖例的公用文本樣式
              rich: {  // 可以自定義富文本樣式，利用富文本樣式
                a: {
                  fontSize: 12,
                  align: 'left',
                  padding:[0,10,0,0]
                },
                b: {
                  fontSize: 12,
                  align: 'center',
                  width: 20

                },
                c: {
                  fontSize: 12,
                  align: 'left',
                  width: 25
                }
              }
            }
          },
          color: ["#2d99ff", "#e0effd", "#83cddd", "#83cfff", "#86e3c8", "#e2f1ff"],  // 調色盤顏色串列，如果系列沒有設定顏色，則會依次回圈從該串列中取顏色作為系列顏色，
          series: [
            {
              name: '工資明細',
              type: 'pie', // 餅圖類
              top: 0,  //  chart組件離容器上側的距離，
              radius: ['33.5%', '60%'],  // 餅圖的半徑，
              center: ['50%', '35%'], // 餅圖的中心（圓心）坐標，陣列的第一項是橫坐標，第二項是縱坐標，
              avoidLabelOverlap: false, // 是否啟用防止標簽重疊策略，默認開啟，在標簽擁擠重疊的情況下會挪動各個標簽的位置，防止標簽間的重疊
              label: {  // 餅圖圖形上的文本標簽，可用于說明圖形的一些資料資訊，比如值，名稱等，
                show: false,  
              },
              labelLine: {  // 標簽的視覺引導線配置，在 label 位置 設定為'outside'的時候會顯示視覺引導線，
                show: false
              },
              data: this.option4Data
            }
          ]
        }
    }
  }
  
}
</script>

先更新一個餅圖， 后續還有更多圖示案例，歡迎評論區指出

將來的你，一定會感謝現在拼命的你