vue2-client 1.22.2 → 1.22.4

package/src/components/chart/Radar.vue

@@ -1,80 +1,80 @@
-<template>
-  <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
-    <v-tooltip />
-    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
-    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
-    <v-legend dataKey="user" marker="circle" :offset="30" />
-    <v-coord type="polar" radius="0.8" />
-    <v-line position="item*score" color="user" :size="2" />
-    <v-point position="item*score" color="user" :size="4" shape="circle" />
-  </v-chart>
-</template>
-
-<script>
-const DataSet = require('@antv/data-set')
-
-const sourceData = [
-  { item: '引用', a: 70, b: 30, c: 40 },
-  { item: '口碑', a: 60, b: 70, c: 40 },
-  { item: '产量', a: 50, b: 60, c: 40 },
-  { item: '贡献', a: 40, b: 50, c: 40 },
-  { item: '热度', a: 60, b: 70, c: 40 },
-  { item: '引用', a: 70, b: 50, c: 40 }
-]
-
-const dv = new DataSet.View().source(sourceData)
-dv.transform({
-  type: 'fold',
-  fields: ['a', 'b', 'c'],
-  key: 'user',
-  value: 'score'
-})
-
-const scale = [{
-  dataKey: 'score',
-  min: 0,
-  max: 80
-}]
-
-const data = dv.rows
-
-const axis1Opts = {
-  dataKey: 'item',
-  line: null,
-  tickLine: null,
-  grid: {
-    lineStyle: {
-      lineDash: null
-    },
-    hideFirstLine: false
-  }
-}
-const axis2Opts = {
-  dataKey: 'score',
-  line: null,
-  tickLine: null,
-  grid: {
-    type: 'polygon',
-    lineStyle: {
-      lineDash: null
-    }
-  }
-}
-
-export default {
-  name: 'Radar',
-  data () {
-    return {
-      sourceData,
-      data,
-      axis1Opts,
-      axis2Opts,
-      scale
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+    <v-tooltip />
+    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
+    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
+    <v-legend dataKey="user" marker="circle" :offset="30" />
+    <v-coord type="polar" radius="0.8" />
+    <v-line position="item*score" color="user" :size="2" />
+    <v-point position="item*score" color="user" :size="4" shape="circle" />
+  </v-chart>
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: '引用', a: 70, b: 30, c: 40 },
+  { item: '口碑', a: 60, b: 70, c: 40 },
+  { item: '产量', a: 50, b: 60, c: 40 },
+  { item: '贡献', a: 40, b: 50, c: 40 },
+  { item: '热度', a: 60, b: 70, c: 40 },
+  { item: '引用', a: 70, b: 50, c: 40 }
+]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'fold',
+  fields: ['a', 'b', 'c'],
+  key: 'user',
+  value: 'score'
+})
+
+const scale = [{
+  dataKey: 'score',
+  min: 0,
+  max: 80
+}]
+
+const data = dv.rows
+
+const axis1Opts = {
+  dataKey: 'item',
+  line: null,
+  tickLine: null,
+  grid: {
+    lineStyle: {
+      lineDash: null
+    },
+    hideFirstLine: false
+  }
+}
+const axis2Opts = {
+  dataKey: 'score',
+  line: null,
+  tickLine: null,
+  grid: {
+    type: 'polygon',
+    lineStyle: {
+      lineDash: null
+    }
+  }
+}
+
+export default {
+  name: 'Radar',
+  data () {
+    return {
+      sourceData,
+      data,
+      axis1Opts,
+      axis2Opts,
+      scale
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/chart/RankingList.vue

@@ -1,60 +1,60 @@
-<template>
-  <div class="rank">
-    <h4 class="title">{{ title }}</h4>
-    <ul class="list">
-      <li :key="index" v-for="(item, index) in list">
-        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
-        <span >{{ item.name }}</span>
-        <span >{{ item.total }}</span>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RankingList',
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['title', 'list']
-}
-</script>
-
-<style lang="less" scoped>
-  .rank{
-    padding: 0 32px 32px 72px;
-    .title{
-    }
-    .list{
-      margin: 25px 0 0;
-      padding: 0;
-      list-style: none;
-      li {
-        margin-top: 16px;
-        span {
-          color: @text-color-second;
-          font-size: 14px;
-          line-height: 22px;
-        }
-        span:first-child {
-          background-color: @layout-bg-color;
-          border-radius: 20px;
-          display: inline-block;
-          font-size: 12px;
-          font-weight: 600;
-          margin-right: 24px;
-          height: 20px;
-          line-height: 20px;
-          width: 20px;
-          text-align: center;
-        }
-        span.active {
-          background-color: #314659 !important;
-          color: @text-color-inverse !important;
-        }
-        span:last-child {
-          float: right;
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <div class="rank">
+    <h4 class="title">{{ title }}</h4>
+    <ul class="list">
+      <li :key="index" v-for="(item, index) in list">
+        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+        <span >{{ item.name }}</span>
+        <span >{{ item.total }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankingList',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title', 'list']
+}
+</script>
+
+<style lang="less" scoped>
+  .rank{
+    padding: 0 32px 32px 72px;
+    .title{
+    }
+    .list{
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+      li {
+        margin-top: 16px;
+        span {
+          color: @text-color-second;
+          font-size: 14px;
+          line-height: 22px;
+        }
+        span:first-child {
+          background-color: @layout-bg-color;
+          border-radius: 20px;
+          display: inline-block;
+          font-size: 12px;
+          font-weight: 600;
+          margin-right: 24px;
+          height: 20px;
+          line-height: 20px;
+          width: 20px;
+          text-align: center;
+        }
+        span.active {
+          background-color: #314659 !important;
+          color: @text-color-inverse !important;
+        }
+        span:last-child {
+          float: right;
+        }
+      }
+    }
+  }
+</style>

package/src/components/chart/Trend.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="chart-trend">
-    {{ term }}
-    <span>{{ rate }}%</span>
-    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Trend',
-  props: {
-    term: {
-      type: String,
-      required: true
-    },
-    target: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    value: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    isIncrease: {
-      type: Boolean,
-      required: false,
-      default: null
-    },
-    percent: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    scale: {
-      type: Number,
-      required: false,
-      default: 2
-    }
-  },
-  data () {
-    return {
-      trend: this.isIncrease ? 'up' : 'down',
-      rate: this.percent
-    }
-  },
-  created () {
-    this.trend = this.caulateTrend()
-    this.rate = this.caulateRate()
-  },
-  methods: {
-    caulateRate () {
-      return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
-    },
-    caulateTrend () {
-      const isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
-      return isIncrease ? 'up' : 'down'
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .chart-trend{
-    display: inline-block;
-    font-size: 14px;
-    .chart-trend-icon{
-      font-size: 12px;
-      &.up{
-        color: @red-6;
-      }
-      &.down{
-        color: @green-6;
-      }
-    }
-  }
-</style>
+<template>
+  <div class="chart-trend">
+    {{ term }}
+    <span>{{ rate }}%</span>
+    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    term: {
+      type: String,
+      required: true
+    },
+    target: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    isIncrease: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    percent: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      trend: this.isIncrease ? 'up' : 'down',
+      rate: this.percent
+    }
+  },
+  created () {
+    this.trend = this.caulateTrend()
+    this.rate = this.caulateRate()
+  },
+  methods: {
+    caulateRate () {
+      return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
+    },
+    caulateTrend () {
+      const isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
+      return isIncrease ? 'up' : 'down'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-trend{
+    display: inline-block;
+    font-size: 14px;
+    .chart-trend-icon{
+      font-size: 12px;
+      &.up{
+        color: @red-6;
+      }
+      &.down{
+        color: @green-6;
+      }
+    }
+  }
+</style>

package/src/components/chart/index.less

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