最近项目中用到较多的echarts图表，所以考虑把它们做成组件，以便日后的复用。

一、引入echarts

在package.json中写入echarts依赖，运行npm install

"dependencies": {
    ...
    "echarts": "4.2.1",
    ...
  }

二、按需引入模块

整个echarts文件还是挺大的，我们可以根据自身的需求，按需引入模块。比如我新建了一个js，然后根据项目需求引入了折线图、柱状图等组件。

// 引入主模块
import echarts from 'echarts/lib/echarts'
// 按需引入需要使用的图表类型，标题，提示信息等
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
export default echarts

三、创建组件

需要考虑以下几点：

1、图表创建
2、图表需根据数据变化而变化(使用watch监听传入的数据)
3、窗口发生变化时，图表能自适应（echarts的resize方法）
4、无数据的时候需要做一些提示说明

最终代码如下：

<template>
  <div class="module-box" :style="{height:height,width:width}">
    <div v-if="showChart" :id="id" class="chart-box" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>
<script>
import echarts from '@/config/echarts'
import resize from '@/views/dashboard/mixins/resize'
export default {
  mixins: [resize],
  props: {
    data: {
      default() {
        return {
          tradeLineData: [
            {
              name: "折线1",
              color: "#3186FF",
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: "折线2",
              color: "#FF9609",
              data: [108, 125, 148, 136, 99, 87, 148]
            }
          ],
          tradeLineAxis: ['01/01','01/02','01/03','01/04','01/05','01/06','01/07'],
        }
      }
    },    
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    yAxisName: {
      type: String,
      default: '人次'
    },
  },
  data() {
    return {
      chart: null,
      showChart:true,
      option: {
        color: ['#589DFF', '#FC7D6A', '#30C28D', '#FAC000'],
        title: {
          text: '',
          textStyle: {
            color: '#222222',
            fontSize: 14,
            lineHeight: 20
          },
          left: 24,
          top: 0
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.8)',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            lineHeight: 20
          },
          padding: 12
        },
        legend: {
          show: true,
          right: 26,
          // icon: 'circle',
          itemWidth: 6,
          itemHeight: 6,
          top: 0,
          itemHeight: '5',
          itemGap: 26,
          textStyle: {
            fontSize: 14,
            color: '#757575',
            fontWeight: 400,
            lineHeight: 20
          },
          data: []
        },
        grid: {
          containLabel: true,
          left: 26,
          right: 30,
          top: 64,
          bottom: 10
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#BDC8D3'
            }
          },
          nameGap: 8,
          axisTick: {
            show: true,
            lineStyle: {
              width: 1,
              height: 4,
              color: '#BDC8D3'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
              fontSize: 14,
              lineHeight: 14
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          name: this.yAxisName,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F0F3F5',
              height: 1
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: '#222',
            fontSize: '16',
            lineHeight: 22,
            fontWeight:500,
            padding: [0, 0, 20, 0]
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
              fontSize: 14,
              lineHeight: 14,
              fontFamily: 'Helvetica'
            }
          }
        },
        series: []
      }
    }
  },
  computed: {
    id() {
      return (
        'pieChart' + new Date().getTime() + Math.round(Math.random() * 100)
      )
    },
  },
  created() {
    
  },
  watch: {
    data: {
      deep: true,
      handler(newVal, oldVal) {
        console.log("newVal：",newVal)
        console.log("reload line chart")
        if(newVal.tradeLineAxis.length){
          this.showChart = true
          this.initChart()
        }else{
          this.showChart = false
        }
      }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.option.series = this.keyParams().series
      this.option.legend.data = this.keyParams().legend
      this.option.xAxis.data = this.data.tradeLineAxis
      if (this.option.legend.data.length > 1) {
        this.option.legend.show = true
      }
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.option, true)
    },
    
    keyParams() {
      const p = {
        legend: [],
        series: [],
        color: []
      }
      this.data.tradeLineData.forEach(el => {
        p.color.push(el.color),
        p.legend.push({
          name: el.name,
          textStyle: {
            color: '#666666'
          }
        })
        p.series.push({
          type:'line',
          name: el.name,
          // stack: "总量",
          barMaxWidth: 25,
          symbol: 'circle',
          // symbolSize: 8,
          showAllSymbol: true,
          itemStyle: {
            normal: {
              color: el.color,
              borderWidth: '3'
            }
          },
          lineStyle: {
            normal: {
              color: el.color,
              width: '2'
            }
          },
          // areaStyle: {
          //   normal: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: el.color
          //       },
          //       {
          //         offset: 1,
          //         color: '#ffffff'
          //       }
          //     ]),
          //     opacity: '0.1'
          //   }
          // },
          data: el.data
        })
      })
      return p
    },
    delPositiveLable(val) {
      return val.toString().replace(/\-/, '')
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
}
.module-box {
  position: relative;
}
.chart-box {
  position: relative;
  height: 100%;
}
.no-data {
  font-size:14px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(111,111,111,1);
  line-height:20px;
}
</style>

混入的resize方法：

import { debounce } from '@/utils'
export default {
  data() {
    return {
      $_sidebarElm: null
    }
  },
  mounted() {
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  beforeDestroy() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  activated() {
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  deactivated() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  methods: {
    $_resizeHandler() {
      return debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)()
    },
    $_initResizeEvent() {
      window.addEventListener('resize', this.$_resizeHandler)
    },
    $_destroyResizeEvent() {
      window.removeEventListener('resize', this.$_resizeHandler)
    },
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    $_initSidebarResizeEvent() {
      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    $_destroySidebarResizeEvent() {
      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    }
  }
}

以及工具类的防抖函数debounce：

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result
  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp
    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }
    return result
  }
}

四、组件调用

<template>
  <TradeLine
    :data="data"
    height="390px"
  />
  ...
</template>
<script>
import TradeLine from "@/views/operation/components/TradeLine"
export default {
    data() {
        return {
            data:{
                tradeLineData: [
                  {
                    name: "折线1",
                    color: "#3186FF",
                    data: []
                  },
                  {
                    name: "折线2",
                    color: "#FF9609",
                    data: []
                  }
                ],
                tradeLineAxis: [],
            },
            ...
        }
    },
    created() {
        this.initLineChartData();
    },
    methods:{
        initLineChartData() {
          consultTreeData(this.param).then(res => {
            // 清空数据
            this.data.tradeLineData.forEach(element => {
              element.data = [];
            });
            this.data.tradeLineAxis = []
            res.param.forEach(element => {
              this.data.tradeLineData[0].data.push(element.wzCount);
              this.data.tradeLineData[1].data.push(element.fzCount);
              this.data.tradeLineAxis.push(this.formatYearMonth(element.dateTime));
            });
          });
        },
        ...
    },
    ...
}
</script>