echarts常用功能封装|抽象为mixin-阿里云开发者社区

开发者社区> 开发与运维> 正文

echarts常用功能封装|抽象为mixin

简介: echarts常用功能封装|抽象为mixin

目前已解锁以下功能:

  • [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

希望对大家有帮助哈~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章