关于前端:echarts常用功能封装抽象为mixin

目前已解锁以下性能：

• [x] 初始化echarts（initChart）
• [x] 获取echarts参数配置（getOption）
• [x] 生成echarts图表（setOption）
• [x] 监听resize事件触发echarts图表更新
• [x] 加载中loading

// charts.jsimport echarts from 'echarts'export default {  computed: {    // 初始化echarts    getChart () {      return this.$echarts.init(this.$refs.echart)    }  },  watch: {    chartData: {      handler (val) {        val && this.initChart()      }    }  },  mounted () {    this.getChart.showLoading()    window.addEventListener('resize', this.chartResize)    // 移除resize事件    this.$once('hook:beforeDestroy', () => {      window.removeEventListener('resize', this.chartResize)    })  },  methods: {    initChart () {      this.getChart.setOption(this.getOption())      this.getChart.hideLoading()    },    chartResize () {      this.getChart.resize()    }  }}

example:

<template>  <div>    <div ref="echart" style="height: 600px"></div>  </div></template><script>import Charts from '@/components/Charts.js'export default {   // 混入Charts  mixins: [Charts],  data () {    return {        chartData: []    }  },  mounted () {    // 模仿ajax申请    setTimeout(() => {      this.chartData = [0, 1, 2, 3]    }, 2000)  },  methods: {    getOption () {      // 配置options      return {        xAxis: {          type: "category",          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],        },        // 代码块...      }    }  }}</script>

ps：详情请查看examples

心愿对大家有帮忙哈～