ECharts图表——封装通用配置

  前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因、或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改、五天一大改

  因此,项目里有统一的echarts图表配置,能统一所有图表的样式,修改起来也方便,如果有需要特殊设置的地方,再实例化echarts图表时覆盖通用配置或自行扩展配置即可

 

  通用配置

  封装EchartUtil工具类,方便获取通用配置,以及部分相关的方法

ECharts图表——封装通用配置

ECharts图表——封装通用配置

  通用配置主要有:
    统一的grid大小;
    统一的title标题样式;
    统一的各个系列的color;
    统一的legend位置,样式;
    统一的x轴、y轴、tooltip的formatter方法;
    统一的series样式(例如bar、line等);
    统一的文字字体、大小、颜色的设置;

   formatter中,有使用到rich富文本,为了体现出效果,目前是textStyle,颜色是红色,字体大小10,在格式化时,遍历字符串,如果当前字符时数字,样式改成颜色蓝色,字体大小12

  测试

  下面是一个简单图表的使用过程:

  0、前期准备:

    1、vue项目引入echarts

    2、创建指定宽高的DOM容器

  1、引入工具类

import echartUtil from "@/utils/echartUtil" import "@/assets/js/china.js"

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwypfs.html