做数据可视化的时候，经常碰到需要很灵活的数字形式展示。

先上个效果图：

如图包括名称，数量，别名，单位，上升下降，环比等等的复合数据展示，并且需要支持样式灵活配置。

此组件包括2个模块，父容器组件box-group，其中每一项的子组件box。

父组件 box-group

1
17
18
75
76

子组件 box

1
21
22
141
142

调用案例：

@selected="boxGroupSelected">

1 boxData: [
2 {
3 label: '初等教育',
4 value: 12447,
5 unit: '人',
6 alias: '1.5%',
7 // percent: 0.3,
8 trend: -120,
9 valueSize: 0.9,
10 aliasSize: 0.7
11 },
12 {
13 label: '中等教育',
14 value: 579160,
15 unit: '人',
16 alias: '69.6%',
17 percent: 5.8,
18 valueSize: 0.9,
19 aliasSize: 0.7
20 },
21 {
22 label: '高等教育',
23 value: 66622,
24 unit: '人',
25 alias: '8%',
26 // percent: -8.6,
27 trend: -86,
28 valueSize: 0.9,
29 aliasSize: 0.7
30 },
31 {
32 label: '研究生教育',
33 value: 3734,
34 unit: '人',
35 alias: '0.4%',
36 // percent: -0.2,
37 trend: 189,
38 valueSize: 0.9,
39 aliasSize: 0.7
40 },
41 {
42 label: '有房',
43 value: 459386,
44 unit: '人',
45 alias: '55.2%',
46 percent: -5,
47 valueSize: 1.2,
48 aliasSize: 0.9
49 },
50 {
51 label: '有车',
52 value: 63210,
53 unit: '人',
54 alias: '7.6%',
55 percent: -6.3,
56 valueSize: 1.2,
57 aliasSize: 0.9
58 }
59 ]

1 boxGroupSelected(val) { 2 console.log(val); 3 }

附录：variables.scss

// base color

// $blue: #324157;
// $menuBg: #304156;
// $menuHover: #263445;
// $subMenuBg: #1f2d3d;
// $subMenuHover: #001528;

$color-background-s: rgba(0, 0, 0, 0.9);

$blue: #00417a;
$commonBlue: #0000ff;
// $menuBg: #00417a;
$menuBg: #ffffff;
// $menuHover: #00355e;
$menuHover: #f4f4f4;
// $subMenuBg: #003462;
$subMenuBg: #ffffff;
// $subMenuHover: #002546;
$subMenuHover: #e7e7e7;
$menuBorderRight: 1px solid #c5c1c1;

$light-blue: #1890ff;
$red: #f56c6c;
$deep-red: #ff0000;
$blood-red: #d50000;
$pink: #dc67ce;
$green: #0bbd87;
$tiffany: #4ab7bd;
$yellow: #e6a23c;
$deep-yellow: #d69737;
$panGreen: #30b08f;
$purple: #6771dc;
$grey: #585858;
$light-grey: #f0f0f0;
$orange: #ff8037;
$deep-green: #07885f;
$light-green: #0bbd8722;
$light-purple: #6771dc22;
// sidebar
// $menuText: #bfcbd9;
$menuText: #002546;
// $menuActiveText: #409eff;
$menuActiveText: #08ac76;
// $subMenuActiveText: #f4f4f5;
$subMenuActiveText: #00417a;

$sideBarWidth: 230px;
$headerHeight: 54px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
blue: $blue;
commonBlue: $commonBlue;
lightBlue: $light-blue;
red: $red;
deepRed: $deep-red;
bloodRed: $blood-red;
pink: $pink;
green: $green;
deepGreen: $deep-green;
lightGreen: $light-green;
lightPurple: $light-purple;
tiffany: $tiffany;
yellow: $yellow;
deepYellow: $deep-yellow;
orange: $orange;
panGreen: $panGreen;
purple: $purple;
grey: $grey;
lightGrey: $light-grey;
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}

参数解释：

col：每行的列数

theme：主题，这个是我的整个插件有个variables.scss，里面有很多主题色

lineGap：行间距

dataProvider：

[{

label: '初等教育', //标题
value: 12447, //主数值
unit: '人', //单位
alias: '1.5%', //别名
percent: 0.3, //百分比
trend: -120, //趋势值

labelSize: 1, //标题字体大小 rem
valueSize: 0.9, //主数值字体大小 rem
aliasSize: 0.7, //别名字体大小 rem

unitSize: 1, //单位字体大小 rem

color: '#000000', //所有文字颜色，颜色优先级为 具体子项颜色（下面的颜色参数）> color > theme

iconColor: '#000000', //左边边框颜色

labelColor: '#000000', //标题文字颜色

valueColor: '#000000', //主数值文字颜色

aliasColor: '#000000', //别名文字颜色

unitColor: '#000000', //单位文字颜色

}]