2022-05-23 echarts二次封装组件的使用说明（以柱状图表为示例）

二次封装组件的结构

页面 views

页面视图只提供

• 读取数据的targetID
• echart自定义组件引用（这里的组件是页面的所有可视内容）

示例如下：

1. 读取数据的targetID

• 根据props的requestParams变量传递过来的targetID读取对应echart图表数据

this.getObjFun1(requestParams[0]) // 流动资产与非流动资产占比
this.getObjFun2(requestParams[1]) // 两金情况分析表（单位：亿元）
this.getObjFun3(requestParams[2]) // 有息负债(单位:亿元)
this.getObjFun4(requestParams[3]) // 资产情况表（单位：亿元）
this.getObjFun5(requestParams[4]) // 融资成本（单位：亿元）
this.getCard(requestParams[5]) // 卡片数据

2. echart自定义组件

• 组件使用

Card组件
功能：包裹echart组件，提供echart组件的权限控制、宽高等样式属性、加载动画、标题（单位, 下钻）示例如下：

  <自定义组件 /> # 如 

echart组件-Bar组件，示例如下：

日常写法示例： 说明：使用预定义option7为echart的预定义option类型，echartData指定图表数据
详细写法，示例如下：（区别：多了color、grid、label、legend、xAxis、yAxis、dataZoom这几项option的附加修改）

 # dataZoom [可选项]

    :swiper="false" # 待定项[不需要提供此项]
    :series="null" # option.series[可选项], 预留二次更新echart图表option的接口

示例