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

43次阅读

共计 1063 个字符，预计需要花费 3 分钟才能阅读完成。

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

// charts.js
import 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

心愿对大家有帮忙哈～

正文完