# fe-cube-plugin
npm包：表格， 排行榜，进度条，商品列表，卡片，卡片联动，echarts等组件供 百丽日报（仲谋app）使用

##  Install
```
npm（cnpm） install fe-cube-plugin --save
```
## Quick Start
```
import Vue from 'vue'
import cubePlugin from 'fe-cube-plugin'
Vue.use(cubePlugin);
import 'fe-cube-plugin/dist/index.css'

//chart Dom:
卡片：<cube-card :dataBody="data1.body" :dataHeaders="data1.headers" :params="params1"></cube-card>
进度条：<cube-progress :dataBody="data2.body" :dataHeaders="data2.headers":params="params2"></cube-progress>
表格：<cube-table :dataBody="data3.body" :dataHeaders="data3.headers" :params="params3"></cube-table>    
排行榜：<cube-rank :dataBody="data4.body" :dataHeaders="data4.headers" :params="params4"></cube-rank>    
echarts图表：
<div v-if="JSON.stringify(data6)!='{}'">
    <cube-echart v-if="data6.body.length" :dataBody="data6.body" :dataHeaders="data6.headers" :params="params6"></cube-echart>
</div>

//多个卡片
<div class="card-box">
    <div class="ul-box">
        <template v-for="(item,index) in 5" >
          <cube-card :dataBody="data1.body" :dataHeaders="data1.headers" :params="params1" :key="index"></cube-card>
        </template>
    </div>
</div>
.ul-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1em;
}
//表格参数（其他参数结构一样，params内容不同，可以不传）
data: {
    "headers": ["区域", "最终销额（万元）", "销额同比"],
    "body": [
        ["华东", 10308.03, 0.1065],
        ["华北", 10105.01, 0.2221],
        ["华南", 8841.93, 0.0543],
        ["西南", 6044.78, -0.0444],
    ]
},
params:{
    columnsList: [],
    colParams: {
    width: 100,
    titleAlign: "center",
    columnAlign: "center",
    isFrozen: true,
    isResize: true,
    }
} || 不传

模板层面：
1.卡片联动
 <cube-link-card :dataList="dataList"></cube-link-card>

```
## Browser Support
Modern browsers and Internet Explorer 10+.
