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