chart图表修改

src/views/sampleDatabase/performance/scatter-line-chart.vue

@@ -1,170 +1,177 @@
 <template>
-	<div class="chart" :id="id"></div>
+  <div class="chart" :id="id"></div>
 </template>
 
 <script>
-	import util from "@/helper/util.js";
-	import partten from "@/helper/partten.js";
-	import * as echarts from "echarts";
-	import ecStat from 'echarts-stat';
-	export default {
-		components: {
-			ecStat
-		},
-		props: {
-			width: {
-				type: String,
-				default: "100%",
-			},
-			height: {
-				type: String,
-				default: "350px",
-			},
-			// 传入数据
-			data: {
-				type: Array,
-				default: () => [
-					[96.24, 11.35],
-					[33.09, 85.11],
-					[57.6, 36.61],
-					[36.77, 27.26],
-					[20.1, 6.72],
-					[45.53, 36.37],
-					[110.07, 80.13],
-					[72.05, 20.88],
-					[39.82, 37.15],
-					[48.05, 70.5],
-					[0.85, 2.57],
-					[51.66, 63.7],
-					[61.07, 127.13],
-					[64.54, 33.59],
-					[35.5, 25.01],
-					[226.55, 664.02],
-					[188.6, 175.31],
-					[81.31, 108.68]
-				],
-			},
-			dotName: {
-				type: String,
-				default: "",
-			},
-		},
-		data() {
-			return {
-				id: "",
-				chart: null,
-				color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"]
-			};
-		},
-		methods: {
-			resize() {},
-			initChart() {
-				const chart = echarts.init(this.$el);
-				echarts.registerTransform(ecStat.transform.regression);
-				let option = {
-					dataset: [{
-							source: this.data
-						},
-						{
-							transform: {
-								type: 'ecStat:regression',
-								config: {
-									method: 'polynomial',
-									order: 3
-								}
-							}
-						}
-					],
-					tooltip: {
-						trigger: "item",
-						showDelay: 0,
-						backgroundColor: "rgba(0,0,0,0.4)",
-						borderColor: partten.getColor("gray"),
-						textStyle: {
-						  fontSize: util.vh(16),
-						  color: "#fff",
-						},
-					},
-					xAxis: {
-						splitLine: {
-							lineStyle: {
-								color: partten.getColor("gray") + 55,
-								type: 'dashed'
-							}
-						},
-						splitNumber: 20
-					},
-					yAxis: {
-						min: -10,
-						splitLine: {
-							lineStyle: {
-								color: partten.getColor("gray") + 55,
-								type: 'dashed'
-							}
-						}
-					},
-					series: [{
-							name: this.dotName,
-							type: 'scatter'
-						},
-						{
-							type: 'line',
-							smooth: true,
-							datasetIndex: 1,
-							symbolSize: 0.1,
-							symbol: 'circle',
-							lineStyle: {
-								normal: {
-									color: '#05bb4c',
-									width: 2,
-								},
-			 			},
-							labelLayout: {
-								dx: -20
-							},
-							encode: {
-								label: 2,
-								tooltip: 1
-							}
-						}
-						
-					]
-				};
-				chart.clear();
-				chart.setOption(option);
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+import ecStat from "echarts-stat";
+export default {
+  components: {
+    ecStat,
+  },
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    // 传入数据
+    data: {
+      type: Array,
+      default: () => [
+        [96.24, 11.35],
+        [33.09, 85.11],
+        [57.6, 36.61],
+        [36.77, 27.26],
+        [20.1, 6.72],
+        [45.53, 36.37],
+        [110.07, 80.13],
+        [72.05, 20.88],
+        [39.82, 37.15],
+        [48.05, 70.5],
+        [0.85, 2.57],
+        [51.66, 63.7],
+        [61.07, 127.13],
+        [64.54, 33.59],
+        [35.5, 25.01],
+        [226.55, 664.02],
+        [188.6, 175.31],
+        [81.31, 108.68],
+      ],
+    },
+    dotName: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
+    };
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      const chart = echarts.init(this.$el);
+      echarts.registerTransform(ecStat.transform.regression);
+      let option = {
+        dataset: [
+          {
+            source: this.data,
+          },
+          {
+            transform: {
+              type: "ecStat:regression",
+              config: {
+                method: "polynomial",
+                order: 3,
+              },
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+          showDelay: 0,
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            fontSize: util.vh(16),
+            color: "#fff",
+          },
+        },
+        xAxis: {
+          name: "风速(m/s)",
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray") + 55,
+              type: "dashed",
+            },
+          },
+          splitNumber: 20,
+        },
+        yAxis: {
+          min: -10,
+          name: "功率(kWh)",
+          axisTick: {
+            show: false,
+            length: 1,
+          },
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray") + 55,
+              type: "dashed",
+            },
+          },
+        },
+        series: [
+          {
+            name: this.dotName,
+            type: "scatter",
+          },
+          {
+            type: "line",
+            smooth: true,
+            datasetIndex: 1,
+            symbolSize: 0.1,
+            symbol: "circle",
+            lineStyle: {
+              normal: {
+                color: "#05bb4c",
+                width: 2,
+              },
+            },
+            labelLayout: {
+              dx: -20,
+            },
+            encode: {
+              label: 2,
+              tooltip: 1,
+            },
+          },
+        ],
+      };
+      chart.clear();
+      chart.setOption(option);
 
-				this.resize = function() {
-					chart.resize();
-				};
+      this.resize = function () {
+        chart.resize();
+      };
 
-				window.addEventListener("resize", this.resize);
-			},
-		},
-		created() {
-			this.id = "pie-chart-" + util.newGUID();
-		},
-		mounted() {
-			this.$nextTick(() => {
-				this.$el.style.width = this.width;
-				this.$el.style.height = this.height;
-				this.initChart();
-			});
-		},
-		updated() {
-			this.$nextTick(() => {
-				this.initChart();
-			});
-		},
-		unmounted() {
-			window.removeEventListener("resize", this.resize);
-		},
-	};
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
 </script>
 
 <style lang="less">
-	.chart {
-		width: 100%;
-		height: 100%;
-		display: inline-block;
-	}
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
 </style>