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

希望对大家有帮助哈~

相关文章
|
9月前
若依框架 --- echarts 封装
若依框架 --- echarts 封装
389 0
|
JavaScript
自行封装的tabs组件配合echarts而出现的bug以及解决
自行封装的tabs组件配合echarts而出现的bug以及解决
236 0
|
2月前
一文带你封装Vue3 Echarts
一文带你封装Vue3 Echarts
170 7
一文带你封装Vue3 Echarts
|
4月前
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
240 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
4月前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
329 0
这样封装echarts简单好用
这样封装echarts简单好用
|
9月前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
定位技术
echarts引入百度地图通过脚本bmap.min.js解决关闭底图可点功能的底层解决方案
echarts引入百度地图通过脚本bmap.min.js解决关闭底图可点功能的底层解决方案
205 0
|
9月前
|
前端开发 JavaScript
React中封装echarts图表组件以及自适应窗口变化
React中封装echarts图表组件以及自适应窗口变化
248 1
|
9月前
|
移动开发 前端开发 JavaScript
用echarts实现一个简单的生成图表的功能
用echarts实现一个简单的生成图表的功能
64 0

热门文章

最新文章