From dd84344faa1b601a44bc359c6cd81a2842211191 Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Wed, 12 Dec 2018 18:48:17 +0800
Subject: [PATCH] demo

---
 src/views/demo/borderBoxDemo.vue  |  78 ++++
 src/views/demo/chartDemo.vue      | 632 ++++++++++++++++++++++++++++++
 src/views/demo/decorationDemo.vue |  98 +++++
 3 files changed, 808 insertions(+)
 create mode 100644 src/views/demo/borderBoxDemo.vue
 create mode 100644 src/views/demo/chartDemo.vue
 create mode 100644 src/views/demo/decorationDemo.vue

diff --git a/src/views/demo/borderBoxDemo.vue b/src/views/demo/borderBoxDemo.vue
new file mode 100644
index 0000000..13d33f3
--- /dev/null
+++ b/src/views/demo/borderBoxDemo.vue
@@ -0,0 +1,78 @@
+<template>
+  <div id="border-box-demo">
+    <border-box-1 class="border-box-item">
+      border-box-1
+    </border-box-1>
+
+    <border-box-2 class="border-box-item">
+      <border-box-2 class="bbi-2">border-box-2</border-box-2>
+    </border-box-2>
+
+    <border-box-3 class="border-box-item">
+      border-box-3
+    </border-box-3>
+
+    <border-box-4 class="border-box-item">
+      border-box-4
+    </border-box-4>
+
+    <border-box-4 class="border-box-item" :reverse="true">
+      border-box-4(reverse)
+    </border-box-4>
+
+    <border-box-5 class="border-box-item">
+      border-box-5
+    </border-box-5>
+
+    <border-box-5 class="border-box-item" :reverse="true">
+      border-box-5(reverse)
+    </border-box-5>
+
+    <border-box-6 class="border-box-item">
+      <border-box-6 class="bbi-6">border-box-6</border-box-6>
+      <border-box-6 class="bbi-6">border-box-6</border-box-6>
+      <border-box-6 class="bbi-6">border-box-6</border-box-6>
+      <border-box-6 class="bbi-6">border-box-6</border-box-6>
+    </border-box-6>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BorderBoxDemo'
+}
+</script>
+
+<style lang="less">
+#border-box-demo {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .border-box-item {
+    position: relative;
+    width: 50%;
+    height: 300px;
+    text-align: center;
+    line-height: 300px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .bbi-2 {
+    position: absolute;
+    width: 200px;
+    height: 80px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    line-height: 50px;
+  }
+
+  .bbi-6 {
+    width: 25%;
+    height: 100%;
+    float: left;
+  }
+}
+</style>
diff --git a/src/views/demo/chartDemo.vue b/src/views/demo/chartDemo.vue
new file mode 100644
index 0000000..618777b
--- /dev/null
+++ b/src/views/demo/chartDemo.vue
@@ -0,0 +1,632 @@
+<template>
+  <div id="chart-demo">
+    <border-box-4 class="chart-item">
+      <capsule-chart :data="capsuleChartData" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Capsule-Chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      value: 85,
+      title: '收费系统'
+    },...
+  ],
+  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b']
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item" :reverse="true">
+      <arc-ring-chart :data="arcRingChartData" class="chart" />
+      <div class="config-info">
+        <div class="header">Arc-Ring-Chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      value: 38,
+      title: '监控系统'
+    },...
+  ],
+  color: ['#00c0ff', '#3de7c9', '#fff']
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item">
+      <concentric-arc-chart :data="concentricArcChartData" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Concentric-Arc-Chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      value: 0.38,
+      title: '8小时以内'
+    },...
+  ],
+  color: ['#00c0ff', '#3de7c9'], // 多个颜色 即可产生对应渐变色
+  arcArea: [0.3, 0.7],           // 非必须
+  arcGap: 5,                     // 非必须
+  fontSize: 12                   // 非必须
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item" :reverse="true">
+      <ring-chart :data="ringChart1" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Ring-Chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      value: 1315,
+      title: '收费站'
+    },...
+  ],
+  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+  active: true      // 为false时 无动态效果
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item">
+      <ring-chart :data="ringChart2" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Ring-chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      value: 1315,
+      title: '收费站'
+    },...
+  ],
+  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+  active: false      // 为true时 有动态效果
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item" :reverse="true">
+      <polyline-chart :data="polylineChartData1" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Polyline-chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      // 存在空位时 该点忽略
+      data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56, '', 99.81, 99.56,
+        99.56, '', '', 99.36, 99.42, '', 99.56, '', '', 99.56, 99.23, 99.62],
+      // 配置此项 将进行颜色填充 非必须
+      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
+      // 配置此项可更改数据点颜色 不配置 自动才用全局颜色 非必须
+      pointColor: '#00db95',
+      // 配置此项可更改数据线颜色 不配置 自动采用全局颜色 并进行透明度处理 比数据点颜色略低 非必须
+      lineColor: '#ffc53d',
+      // 默认为折线 可选项有 polyline 折线 | smoothline 平滑曲线 | column 柱状 非必须
+      type: 'polyline'
+      dashed: true // 默认为false 实线 非必须
+    },...
+  ],
+  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+  x: {
+    // 必填项 不想显示底部刻度 可以全留空位
+    data: [ '10/01', '', '10/03', '', '10/05', '', '10/07', '', '10/09', '', '10/11', '',
+      '10/13', '', '10/15', '', '10/17', '', '10/19', '', '10/21', '', '10/23' ],
+    unit: '%'       // 单位展示 非必须
+    // fontSize: 20 // x轴刻度字体大小 非必须
+    // offset: 30   // x轴向上偏移 此处未配置 非必须
+  },
+  y: {
+    min: 96,    // y轴最小值 未配置则自动根据数据计算 非必须
+    max: 100,   // y轴最大值 未配置则自动根据数据计算 非必须
+    fixed: 2,   // y轴刻度
+    num: 10,    // 刻度个数 默认为10 数据范围不足10则自动缩减 非必须
+    unit: '%'   // 单位展示 非必须
+    // fontSize: 20     // x轴刻度字体大小 非必须
+    // offset: 30       // x轴向上偏移 此处未配置 非必须
+  },
+  // boundaryGap: false // 配置为true 将不贴合边界进行绘制 非必须
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item">
+      <polyline-chart :data="polylineChartData2" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Polyline-chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56, '', 99.81, 99.56,
+        99.42, 99.56, '', '', 99.36, 99.42, '', 99.56, '', '', 99.56, 99.23, 99.62],
+      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
+      pointColor: '#00db95',
+      type: 'polyline'
+    },
+    {
+      data: [97.81, 97.42, 97.56, 97.23, 97.62, 97.36, 97.56, '', 97.81, 97.56,
+        97.42, 97.56, '', '', 97.36, 97.42, '', 97.56, '', '', 97.56, 97.23, 97.62],
+      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
+      type: 'smoothline'
+    }
+  ],
+  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+  x: {
+    data: ['10/01', '', '10/03', '', '10/05', '', '10/07', '', '10/09', '', '10/11', '',
+      '10/13', '', '10/15', '', '10/17', '', '10/19', '', '10/21', '', '10/23']
+  },
+  y: {
+    fixed: 2,
+    unit: '%'
+  },
+  boundaryGap: true
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item" :reverse="true">
+      <polyline-chart :data="polylineChartData3" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Polyline-chart</div>
+        <pre>
+data: {
+  data: [
+    {
+      data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
+      columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
+      type: 'column'
+    },
+    {
+      data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
+      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
+      type: 'smoothline'
+    }
+  ],
+  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+  x: {
+    data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
+  },
+  y: {
+    fixed: 2,
+    unit: '%'
+  },
+  boundaryGap: true
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <border-box-4 class="chart-item">
+      <polyline-chart :data="polylineChartData4" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Polyline-chart</div>
+        <pre>
+data: [
+  {
+    data: [5, '', '', '', 2, '', '', '', 4, '', '', '',
+      2, '', '', '', 3, '', '', '', 2],
+    dashed: true
+  },
+  {
+    data: ['', 4, '', '', '', 3, '', '', '', 4, '', '',
+      '', 2, '', '', '', 1, '', '', '', 2 ],
+    fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
+  },
+  {
+    data: ['', '', 3, '', '', '', 2, '', '', '', 1, '',
+      '', '', 2, '', '', '', 1, '', '', '', 2],
+    type: 'smoothline',
+    fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
+  },
+  {
+    data: ['', '', '', 3, '', '', '', 1, '', '', '', 5,
+      '', '', '', 2, '', '', '', 4, '', '', '', 2],
+    type: 'column',
+    columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
+  }
+],
+x: {
+  data: ['', '', '', '', '', '', '10/07', '', '', '', '', '', '', '10/14',
+    '', '', '', '', '', '', '10/21', '', '', '']
+},
+y: {
+  max: 6,
+  min: 0,
+  num: 6,
+  unit: '单位'
+},
+labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
+color: ['#00baff', '#3de7c9', '#ffc53d', '#342432']
+}
+        </pre>
+      </div>
+    </border-box-4>
+
+    <!-- <border-box-4 class="chart-item" :reverse="true">
+      <polyline-chart :data="polylineChartData" class="chart" />
+
+      <div class="config-info">
+        <div class="header">Polyline-chart</div>
+        <pre>
+        </pre>
+      </div>
+    </border-box-4> -->
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChartDemo',
+  data () {
+    return {
+      capsuleChartData: {
+        data: [
+          {
+            value: 85,
+            title: '收费系统'
+          },
+          {
+            value: 44,
+            title: '通信系统'
+          },
+          {
+            value: 125,
+            title: '监控系统'
+          },
+          {
+            value: 110,
+            title: '供配电系统'
+          },
+          {
+            value: 66,
+            title: '其他'
+          }
+        ],
+        color: [
+          '#00baff',
+          '#3de7c9',
+          '#ffffff',
+          '#ffc53d',
+          '#469f4b'
+        ]
+      },
+
+      arcRingChartData: {
+        data: [
+          {
+            value: 19,
+            title: '监控系统'
+          },
+          {
+            value: 16,
+            title: '收费系统'
+          },
+          {
+            value: 24,
+            title: '通信系统'
+          },
+          {
+            value: 14,
+            title: '供配电系统'
+          },
+          {
+            value: 27,
+            title: '其他'
+          }
+        ],
+        color: ['#00c0ff', '#3de7c9', '#fff']
+      },
+
+      concentricArcChartData: {
+        data: [
+          {
+            value: 0.38,
+            title: '8小时以内'
+          },
+          {
+            value: 0.57,
+            title: '24小时以内'
+          },
+          {
+            value: 0.7,
+            title: '48小时以内'
+          },
+          {
+            value: 0.78,
+            title: '72小时以内'
+          },
+          {
+            value: 0.22,
+            title: '大于72小时'
+          }
+        ],
+        color: ['#00c0ff', '#3de7c9'],
+        arcArea: [0.3, 0.7],
+        arcGap: 5,
+        fontSize: 12
+      },
+
+      ringChart1: {
+        data: [
+          {
+            value: 1315,
+            title: '收费站'
+          },
+          {
+            value: 415,
+            title: '监控中心'
+          },
+          {
+            value: 90,
+            title: '道路外场'
+          },
+          {
+            value: 317,
+            title: '其他'
+          }
+        ],
+        color: [
+          '#00baff',
+          '#3de7c9',
+          '#ffffff',
+          '#ffc53d',
+          '#469f4b'
+        ],
+        active: true
+      },
+
+      ringChart2: {
+        data: [
+          {
+            value: 1315,
+            title: '收费站'
+          },
+          {
+            value: 415,
+            title: '监控中心'
+          },
+          {
+            value: 90,
+            title: '道路外场'
+          },
+          {
+            value: 317,
+            title: '其他'
+          }
+        ],
+        color: [
+          '#00baff',
+          '#3de7c9',
+          '#ffffff',
+          '#ffc53d',
+          '#469f4b'
+        ],
+        active: false
+      },
+
+      polylineChartData1: {
+        data: [
+          {
+            data: [
+              99.81, 99.42, 99.56, 99.23, 99.62,
+              99.36, 99.56, '', 99.81, 99.56,
+              99.42, 99.56, '', '', 99.36,
+              99.42, '', 99.56, '', '',
+              99.56, 99.23, 99.62
+            ],
+            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
+            pointColor: '#00db95',
+            lineColor: '#ffc53d',
+            type: 'polyline',
+            dashed: true
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+        x: {
+          data: [
+            '10/01', '', '10/03', '', '10/05', '',
+            '10/07', '', '10/09', '', '10/11', '',
+            '10/13', '', '10/15', '', '10/17', '',
+            '10/19', '', '10/21', '', '10/23'
+          ]
+        },
+        y: {
+          min: 96,
+          max: 100,
+          fixed: 2,
+          num: 10,
+          unit: '%'
+        }
+      },
+
+      polylineChartData2: {
+        data: [
+          {
+            data: [
+              99.81, 99.42, 99.56, 99.23, 99.62,
+              99.36, 99.56, '', 99.81, 99.56,
+              99.42, 99.56, '', '', 99.36,
+              99.42, '', 99.56, '', '',
+              99.56, 99.23, 99.62
+            ],
+            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
+            pointColor: '#00db95',
+            type: 'polyline'
+          },
+          {
+            data: [
+              97.81, 97.42, 97.56, 97.23, 97.62,
+              97.36, 97.56, '', 97.81, 97.56,
+              97.42, 97.56, '', '', 97.36,
+              97.42, '', 97.56, '', '',
+              97.56, 97.23, 97.62
+            ],
+            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
+            type: 'smoothline'
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+        x: {
+          data: [
+            '10/01', '', '10/03', '', '10/05', '',
+            '10/07', '', '10/09', '', '10/11', '',
+            '10/13', '', '10/15', '', '10/17', '',
+            '10/19', '', '10/21', '', '10/23'
+          ]
+        },
+        y: {
+          fixed: 2,
+          unit: '%'
+        },
+        boundaryGap: true
+      },
+
+      polylineChartData3: {
+        data: [
+          {
+            data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
+            columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
+            type: 'column'
+          },
+          {
+            data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
+            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
+            type: 'smoothline'
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
+        x: {
+          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
+        },
+        y: {
+          fixed: 2,
+          unit: '%'
+        },
+        boundaryGap: true
+      },
+
+      polylineChartData4: {
+        data: [
+          {
+            data: [
+              5, '', '', '',
+              2, '', '', '',
+              4, '', '', '',
+              2, '', '', '',
+              3, '', '', '',
+              2
+            ],
+            dashed: true
+          },
+          {
+            data: [
+              '', 4, '', '',
+              '', 3, '', '',
+              '', 4, '', '',
+              '', 2, '', '',
+              '', 1, '', '',
+              '', 2
+            ],
+            fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
+          },
+          {
+            data: [
+              '', '', 3, '',
+              '', '', 2, '',
+              '', '', 1, '',
+              '', '', 2, '',
+              '', '', 1, '',
+              '', '', 2
+            ],
+            type: 'smoothline',
+            fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
+          },
+          {
+            data: [
+              '', '', '', 3,
+              '', '', '', 1,
+              '', '', '', 5,
+              '', '', '', 2,
+              '', '', '', 4,
+              '', '', '', 2
+            ],
+            type: 'column',
+            columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
+          }
+        ],
+        x: {
+          data: [
+            '', '', '', '', '', '', '10/07',
+            '', '', '', '', '', '', '10/14',
+            '', '', '', '', '', '', '10/21',
+            '', '', ''
+          ]
+        },
+        y: {
+          max: 6,
+          min: 0,
+          num: 6,
+          unit: '单位'
+        },
+        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
+        color: ['#00baff', '#3de7c9', '#ffc53d', '#342432']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#chart-demo {
+  display: flex;
+  flex-direction: column;
+
+  .chart-item {
+    width: 80%;
+    min-height: 300px;
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0px;
+    margin-left: 20%;
+  }
+
+  .chart {
+    width: 400px;
+    height: 300px;
+    flex-shrink: 0;
+  }
+
+  .config-info {
+    padding: 0px 30px;
+    font-size: 15px;
+
+    .header {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/demo/decorationDemo.vue b/src/views/demo/decorationDemo.vue
new file mode 100644
index 0000000..f84bd69
--- /dev/null
+++ b/src/views/demo/decorationDemo.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="decoration-demo">
+    <border-box-6 class="decoration-container">
+      <decoration-1 class="decoration d1 center" />
+      decoration-1
+    </border-box-6>
+
+    <border-box-6 class="decoration-container">
+      <decoration-2 class="decoration d2 center" />
+      decoration-2
+    </border-box-6>
+
+    <border-box-6 class="decoration-container">
+      <decoration-2 class="decoration d2r center" :reverse="true" />
+      decoration-2(reverse)
+    </border-box-6>
+
+    <border-box-6 class="decoration-container">
+      <decoration-3 class="decoration d3 center" />
+      decoration-3
+    </border-box-6>
+
+    <border-box-6 class="decoration-container">
+      <decoration-4 class="decoration d4 center" />
+      decoration-4
+    </border-box-6>
+
+    <border-box-6 class="decoration-container">
+      <decoration-4 class="decoration d4r center" :reverse="true" />
+      decoration-4(reverse)
+    </border-box-6>
+
+    <border-box-6 class="decoration-container">
+      <loading class="decoration center" />
+      loading
+    </border-box-6>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DecorationDemo'
+}
+</script>
+
+<style lang="less">
+#decoration-demo {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .decoration-container {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    margin: 0 20px;
+    margin-bottom: 20px;
+    text-align: center;
+    font-weight: bold;
+    line-height: 40px;
+  }
+
+  .decoration {
+    position: absolute;
+    transform: translate(-50%, -50%);
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+  }
+
+  .d1 {
+    width: 200px;
+  }
+
+  .d2 {
+    width: 300px;
+  }
+
+  .d2r {
+    height: 300px;
+  }
+
+  .d3 {
+    width: 200px;
+  }
+
+  .d4 {
+    height: 300px;
+  }
+
+  .d4r {
+    width: 300px;
+  }
+}
+</style>