vue-echarts如何實現(xiàn)圖表組件封裝詳解

更新時間：2022年05月14日 16:14:49 作者：王李香

由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,所以下面這篇文章主要給大家介紹了關(guān)于vue-echarts如何實現(xiàn)圖表組件封裝的相關(guān)資料,需要的朋友可以參考下

背景：

需要大量使用圖表的項目，為了提升開發(fā)效率，可以對圖表類進行封裝成組件，方便頁面的搭建，也能進行統(tǒng)一管理維護，即使后面系統(tǒng)風格需要調(diào)整，調(diào)整起來也比較方便、快速。

有哪些工具？

常用的有Echarts、AntV，使用起來都大同小異，具體圖表如何實現(xiàn)，看官網(wǎng)參數(shù)進行配置調(diào)整即可。

怎么封裝？

以Echarts為例，效果截圖

安裝依賴，安裝vue-echarts需要安裝echarts，vue2下使用vue-echarts還需要安裝@vue/composition-api。

npm install echarts --save
npm install vue-echarts --save
npm install --save @vue/composition-api

// 最終安裝版本
// "echarts": "^5.3.2",
// "vue-echarts": "^6.0.3",
// "@vue/composition-api": "^1.6.1",

使用vue-echarts對圖表進行封裝，這里只演示line折線圖，常用的柱狀圖bar、餅圖pie等與折線圖line的實現(xiàn)方法相似，更改defaultOption和option對應參數(shù)即可。vue-echarts只需要傳入option配置即可進行圖表更新，配合vue的computed，我們可以根據(jù)props進來的數(shù)據(jù)進行實時計算，從而實現(xiàn)echarts的繪制和數(shù)據(jù)更新。dataSource為傳進來echarts的數(shù)據(jù)，包括橫縱坐標的數(shù)值和配置參數(shù)；chartOption是一些用戶自定義的line參數(shù)，可以根據(jù)當前圖表的風格對組件做一些參數(shù)調(diào)整；height控制echart的高度。option的title、tooltip、grid、legend、xAxis、yAxis、series幾個重要參數(shù)，使用assign進行整合，如果chartOption有傳自定義的配置參數(shù)，則生效自定義配置參數(shù)，沒有，則使用默認配置。設(shè)置autoresize讓圖表自適應。

<template>
    <v-chart
        ref="myChart"
        class="echarts"
        :style="{height: height}"
        :option="option"
        autoresize
        @click="click"
    />
</template>

<script>
// eslint-disable-next-line no-unused-vars
import echarts from 'echarts'
import VChart from 'vue-echarts'
export default {
  name: 'EchartLine',
  components: {
    VChart
  },
  props: {
    dataSource: {
      type: Object,
      default: () => {
        return {}
      }
    },
    chartOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    height: {
      type: String,
      default: '340px'
    },
    unit: {
      type: String,
      default: ''
    }
  },
  computed: {
    option () {
      const option = {
        title: _.assign({}, this.defaultOption.title, this.chartOption.title || {}),
        tooltip: _.assign({}, this.defaultOption.tooltip, this.chartOption.tooltip || {}),
        grid: _.assign({}, this.defaultOption.grid, this.chartOption.grid || {}),
        legend: _.assign({}, this.defaultOption.legend, this.chartOption.legend || {}),
        xAxis: _.assign({}, this.defaultOption.xAxis, this.chartOption.xAxis, {data: this.dataSource.xAxis}),
        yAxis: _.assign({}, this.defaultOption.yAxis, this.chartOption.yAxis || {}),
        series: _.map(this.dataSource.yAxis, dataItem => {
          return {
            type: 'line',
            symbol: dataItem.symbol || 'circle',
            smooth: dataItem.smooth !== false,
            symbolSize: dataItem.symbolSize || 8,
            showSymbol: dataItem.showSymbol || (dataItem.data.length === 1),
            name: dataItem.name,
            data: dataItem.data,
            itemStyle: {
              color: dataItem.color,
              borderColor: 'rgba(255,255,255,0.8)',
              borderWidth: 2
            }
          }
        })
      }
      return option
    }
  },
  data () {
    return {
      defaultOption: {
        title: {
          x: '5%'
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(51,51,51,0.80)',
          padding: [14, 20]
        },
        grid: {
          top: '15%',
          left: '24',
          right: '24',
          bottom: '60',
          containLabel: true
        },
        legend: {
          left: 'center',
          bottom: '26',
          itemGap: 25,
          itemWidth: 8,
          itemHeight: 8,
          show: true,
          icon: 'circle',
          textStyle: {
            color: () => {
              return _.map(this.dataSource.yAxis, item => {
                return item.color
              })
            }
          }
        },
        xAxis: {
          axisLabel: {
            margin: 12,
            textStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#E8E8E8'
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          minInterval: 1,
          splitNumber: 5,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E8E8E8'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E8E8E8',
              opacity: 0.5,
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#666'
            }
          }
        }
      }
    }
  },
  methods: {
    click (e) {
      this.$emit('click', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts{
    width: 100%;
    height: 100%;
}
</style>

組件使用，配置dataSource即可展示數(shù)值，如果想自行定義一些參數(shù)配置，可通過chartOption配置實現(xiàn)。

<template>
  <EchartLine :dataSource="dataSource"></EchartLine>
</template>

<script>
import EchartLine from '@/components/EchartLine'
export default {
  name: 'EchartsDemo',
  components: {
    EchartLine
  },
  data () {
    return {
      dataSource: {
        xAxis: ['星期一', '星期二', '星期三', '星期四', '星期五'],
        yAxis: [
          {
            name: '語文',
            color: '#FF6F00',
            data: [45, 56, 24, 87, 45]
          },
          {
            name: '數(shù)學',
            color: '#FFB903',
            data: [34, 86, 67, 34, 89]
          },
          {
            name: '英語',
            color: '#3D8BFF',
            data: [66, 83, 45, 77, 73]
          }
        ]
      }
    }
  },
  methods: {
  }
}
</script>

Tips:

vue-echarts資料：github.com/ecomfe/vue-…

echarts v5各參數(shù)配置：echarts.apache.org/zh/option.h…