ADD file via upload

2 years ago · 9f42a44d75
parent 7a0d879c8d
commit 9f42a44d75
1 changed files with 81 additions and 0 deletions
--- a/vueblog/src/components/DataCharts.vue
+++ b/vueblog/src/components/DataCharts.vue
@ -0,0 +1,81 @@
+<template>
+  <div
+    style="display: flex;height: 500px;width: 100%;align-items: center;justify-content: center;">
+    <chart ref="dschart" :options="polar" style="margin-top: 20px"></chart>
+  </div>
+</template>
+
+<style>
+</style>
+<script>
+  import ECharts from 'vue-echarts/components/ECharts.vue'
+  import 'echarts/lib/chart/line'
+  import 'echarts/lib/component/tooltip'
+
+  import 'echarts/lib/component/polar'
+
+  import 'echarts/lib/component/legend'
+  import 'echarts/lib/component/title'
+  import 'echarts/theme/dark'
+  import 'echarts/lib/chart/bar'
+
+  import {getRequest} from '../utils/api'
+  export default{
+    components: {
+      'chart': ECharts
+    },
+    mounted: function () {
+      var _this = this;
+      getRequest("/article/dataStatistics").then(resp=> {
+        if (resp.status == 200) {
+          _this.$refs.dschart.options.xAxis.data = resp.data.categories;
+          _this.$refs.dschart.options.series[0].data = resp.data.ds;
+        } else {
+          _this.$message({type: 'error', message: '数据加载失败!'});
+        }
+      }, resp=> {
+        _this.$message({type: 'error', message: '数据加载失败!'});
+      });
+    },
+    methods: {},
+    data: function () {
+      return {
+        polar: {
+          title: {
+            text: ''
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              dataZoom: {
+                yAxisIndex: 'none'
+              },
+              dataView: {
+                readOnly: false
+              },
+              magicType: {
+                type: ['line', 'bar']
+              },
+              restore: {},
+              saveAsImage: {}
+            }
+          },
+          tooltip: {},
+          legend: {
+            data: ['pv']
+          },
+          xAxis: {
+            data: []
+          },
+          yAxis: {},
+          series: [{
+            name: 'pv',
+            type: 'line',
+            data: []
+          }],
+          animationDuration: 3000
+        }
+      }
+    }
+  }
+</script>