二次封装组件的结构
页面 views
页面视图只提供
- 读取数据的targetID
- echart自定义组件引用（这里的组件是页面的所有可视内容）
示例如下：
<template>
<AssetsLiabilities :requestParams="requestParams" title="中粮工科-资产负债"></AssetsLiabilities>
</template>
<script>
import AssetsLiabilities from '@/components/Pages/AssetsLiabilities/AssetsLiabilitiesPrimary' // echart自定义组件引用
export default {
components: { AssetsLiabilities },
data() {
return {
requestParams: ['zljt_ldzcyfldzczb','zljt_ljqkfxb','zljt_yxfz','zljt_zcqkb','zljt_rzcb','zljt_zcfzfx_kp'] // targetID
}
}
}
</script>
- 读取数据的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]) // 卡片数据
- echart自定义组件
- 组件使用
<Card
className="custome-card"
height="50%"
:isLoading="pageObj.part2.isLoading"
:code="pageObj.part2.code"
:useTitle="true"
:titleInfo="{ title: pageObj.part2.title }"
:useDetail="true"
:goingId="pageObj.part2Data.goingId"
:openPanel="() => {openDetail(pageObj.part2Data)}">
<Bar
:etype="7"
:chartId="'Performance2'"
:echartData="pageObj.part2">
</Bar>
</Card>
Card组件
功能：包裹echart组件，提供echart组件的权限控制、宽高等样式属性、加载动画、标题（单位, 下钻）示例如下：
<Card
className="custome-card" # [可选项]
:height="50%" # 高度 [必选项] 默认值为"100%" 注：height决定echart图表高度
:code="pageObj.part2.code" # 提示信息 [可选项] 注：code != 0 && code != 1 时显示“没数据”提示信息，code===-1: 未获取到相关数据, code===2: 无权限！ 其他code值：未知错误
:useTitle="true" # Card的标题 [可选项] 默认值为：false 不显示
:titleInfo="{ title: pageObj.part2.title, company: '' }" # [可选项] 标题内容（暂时只有标题、单位）
:isLoading="pageObj.part2.isLoading" # 加载中 [可选项] 默认值为：false 不显示
# 下钻图标，如下props用于 组件详情。 注：生效条件v-if="useDetail && goingId"
:useDetail="true" # userDetail
:goingId="pageObj.part2Data.goingId"
:openPanel="() => { openDetail(pageObj.part2Data) }"
:classBoxName="xxx" # 附加给Card最外层的类名 :class="['card-component', classBoxName]" [可选项]
:contentStyle="xxx" # 附加给Card内容的类名 class="box" :style="contentStyle" [可选项]
:className="xxx" # 附加给加载中、提示信息的类名 :class="['card-content', className]" [可选项]
:top="0" # Card的绝对定位top
:right="0" # Card的绝对定位right
:bottom="0" # Card的绝对定位bottom
:left="0" # Card的绝对定位left
:contentStyle="">
<自定义组件 /> # 如 <Bar />
</Card>
echart组件-Bar组件，示例如下：
日常写法示例：<Bar :etype="7" :chartId="'Performance2'" :echartData="pageObj.part2"></Bar> 说明：使用预定义option7为echart的预定义option类型，echartData指定图表数据
详细写法，示例如下：（区别：多了color、grid、label、legend、xAxis、yAxis、dataZoom这几项option的附加修改）
<Bar
:etype="7" # 预定义option类型。默认值为: 1 [可选项]
:chartId="'Performance2'" # [可选项]
:echartData="pageObj.part2" # [必填项]
:color="['#f00', '#0f0', '#00f']" # color [可选项]
# 当您发现etype指定的option不能满足你的需求时，可使用如下（color、grid、label、legend、xAxis、yAxis、dataZoom）props属性来修改预定义option类型。
:grid="[{top:0, right:0, bottom:0, left:0 }]" # grid [可选项]
:label="{show:true, position:'top'}" # label [可选项]
:legend="[{show:true, top:0, right:0, bottom:0, left:0, width:0, height:0, orient:'horizontal', textStyle:{ fontSize:'12px'}, itemGap:10, itemHeight:0, itemWidth:0, icon:'xxx', data:null }]" # legend [可选项]
:xAxis="[{ type:'category', xData:null, axisLabel:{ fontSize:'13px', rotate:360, textStyle:'$', formatter: { showWords:true } } }]" # xAxis [可选项]
:yAxis="[{ type:'value', scale:true, data:null, axisLabel:{ fontSize:'13px', textStyle:'' }, splitLine:{ splitLineType:'solid' } }]" # yAxis [可选项]
:dataZoom="{ showNumber:100 }"> # dataZoom [可选项]
:swiper="false" # 待定项[不需要提供此项]
:series="null" # option.series[可选项], 预留二次更新echart图表option的接口
</Bar>
示例
