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 {cubeCard} from 'fe-cube-plugin'
Vue.use(cubeCard);
//chart Dom:
卡片：<cube-card :dataBody="data1.body" :dataHeaders="data1.headers" :params="params1" @clickTooltip="clickTooltip"></cube-card>
进度条：<cube-progress :dataBody="data2.body" :dataHeaders="data2.headers":params="params2"></cube-progress>
<!-- drill可配置下钻 -->
表格：<cube-table :dataBody="data3.body" :dataHeaders="data3.headers" :params="params3" :drill="drill" @sendDrillName="getDrillName"></cube-table>    
<!-- 截图时图片跨域，传值跨域代理domain -->
排行榜：<cube-rank :dataBody="data4.body" :dataHeaders="data4.headers" :params="params4" :proxyDomain="domain" @clickRankShowAll="clickRankShowAll"></cube-rank>     

echarts图表：
<div v-if="JSON.stringify(data6)!='{}'">
    <cube-echart v-if="data6.body.length" :height="400" :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,
    }
} || 不传
drill: [{
   "dimension": "区域", "exclude": ["总公司", "华中"]
}],
domain:"http://10.xxx.xxx.xx:8080/v1.0/proxy/image?url="

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

Browser Support

Modern browsers and Internet Explorer 10+.