mini chart 完善

src/components/chart/MiniArea.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniArea',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .mini-chart {
+    position: relative;
+    width: 100%
+  }
+  .mini-chart .chart-content{
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+  }
+</style>

src/components/chart/MiniBar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-bar position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniBar',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+</style>

src/components/chart/MiniChart.vue

@@ -1,51 +0,0 @@
-<template>
-  <div>
-    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
-      <v-tooltip />
-      <v-axis />
-      <v-smooth-area position="time*value" />
-    </v-chart>
-  </div>
-</template>
-
-<script>
-import 'viser-vue'
-
-const data = [
-  { time: 0, value: 23620 },
-  { time: 2, value: 16100 },
-  { time: 4, value: 15900 },
-  { time: 6, value: 17409 },
-  { time: 8, value: 17000 },
-  { time: 10, value: 31056 },
-  { time: 12, value: 31982 },
-  { time: 14, value: 32040 },
-  { time: 16, value: 33233 },
-  { time: 18, value: 33233 },
-  { time: 20, value: 33233 },
-  { time: 22, value: 33233 }
-]
-
-const scale = [{
-  dataKey: 'value',
-  min: 10000
-}, {
-  dataKey: 'year',
-  min: 0,
-  max: 1
-}]
-export default {
-  name: 'MiniChart',
-  data () {
-    return {
-      data,
-      scale,
-      height: 400
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/chart/MiniProgress.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="mini-progress">
+    <a-tooltip :title="'目标值：' + target + '%'">
+      <div class="target" :style="{left: target + '%'}">
+        <span :style="{backgroundColor: color}" />
+        <span :style="{backgroundColor: color}" />
+      </div>
+    </a-tooltip>
+    <div class="wrap">
+      <div class="progress" :style="{backgroundColor: color, width: percent + '%', height: height}" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
+export default {
+  name: 'MiniProgress',
+  components: {ATooltip},
+  props: ['target', 'color', 'percent', 'height']
+}
+</script>
+
+<style lang="less"  scoped>
+  .mini-progress {
+    padding: 5px 0;
+    position: relative;
+    width: 100%;
+    .wrap {
+      background-color: #f5f5f5;
+      position: relative;
+    }
+    .progress {
+      transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+      border-radius: 1px 0 0 1px;
+      background-color: #13C2C2;
+      width: 0;
+      height: 100%;
+    }
+    .target {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      span {
+        border-radius: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 4px;
+        width: 2px;
+      }
+      span:last-child {
+        top: auto;
+        bottom: 0;
+      }
+    }
+  }
+</style>

src/components/chart/index.less

@@ -0,0 +1,9 @@
+.mini-chart{
+  position: relative;
+  width: 100%;
+  .chart-content{
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+  }
+}