报表新增

src/views/report/yearData/lineChart.vue

@@ -0,0 +1,162 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zhp
+ * @LastEditTime: 2024-04-12 16:50:42
+ * @Description:
+-->
+<template>
+  <div>
+    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
+    <div :id="id" :class="className" :style="{  height: '400px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+// import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  // mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    legendPosition: {
+      type: String,
+      default: 'center'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.initChart()
+    // })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      console.log(1111)
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        title: {
+          text: '',
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['Rainfall', 'Evaporation']
+        },
+        // toolbox: {
+        //   show: true,
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            // prettier-ignore
+            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        grid: {
+          top: '100px',
+          left: "3%",
+          right: "10%",
+          bottom: "3%",
+          containLabel: true
+        },
+        series: [
+          {
+            name: 'Rainfall',
+            type: 'bar',
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ],
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          },
+          {
+            name: 'Evaporation',
+            type: 'bar',
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+            markPoint: {
+              data: [
+                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart {
+  margin-top: -3em
+}
+</style>