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