From c4d687aacfb4e7b6ee5ce67df93cf2f8d8df80c1 Mon Sep 17 00:00:00 2001 From: xiejun <xj@2023> Date: 星期日, 26 十一月 2023 14:05:48 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue | 98 ++++++++++++++++++++++++++++++------------------- 1 files changed, 60 insertions(+), 38 deletions(-) diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue index d51df80..7c180bc 100644 --- a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue +++ b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue @@ -9,70 +9,92 @@ <script> import 'echarts' import 'echarts/lib/chart/line' -import 'echarts/lib/chart/pie' -import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' export default { 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", + textStyle: { + fontSize: 14 // 璋冩暣瀛椾綋澶у皬 + } + }, + 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 { chartOptions: { - color:['#2eadd6 ','#FFA500 '], + color: ['#2eadd6', '#FFA500'], title: { - text: '鐗╁搧涓绘暟鎹粺璁�' + text: '' }, tooltip: { trigger: 'axis' }, legend: { - data: ['鎬婚噺', '鏂板'] + data: ['鎬婚噺', '鏂板'], + textStyle: { + fontSize: 14 // 璋冩暣瀛椾綋澶у皬 + } }, xAxis: { - boundaryGap: true, // 鎺у埗鍧愭爣杞翠袱渚х暀鐧� + boundaryGap: true, type: 'category', - 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: { - type: 'value' + type: 'value', }, - series: [ - { - name: '鎬婚噺', - type: 'line', - smooth: true, - stack: 'Total', - label: { - show: true, - position: 'top' - }, - data: [5000, 2000, 3600, 1000, 1000, 2000, 500, 2000, 500, 2000, 500, 2000] - }, - { - name: '鏂板', - type: 'line', - smooth: true, - stack: 'Total', - label: { - show: true, - position: 'top' - }, - data: [1510, 1010, 2610, 2010, 3010, 1010, 1510, 3010, 1010, 1510, 3010, 2000] - } - ] - }, + series: [] + } }; }, - mounted() { - }, -} + created() { + } +}; </script> <style lang="scss" scoped> #chart { - width: 1280px; + width: 100%; + height: 400px; } - </style> -- Gitblit v1.9.3