From 726df452c8749f9f208f67ede9864f223d44ff49 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期五, 24 十一月 2023 17:43:56 +0800
Subject: [PATCH] 统计图表假数据测试
---
Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue | 143 ++++++++++++++++++++++-------------------------
1 files changed, 67 insertions(+), 76 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
index 4427fb6..fcc9ab9 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
@@ -1,103 +1,94 @@
<template>
<div id="main">
<basic-container>
- <v-chart :options="option" ref="chart" style="width: 100%;"></v-chart>
+ <v-chart id="chart" :auto-resize="true" :options="chartOptions"></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';
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/legend'
+
export default {
- name: "statisticPage",
+ name: "lineChart",
+ props: {
+ lineData: {
+ type: Array,
+ default: []
+ },
+ chartName: {
+ type: String,
+ default: ""
+ }
+ },
+ watch: {
+ lineData: {
+ immediate: true,
+ handler(newval, oldval) {
+ if (newval) {
+ const series = newval.map((data, index) => ({
+ name: index === 0 ? "鎬婚噺" : "鏂板",
+ type: "line",
+ smooth: true,
+ stack: "Total",
+ label: {
+ show: true,
+ position: "top"
+ },
+ data: data.map(value => ({value}))
+ }));
+
+ this.chartOptions.series = series;
+ }
+ }
+ },
+ chartName:{
+ handler(newval,oldval){
+ if(newval){
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate:true,
+ deep:true
+ }
+ },
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 },
- ],
- },
- ],
+ chartOptions: {
+ color: ['#2eadd6', '#FFA500'],
title: {
- text: '涓绘暟鎹粺璁″垎鏋�',
- left:'center',
- textAlign:'center'
+ text: ''
},
tooltip: {
- trigger: 'axis',
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鎬婚噺', '鏂板']
},
xAxis: {
+ boundaryGap: true,
type: 'category',
- nameLocation: 'middle',
- name:'month',
- // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] // 鏈堜唤鏁版嵁
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
},
yAxis: {
- name: 'Number',
- type: 'value',
+ 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'],
- },
- },
- ],
+ series: []
}
};
},
- 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);
- });
- });
- },
-}
+ created() {
+ }
+};
</script>
-<style scoped>
-
+<style lang="scss" scoped>
+#chart {
+ width: 100%;
+ height: 400px;
+}
</style>
--
Gitblit v1.9.3