VUE项目中封装Echart折线图的方法

本文实例为大家分享了VUE项目中封装Echart折线图的具体代码，供大家参考，具体内容如下

封装Echart折线图，可显示多条折线

1. 首先在项目中全局引入Echarts，main.js中：

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.components中新建组件baseLineChart.vue，以下代码直接复制：

<template>
    <div
      id="baseLineChart"
      ref="baseLineChart"
      :style="{ width: chartWidth, height: chartHeight }"
    />
</template>

<script>
export default {
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    timeX: {
      type: Array,
      default: () => []
    },
    chartName: {
      type: String,
      default: ''
    },
    chartWidth: {
      type: String,
      default: ''
    },
    chartHeight: {
      type: String,
      default: ''
    },
    seriesName: {
      type: Array,
      default: () => []
    },
    chartUnit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      baseLineChart: null,
      newChartData: {}
    }
  },
  computed: {
    chartOptions() {
      const options = {
        grid: {
          left: '4%',
          bottom: '8%',
          top: '15%',
          right: '0'
        },
        tooltip: {
          trigger: 'axis'
        },
        color: ['#1879BD', '#03B8DF', '#7B879A'],
        legend: {
          show: true,
          right: '0',
          top: '-1%',
          icon: 'circle'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            nameTextStyle: {
              padding: [0, 15, 0, 0]
            }
          }
        ],
        series: []
      }
      return options
    }
  },
  watch: {
    chartData: {
      handler(newValue, oldValue) {
        this.newChartData = newValue
        this.initData()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      if (this.chartData) {
        this.initData()
      }
    })
  },
  methods: {
    initChart() {
      const _this = this
      _this.baseLineChart = _this.$echarts.init(this.$refs.baseLineChart)
      window.addEventListener('resize', function () {
        _this.baseLineChart.resize()
      })
    },
    initData() {
      let sData = []
      if (this.chartData) {
        sData = this.chartData.map((val, index) => {
          return {
            data: val,
            name: this.seriesName[index],
            type: 'line'
          }
        })
        this.chartOptions.series = sData
      }
      this.chartOptions.xAxis[0].data = this.timeX
      this.chartOptions.yAxis[0].name = `单位(${this.chartUnit})`
      this.baseLineChart.setOption(this.chartOptions, true)
    }
  }
}
</script>

配置项根据自身项目来定制。

3、在组件中引入：

<template>
  <div>
      <baseLine
        :chart-data="chartData"
         :time-x="timeX"
         chart-name="OEE"
         chart-width="1700px"
         chart-height="350px"
         :series-name="seriesName"
         chart-unit="%"
          />
    </div>
</template>
import baseLine from '@/components/charts/baseLineChart.vue'
<script>
export default {
 components: {
    baseLine
  },
 data() {
   return {
     timeX: [],
     chartData：[]
     seriesName: ['白班', '晚班']
   }
 },
}
</script>

chart-width 图表宽度
chart-height 图表高度
chart-unit 图表数据的显示单位
timeX为X轴数据，一般为时间数组 [‘1-1’,‘1-2’,‘1-3’ ]；
chartData为折线数据，多条数据格式 [ [1,2,3],[4,5,6] ]
seriesName为每条折线对应名称

同理可封装其他图表

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。