文件名修改

sub-government-screen-service/src/views/plant/components/insectPestsCharts.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="insect-pests-charts">
+    <custom-echart-mixin :chart-data="handelData" :option="chartsData.option" height="100%" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+let itemStyle = reactive({
+  itemStyle: { borderRadius: [8, 8, 0, 0] },
+});
+
+let legendList = reactive(['蝗虫', '飞蛾', '其他', '蚜虫']);
+const chartsData = reactive({
+  option: {
+    color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      show: true,
+      data: legendList,
+      left: '0', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    barStyle: {
+      barWidth: 10,
+    },
+    dataZoom: [
+      {
+        type: 'slider', // 滑动条型数据区域缩放组件
+        startValue: 0, // 数据窗口起始值的索引
+        endValue: 2, // 数据窗口结束值的索引
+      },
+      {
+        type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
+        startValue: 0,
+        endValue: 2,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: ' ',
+        axisLabel: {
+          formatter: '{value}',
+        },
+        splitLine: {
+          show: true, // 显示分割线
+          lineStyle: {
+            type: 'dashed', // 设置为虚线
+            width: 0.5, // 分割线宽度
+          },
+        },
+
+        itemStyle: { fontSize: 8 },
+      },
+    ],
+    grid: {
+      x: '10%',
+      x2: '15%',
+      y: '20%',
+      y2: '20%',
+    },
+  },
+  valData: [
+    { name: '1月', value: 40, type: '蝗虫', seriesType: 'bar', ...itemStyle },
+    { name: '1月', value: 30, type: '飞蛾', seriesType: 'bar', ...itemStyle },
+    { name: '1月', value: 100, type: '其他', seriesType: 'bar', ...itemStyle },
+    { name: '1月', value: 60, type: '蚜虫', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 20, type: '蝗虫', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 20, type: '飞蛾', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 80, type: '其他', seriesType: 'bar', ...itemStyle },
+    { name: '2月', value: 40, type: '蚜虫', seriesType: 'bar', ...itemStyle },
+  ],
+});
+
+const randomVal = (num) => {
+  let list = [];
+  for (let i = 0; i < legendList.length; i++) {
+    let addNum = [10, 8, 2, 5];
+    let val = {
+      name: num + '月',
+      value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
+      seriesType: 'bar',
+      type: legendList[i],
+      ...itemStyle,
+    };
+    list[i] = val;
+  }
+  return list;
+};
+let handelData = computed(() => {
+  let list = [];
+  let maxMouth = 12;
+  for (let i = 0; i < maxMouth; i++) {
+    let val = randomVal(i + 1);
+    list = [...list, ...val];
+  }
+
+  list.map((m) => {
+    return { ...m, value: Number(m.value + Math.random() + 10).toFixed(2) };
+  });
+  // console.info('handelData', list);
+  return list;
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.insect-pests-charts {
+  height: 100%;
+}
+</style>

sub-government-screen-service/src/views/plant/index.vue

@@ -14,7 +14,7 @@
             <div class="left-charts-item">
               <customBack top-title="昆虫害监测" :top-postion="'left'">
                 <template #back>
-                  <!-- <insectPestsCharts></insectPestsCharts> -->
+                  <insectPestsCharts></insectPestsCharts>
                 </template>
               </customBack>
             </div>
@@ -87,7 +87,7 @@
 </template>
 <script setup>
 import plantTypeCharts from './components/plantTypeCharts.vue';
-// import insectPestsCharts from './components/insectPestsCharts.vue';
+import insectPestsCharts from './components/insectPestsCharts.vue';
 import pathologyCharts from './components/pathologyCharts.vue';
 import waterfertilizerCharts from './components/waterfertilizerCharts.vue';
 import irrigationCharts from './components/irrigationCharts.vue';