From 21f677b844fff9d7849ff79dc8a01b73898d376f Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期三, 22 十一月 2023 17:09:51 +0800
Subject: [PATCH] 主数据统计分析-折线图

---
 Source/UBCS-WEB/package.json                                     |    4 +
 Source/UBCS-WEB/src/views/statistic/statisticPage.vue            |   23 +++++++
 Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue |  103 ++++++++++++++++++++++++++++++++++
 Source/UBCS-WEB/src/main.js                                      |    2 
 4 files changed, 132 insertions(+), 0 deletions(-)

diff --git a/Source/UBCS-WEB/package.json b/Source/UBCS-WEB/package.json
index 8553d6c..3d5663c 100644
--- a/Source/UBCS-WEB/package.json
+++ b/Source/UBCS-WEB/package.json
@@ -16,6 +16,7 @@
     "babel-polyfill": "^6.26.0",
     "classlist-polyfill": "^1.2.0",
     "crypto-js": "^4.1.1",
+    "echarts": "4.9.0",
     "element-ui": "^2.15.6",
     "instead": "^1.0.3",
     "js-base64": "^2.5.1",
@@ -27,10 +28,12 @@
     "node-gyp": "^4.0.0",
     "nprogress": "^0.2.0",
     "portfinder": "^1.0.23",
+    "save": "^2.9.0",
     "script-loader": "^0.7.2",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.2",
     "vue-clipboard2": "^0.3.3",
+    "vue-echarts": "5.0.0-beta.0",
     "vue-flowchart-editor": "^1.0.2",
     "vue-i18n": "^8.7.0",
     "vue-router": "^3.0.1",
@@ -40,6 +43,7 @@
     "@vue/cli-plugin-babel": "^3.1.1",
     "@vue/cli-plugin-eslint": "^3.1.5",
     "@vue/cli-service": "^3.1.4",
+    "@vue/composition-api": "^1.7.2",
     "chai": "^4.1.2",
     "node-sass": "^6.0.1",
     "sass-loader": "^10.0.5",
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
new file mode 100644
index 0000000..6ea8c1d
--- /dev/null
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
@@ -0,0 +1,103 @@
+<template>
+  <div id="main">
+    <basic-container>
+      <v-chart :options="option" ref="chart" style="width: 100%;height:100vh"></v-chart>
+    </basic-container>
+  </div>
+</template>
+
+<script>
+import 'echarts'
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+export default {
+  name: "statisticPage",
+  data() {
+    return {
+      option: {
+        color: ['red','black'],
+        legend: {
+          data: ['鍥句緥1', '鍥句緥2', '鍥句緥3'],
+        },
+        dataset: [
+          {
+            id: 'dataset_raw',
+            source: [
+              { month: 1, total: 1000, newly: 800 },
+              { month: 2, total: 5000, newly: 1000 },
+              { month: 3, total: 1800, newly: 1400 },
+              { month: 4, total: 1500, newly: 1200 },
+              { month: 5, total: 1000, newly: 1200 },
+              { month: 6, total: 1500, newly: 1200 },
+              { month: 7, total: 1500, newly: 1200 },
+              { month: 8, total: 1500, newly: 1000 },
+              { month: 9, total: 1500, newly: 1200 },
+              { month: 10, total: 1500, newly: 1200 },
+              { month: 11, total: 1500, newly: 1200 },
+              { month: 12, total: 1500, newly: 1200 },
+            ],
+          },
+        ],
+        title: {
+          text: '涓婚搴撴暟鎹粺璁″垎鏋�',
+          left:'center',
+          textAlign:'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          nameLocation: 'middle',
+          name:'month',
+          // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] // 鏈堜唤鏁版嵁
+        },
+        yAxis: {
+          name: 'Number',
+          type: 'value',
+        },
+        series: [
+          {
+            type: 'line',
+            datasetId: 'dataset_raw',
+            showSymbol: false,
+            encode: {
+              x: 'month',
+              y: 'total',
+              itemName: 'month',
+              tooltip: ['total'],
+            },
+          },
+          {
+            type: 'line',
+            datasetId: 'dataset_raw',
+            showSymbol: false,
+            encode: {
+              x: 'month',
+              y: 'newly',
+              itemName: 'month',
+              tooltip: ['newly'],
+            },
+          },
+        ],
+      }
+    };
+  },
+  mounted() {
+    import('echarts').then((echarts) => {
+      // console.log(echarts)
+      this.$nextTick(() => {
+        const chartDom = this.$refs.chart.$el;
+        const myChart = echarts.init(chartDom);
+        myChart.setOption(this.option);
+      });
+    });
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/Source/UBCS-WEB/src/main.js b/Source/UBCS-WEB/src/main.js
index b4c69fe..da4a596 100644
--- a/Source/UBCS-WEB/src/main.js
+++ b/Source/UBCS-WEB/src/main.js
@@ -24,6 +24,8 @@
 import website from '@/config/website';
 import crudCommon from '@/mixins/crud';
 import Divider from './components/Divider';
+import ECharts from 'vue-echarts'
+Vue.component('v-chart', ECharts)
 // 涓氬姟缁勪欢
 import tenantPackage from './views/system/tenantpackage';
 import enupackage from "@/views/modeling/enupackage";
diff --git a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
new file mode 100644
index 0000000..8707be1
--- /dev/null
+++ b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
@@ -0,0 +1,23 @@
+<template>
+<lineChart></lineChart>
+</template>
+
+<script>
+import lineChart from "../../components/StatisticsComponent/lineChart"
+
+export default {
+  components: {
+    lineChart
+  },
+  name: "statisticPage",
+  data(){
+    return{
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

--
Gitblit v1.9.3