From 71b1532d5a3609f3125e15fbe65e4b34bb6c4e8b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 29 八月 2023 15:36:41 +0800
Subject: [PATCH] 数据风险模型模块修改
---
src/sfc/LineChart.vue | 216 +++++++++++++++++++++++++++++------------------------
1 files changed, 117 insertions(+), 99 deletions(-)
diff --git a/src/sfc/LineChart.vue b/src/sfc/LineChart.vue
index 21be7dc..38fd58f 100644
--- a/src/sfc/LineChart.vue
+++ b/src/sfc/LineChart.vue
@@ -2,108 +2,126 @@
瀛愮粍浠舵湁鍩烘湰鐨勬牱寮�
浣跨敤鍚屼竴涓浘褰㈠疄渚嬶紝鎺ュ彈鐖剁粍浠朵紶鍏ョ殑鎶樼嚎鍥緊ption
-->
- <template>
- <div ref="chart" class="line-chart"></div>
+<template>
+ <div ref="chart" class="line-chart"></div>
</template>
-
+
<script>
- import * as echarts from 'echarts';
-
- export default {
- props: {
- chartData: {
- type: Object,
- required: true,
- }
- },
- data() {
- return {
- chart: null
- };
- },
- mounted() {
- this.renderChart();
- // this.chart.setOption(this.chartData)
- window.addEventListener('resize',this.resizeChart)
- },
- watch: {
- chartData() {
- // option鍙樺寲鏃讹紝鍥惧舰鍐嶆鍒濆鍖�
- // this.renderChart();
- this.chart.dispose();
- this.renderChart();
- this.chart.setOption(this.chartData)
- }
-
- },
- beforeUnmount() {
- if (this.chart) {
- this.chart.dispose();
- }
- },
- methods: {
- renderChart() {
- // 鍒涘缓echarts瀹炰緥
- this.chart = echarts.init(this.$refs.chart);
-
- // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
- const option = {
- title: {
- // text: '寮傛鏁版嵁鍔犺浇绀轰緥'
- },
- tooltip: {},
-
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
-
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- name: '鏃堕棿',
- data: []
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- },
- name: '鐧惧垎姣�'
- },
- series: [
- {
- name: 'fume',
- type: 'line',
- data: []
- }
- ]
+import * as _echarts from 'echarts';
+
+export default {
+ props: {
+ chartData: {
+ type: Object,
+ required: true,
+ default: () => {
+ return {
+ x: [],
+ y: []
};
-
- // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
- this.chart.setOption(option, true);
- },
-
- // 璺熼〉闈㈠搷搴斿紡鍙樺寲
- resizeChart(){
- this.chart.resize()
}
+ },
+ title: {
+ type: String
+ },
+ xName: {
+ type: String,
+ default: '鏃堕棿'
+ },
+ yName: {
+ type: String,
+ default: '鐧惧垎姣�'
+ },
+ seriesName: {
+ type: String,
+ default: '绯诲垪涓�'
}
- };
- </script>
-
- <style>
- .line-chart {
- width: 100%;
- height: 500px;
- margin-top: 25px;
+ },
+ data() {
+ return {
+ chart: null
+ };
+ },
+ mounted() {
+ this.intiChart();
+ // this.chart.setOption(this.chartData)
+ window.addEventListener('resize', this.resizeChart);
+ },
+ watch: {
+ chartData() {
+ // option鍙樺寲鏃讹紝鍥惧舰鍐嶆鍒濆鍖�
+ this.setOption();
+ }
+ },
+ beforeUnmount() {
+ if (this.chart) {
+ this.chart.dispose();
+ }
+ },
+ methods: {
+ intiChart() {
+ // 鍒涘缓echarts瀹炰緥
+ this.chart = _echarts.init(this.$refs.chart);
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
+ // this.chart.setOption(option, true);
+ },
+
+ setOption() {
+ // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ const option = {
+ title: {
+ text: this.title
+ },
+ tooltip: {},
+
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
+ },
+
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ name: this.xName,
+ data: this.chartData.x
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto'
+ },
+ name: this.yName
+ },
+ series: [
+ {
+ name: this.seriesName,
+ type: 'line',
+ data: this.chartData.y
+ }
+ ]
+ };
+ this.chart.setOption(option);
+ },
+
+ // 璺熼〉闈㈠搷搴斿紡鍙樺寲
+ resizeChart() {
+ this.chart.resize();
+ }
}
-
- </style>
-
\ No newline at end of file
+};
+</script>
+
+<style>
+.line-chart {
+ width: 100%;
+ height: 500px;
+ margin-top: 25px;
+}
+</style>
--
Gitblit v1.9.3