echart-vue最佳实践

echart-vue最佳实践

技术杂谈小彩虹2021-07-11 22:38:2660A+A-

前言

echart是前端开发中经常会使用到的绘制图表的js库,echart使用json配置的方式确实很简单易用。

但在实际项目中,系统首页或统计页面中涉及到大量图表,代码中也充斥着大量json代码,看起来很不优雅,这里分享自己在vue项目中echart的使用方式,

使用的echart 版本: 5.0

echart 5.0中,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

设计的原则:

  • 封装一个通用的echart-vue基础组件,实现包括loading动画,数据预加载等等;
  • 根据项目特点,封装常用的echart各种类型图表的option配置

具体代码:

//echart组件
<template>
  <div class="bar-chart" :id="id" :style="style"></div>
</template>

<script> import { getUId } from '@/util/uuid' // 随机生成uuid export default { props: { chartTitle: { type: String, default: '' }, isLoading: { type: Boolean, default: true }, option: { type: Object, default: {} } }, data() { return { chart: undefined, id: undefined } }, computed: { style() { return { height: this.height, width: this.width } } }, created() { this.id = getUId() }, mounted() { this.chart = this.$echarts.init(document.getElementById(this.id)) this.chart.setOption(this.option) }, methods: { // 更新echart配置项,如果参数是回调函数,显示loading动画 async updateOption(argus) { if (typeof argus === 'function') { if (this.isLoading) { this.chart.showLoading() } const option = await argus() this.chart.setOption(option) } else { this.chart.setOption(argus) } } } } </script>

<style scoped> </style>
// 柱状图默认配置项
export const BARCHART_OPTION = {
  title: {
    text: '---',
    subtext: '--',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar'
  }]
}
// vue页面中使用
<template>
      <Echart ref="chart" :chart-title='' class="chart" :option="Option" :style="{width:'100%',height:'380px'}"/>
</template>
<script>
import Echart from '@/components/echart/index'
import { BARCHART_OPTION } from '@/components/echart/comp/echart-default-option'

export default {
  name: 'StatisWindow',
  components: { Echart },
  data() {
    return {
      option: Object.assign({}, BARCHART_OPTION),
    }
  },
  mounted() {
    this.$refs.chart.updateOption({
        //具体配置项
    })
}

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们