在vue项目中封装echarts的正确姿势

更新日期: 2020-03-11阅读量: 1118标签: echarts

为什么需要封装echarts

每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余

在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作

可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题


我希望这个echarts组件能设计成什么样

业务数据和样式配置数据分离,我只需要传入业务数据就行了

它的大小要完全由使用者决定

不会因为缩放出现变形问题,而是能很好地自适应

有时候某个图表的样式可能有点不一样,希望能保留自己配置样式的灵活性

无论传入什么数据都能正确地更新视图

如果我传入的数据为空,能展示一个空状态


公共组件结构建议

当你把它书写为一个公共组件时,我我希望它应该是这样:将单独机械的配置表独立成一份文件,暴露一个必要的vue单文件,同时携带一份README说明文档,当然,文档里面需要有关于你写的组件的使用示例和入参含义说明,这在大型项目中非常重要。



vue单文件代码

完整代码如下:

<template>
  <div class="chart"></div>
</template>

<script>
import { merge, isEmpty } from "lodash";
import echart from "echarts";
import { BASIC_OPTION, EMPTY_OPTION } from "./default_option";

export default {
  props: {
    // 业务数据
    dataList: {
      type: Array,
      default: () => []
    },
    // 特殊的样式定制
    extraOption: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    };
  },
  methods: {
    /**
     * 将业务数据加入到基础样式配置中
     * @returns {Object} 完整的echart配置
     */
    assembleDataToOption() {
      return merge(
        {},
        BASIC_OPTION,
        {
          series: [{ data: this.dataList }]
        },
        this.extraOption
      );
    },

    /**
     * 更新echart视图
     */
    updateChartView() {
      if (!this.chart) return;

      const fullOption = isEmpty(this.dataList)
        ? EMPTY_OPTION
        : this.assembleDataToOption();
      this.chart.setOption(fullOption, true);
    },

    /**
     * 当窗口缩放时,echart动态调整自身大小
     */
    handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    }
  },
  watch: {
    dataList: {
      deep: true,
      handler: () => this.updateChartView
    }
  },
  mounted() {
    this.chart = echart.init(this.$el);
    this.updateChartView();
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
  }
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>


关于源码的说明

在源码中,我用到了lodash的一个公共函数merge,它表示递归合并来源对象自身和继承的可枚举属性到目标对象。后续的来源对象属性会覆盖之前同名的属性

另外一个有幸被我宠幸的函数是isEmpty,当我传入的业务数据为空时,比如空数组[]、undefined、null时,都会被认为这是一个无数据的情况,这时候我们就选用一个空状态的echarts配置,即EMPTY_OPTION

在绑定到具体的DOM元素时,我没有用querySelector选择器去选择一个类或者是用Math.random生成的id,因为这两者都不是绝对可靠的,我直接使用当前vue示例关联的根DOM 元素$el

我监听窗口大小的变化,并为这种情况添加对应的事件处理函数--echarts自带的resize方法,使echarts图形不会变形

将对应DOM的宽高设为100%,让其大小完全由使用者提供的容器控制

setOption方法的第二个参数表示传入的新option是否不与之前的旧option进行合并,默认居然是false,即合并。这显然不行,我们需要每次的业务配置都是完全独立的

命名非常语义化,一看就懂

保留了自己需要单独配置一些定制样式的灵活性,即extraOption

关于dataList和extraOption的具体含义,使用示例,都放在README.md文件做详细说明,使用者一看文档就能上手


default_option.js应该包括哪些内容

应该包括两部分:正常情况下的基础配置BASIC_OPTION,异常情况下(数据为空)的EMPTY_OPTION,如下:



组件使用示例

<template>
  <div class="echart-wrapper">
    <chart-pie :>="pieData" :extra-option="option" />
  </div>
</template>

<script>
import ChartPie from "@/components/echarts/echart_pie/EchartPie.vue";

export default {
  name: "home",
  data() {
    return {
      // 业务数据
      pieData: [
        {
          name: "西瓜",
          value: 20
        },
        {
          name: "橘子",
          value: 13
        },
        {
          name: "杨桃",
          value: 33
        }
      ],
      // 定制化配置覆盖默认配置
      option: {
        color: ["#e033f7", "#15c28e", "#2267e6"]
      }
    };
  },
  components: {
    ChartPie
  }
};
</script>

<style lang="less" scoped>
.echart-wrapper {
  width: 300px;
  height: 300px;
  margin: 10px auto;
}
</style>


效果图

当数据正常时,效果如下


当无数据时,效果如下



可以更进一步优化的地方

我这一手封装已经是上乘之作,如果一定说哪里不足的话,我认为在resize的节流方面可以考虑引入lodash中的throttle节流函数,进一步优化性能。

原文:https://www.cnblogs.com/zhangnan35/p/12680038.html
站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/8589

关于ECharts内存泄漏问题

最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时

关于echarts图表在tab页中width:100%失效的问题

使用echarts时,写在tab页中的图表宽度明明设成了100%,但是在页面上实际却只有100px宽。解决办法:找一个在tab页的切换操作中不会隐藏的父容器,把它的宽度的具体值取出后在初始化图表之前直接赋给图表

微信小程序不支持Echarts中tooltip的解决方法

Echarts官方文档明确指出自己不支持微信小程序中使用Tooltip这个功能。但是只要做过图表设计的人都知道,Tooltip这个功能有多么重要,尤其是对于line图而言。那么如何解决或者说间接实现tooltip呢?

三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

对比以上3种图表,ECharts和BizCharts相对容易使用,尤其ECharts的配置非常清晰,BizCharts与其也有一定相似之处。BizCharts优势在于组件化的形式使得dom结构相对清晰,按需引用。G2比较适合需要大量图表交互时引用,其丰富的api处理交互逻辑相对更有优势。

echarts是什么_echart.js学习和使用

什么是Echarts?简单来说呢它就是一个商业级数据图表,一个纯JavaScript的图标库。可以兼容绝大部分的浏览器,可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。

如何在 Vue 项目中使用 echarts

数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,废话不多说,那我们就看看如何在 Vue 的项目中使用 echarts。

基于echarts 灵活封装react柱形图组件

现在各种框架各种库都很强大,但是也因为功能强大,导致很多配置都过于繁重,真正有用的就那么几个,今天就基于echarts封装一个通用柱形图!想要了解其他的组件可以看下我之前封装的其他组件有好的思路或者其他的也会分享出来的

echarts的使用注意要点

在公司做了一版dashboard,对echarts有了大量的实践。坚果图,日历图,折线图,地理图。难易程度排名为坚果图,折线图,日历图,地理图。总结了以下几点注意事项:

vue中使用ECharts实现折线图和饼图

在开发后台管理项目时,需要统计后台用户数据,以折现图和饼图的形式显示,这边采用apache-echarts来实现需求。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!