feat: page1图表

src/assets/styles/common.scss

@@ -11,9 +11,9 @@
   display: block;
   cursor: default;
   z-index: 0;
-  left: 0; 
-  top: 0; 
-  width: 100%; 
+  left: 0;
+  top: 0;
+  width: 100%;
   height: 100%;
 }
 
@@ -30,7 +30,7 @@
 }
 .sn-container {
   position: absolute;
-  width: 500px; 
+  width: 500px;
   height: 550px;
   border: 2px solid rgba(92,255,255,0.1);
   background: rgba(10,106,255,0.1) url(../../assets/img/wg.png) repeat 50% 50% !important;
@@ -84,7 +84,9 @@
         margin-top: -7px;
         width: 14px;
         height: 14px;
-        background: url(../../assets/img/sn-title.png) no-repeat 0% 0%;
+        background: url(../../assets/img/icon_logo.png) no-repeat;
+        background-size:100% 100%;
+        background-attachment:fixed;
       }
     }
     &:before {
@@ -106,9 +108,9 @@
       left: 0;
       right: 0;
       bottom: 0;
-      
+
     }
-    
+
   }
 }
 

src/components/Customize/HorizontalHistogram.vue

@@ -0,0 +1,295 @@
+<!-- 横向柱状图 -->
+<template>
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+      <div class="sn-title title">
+        <div class="titleZn">{{ title }}</div>
+        <div class="titleEn">{{ titleEn }}</div>
+      </div>
+      <div class="sn-body">
+        <div class="wrap-container">
+          <div class="chartsdom" id="Horizontal"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+  props: {
+    barWidth: {
+      type: Number,
+    },
+    area: {
+      type: Array,
+    },
+    dataArray: {
+      type: Object,
+    },
+    title: {
+      type: String,
+      default: ``,
+    },
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
+    },
+    unit: {
+      type: String,
+    },
+  },
+  mounted() {
+    this.getEchart()
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(`Horizontal`))
+      // 定义颜色数组
+      const colorList = `#111`
+      const colorListA = [`#40F8FF`, `#FFf`]
+      const data = {
+        label: this.area,
+        value: this.dataArray.Done,
+        value2: this.dataArray.Percentage,
+      }
+      this.option = {
+        tooltip: {
+          trigger: `axis`,
+          backgroundColor: `rgba(21, 154, 255, 0.32)`,
+          textStyle: {
+            color: `#fff`,
+          },
+          borderColor: `#159AFF`,
+          axisPointer: {
+            lineStyle: {
+              color: `transparent`,
+            },
+          },
+        },
+        grid: {
+          containLabel: true,
+          bottom: 20,
+          left: 30,
+          top: 20,
+          right: 30,
+        },
+        xAxis: {
+          type: `value`,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            type: `category`,
+            data: data.label,
+            inverse: true,
+            axisLabel: {
+              margin: 10, // 刻度标签与轴线之间的距离
+              formatter: function (value) {
+                let k = data.label.indexOf(value)
+                //  let index = k < 9 ? "0" + (k + 1) : k + 1;
+                let index = k < 9 ? k + 1 : k + 1
+                return `{a|${value}}`
+              },
+              rich: {
+                b: {
+                  // borderColor: "#fff",
+                  // borderWidth: 1,
+                  padding: [3, 1, 0, 1],
+                  color: `#fff`,
+                  fontSize: `80%`,
+                },
+                a: {
+                  fontSize: `80%`,
+                  color: `#D0DEEE`,
+                  padding: [4, 0, 0, 8],
+                },
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            type: `category`,
+            data: data.label,
+            inverse: true,
+            axisLabel: {
+              margin: 15,
+              formatter: function (value) {
+                let k = data.label.indexOf(value)
+                let index = k
+                return `{a|${data.value[index]}}`
+              },
+              rich: {
+                a: {
+                  fontSize: `90%`,
+                  color: `#fff`,
+                  padding: [4, 0, 0, 0],
+                  fontFamily: `DOUYU`,
+                },
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            type: `category`,
+            data: data.label,
+            inverse: true,
+            axisLabel: {
+              margin: 2,
+              formatter: function (value) {
+                let k = data.label.indexOf(value)
+                let index = k
+                return `{a|${data.value2[index]} %}`
+              },
+              rich: {
+                a: {
+                  fontSize: `90%`,
+                  color: `#fff`,
+                  padding: [4, 0, 0, 60],
+                  fontFamily: `DOUYU`,
+                },
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            data: data.value,
+            type: `bar`,
+            barWidth: 10, // 柱子宽度
+            MaxSize: 0,
+            showBackground: true,
+            barBorderRadius: [30, 0, 0, 30],
+            backgroundStyle: {
+              color: `rgba(9, 68, 131, .2)`,
+            },
+            label: {
+              show: false,
+              offset: [60, -17],
+              color: `#fff`,
+              fontWeight: 500,
+              position: `left`,
+              align: `left`,
+              fontSize: `80%`,
+              formatter: function (params) {
+                console.log(params)
+                return params.data.name
+              },
+            },
+            itemStyle: {
+              // barBorderRadius: [3, 0, 0, 3],
+              color: (params) => {
+                return {
+                  type: `linear`,
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: colorListA[params.dataIndex <= 2 ? 0 : `1`],
+                    },
+                    {
+                      offset: 1,
+                      color: colorList,
+                    },
+                  ],
+                }
+              },
+            },
+          },
+          {
+            name: `外圆`,
+            type: `scatter`,
+            emphasis: {
+              scale: false,
+            },
+            tooltip: {
+              show: false,
+            },
+            symbol: `rect`,
+            symbolSize: [3, 8], // 进度条白点
+            itemStyle: {
+              barBorderRadius: [30, 0, 0, 30],
+              color: `#FFF`,
+              shadowColor: `rgba(255, 255, 255, 0.5)`,
+              shadowBlur: 5,
+              borderWidth: 1,
+              opacity: 1,
+            },
+            z: 2,
+            data: data.value,
+            animationDelay: 500,
+          },
+        ],
+      }
+      myChart.setOption(this.option, true)
+    },
+  },
+  beforeDestroy() {},
+}
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  width: 526px;
+  height: 300px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    .titleEn {
+      width: 120px;
+      font-size: 8px;
+      text-align: right;
+      word-break: break-all;
+    }
+  }
+  .chartsdom {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/Customize/cylindricalHistogram.vue

@@ -1,221 +1,256 @@
 <!-- 圆柱柱状图 -->
- <template>
-
+<template>
   <div class="wrap-container sn-container">
     <div class="sn-content">
-      <!-- <div class="sn-title"></div> -->
+      <div class="sn-title title">
+        <div class="titleZn">{{ title }}</div>
+        <div class="titleEn">{{ titleEn }}</div>
+      </div>
       <div class="sn-body">
         <div class="wrap-container">
-          <div class="chartsdom" id="cylindrical" >
-         </div>
+          <div class="chartsdom" id="cylindrical"></div>
         </div>
       </div>
     </div>
   </div>
- </template>
-
- <script>
+</template>
 
- export default {
+<script>
+export default {
   data() {
     return {
-      option: null
-
+      option: null,
+      information: {},
     }
   },
-  mounted() {
-    this.getEchart();
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById('cylindrical'));
-      let information = {
-  barWidth: 40,
-  colorArray: {
-    lineColor: 'rgba(199,214,242, 0.2)',
-    labelColor: ' #c7d6f2'
-  },
-  area: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-  dataArray: [210, 200, 255, 320, 200, 255, 210]
-};
-this.option = {
-  // animation: false, //去除加载时缓动动画
-  backgroundColor: '#021032',
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(9,40,84,0.8)',
-    borderColor: 'rgba(9,40,84,0.8)',
-    textStyle: {
-      fontSize: 20,
-      color: '#fff'
+  props: {
+    barWidth: {
+      type: Number,
     },
-    axisPointer: {
-      type: 'shadow'
+    area: {
+      type: Array,
     },
-    formatter:
-      "{b}<br/>{a}&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-weight:bold'>{c}</span>"
-  },
-  xAxis: {
-    axisLine: {
-      lineStyle: {
-        color: information.colorArray.lineColor
-      }
+    dataArray: {
+      type: Array,
     },
-    axisTick: {
-      show: false
+    title: {
+      type: String,
+      default: ``,
     },
-    axisLabel: {
-      color: information.colorArray.labelColor,
-      fontSize: 20,
-      margin: 30
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
     },
-    splitLine: {
-      show: true,
-      interval: information.area.length,
-      lineStyle: {
-        color: information.colorArray.lineColor,
-        width: 1
-      }
+    unit: {
+      type: String,
     },
-    data: information.area
   },
-  grid: {
-    left: '6%',
-    right: '6%',
-    bottom: '8%',
-    top: '24%',
-    containLabel: true
+  mounted() {
+    this.getEchart()
   },
-  yAxis: {
-    type: 'value',
-    axisTick: {
-      show: false
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: information.colorArray.lineColor,
-        width: 2
-      }
-    },
-    axisLabel: {
-      margin: 20,
-      color: information.colorArray.labelColor,
-      fontSize: 20,
-      fontWeight: 400
-    },
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: information.colorArray.lineColor,
-        width: 2
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(`cylindrical`))
+      this.information = {
+        barWidth: 10,
+        colorArray: {
+          lineColor: `rgba(199,214,242, 0.2)`,
+          labelColor: ` #c7d6f2`,
+        },
+        unit: `公斤/产量`,
+        area: this.area,
+        dataArray: this.dataArray,
       }
-    }
-  },
-  series: [
-    {
-      name: '报修数量',
-      tooltip: {
-        show: true
-      },
-      type: 'bar',
-      barWidth: information.barWidth, //柱子宽度
-      label: {
-        show: true,
-        position: 'top',
-        padding: 10,
-        fontSize: 20,
-        color: '#00ffff',
-        fontWeight: 'bold'
-      },
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: 'rgba(54,131,241, 0.8)'
+      this.option = {
+        // animation: false, //去除加载时缓动动画
+        tooltip: {
+          trigger: `axis`,
+          backgroundColor: `rgba(9,40,84,0.8)`,
+          borderColor: `rgba(9,40,84,0.8)`,
+          textStyle: {
+            fontSize: 20,
+            color: `#fff`,
           },
+          axisPointer: {
+            type: `shadow`,
+          },
+          formatter: `{b}<br/>{a}&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-weight:bold'>{c}</span>`,
+        },
+        xAxis: {
+          axisLine: {
+            lineStyle: {
+              color: this.information.colorArray.lineColor,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: this.information.colorArray.labelColor,
+            fontSize: 12,
+            margin: 15,
+            interval: 0,
+          },
+          splitLine: {
+            show: true,
+            interval: this.information.area.length,
+            lineStyle: {
+              color: this.information.colorArray.lineColor,
+              width: 1,
+            },
+          },
+          data: this.information.area,
+        },
+        grid: {
+          left: `6%`,
+          right: `6%`,
+          bottom: `8%`,
+          top: `24%`,
+          containLabel: true,
+        },
+        yAxis: [
           {
-            offset: 1,
-            color: 'rgba(5,47,121, 0.8)'
-          }
-        ])
-      },
-      data: information.dataArray,
-      legendHoverLink: false
-    },
-    {
-      // 柱子底部椭圆
-      name: '报修数量',
-      tooltip: {
-        show: false
-      },
-      type: 'pictorialBar',
-      itemStyle: {
-        //未填充部分鼠标移上去颜色
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: '#0642a2'
+            type: `value`,
+            name: this.information.unit,
+            nameTextStyle: {
+              color: `#65ABE7`,
+              fontSize: 12,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: this.information.colorArray.lineColor,
+                width: 2,
+              },
+            },
+            axisLabel: {
+              margin: 20,
+              color: this.information.colorArray.labelColor,
+              fontSize: 12,
+              fontWeight: 4,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: this.information.colorArray.lineColor,
+                width: 2,
+              },
+            },
           },
+        ],
+        series: [
           {
-            offset: 1,
-            color: '#073d97'
-          }
-        ])
-      },
-      symbolRotate: 0,
-      symbolSize: [information.barWidth, 20],
-      symbolOffset: [0, 10],
-      symbolPosition: 'start',
-      data: information.dataArray,
-      z: 3
-    },
-    {
-      // 柱子头部椭圆
-      name: '报修数量',
-      tooltip: {
-        show: false
-      },
-      type: 'pictorialBar',
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            name: this.information.unit,
+            tooltip: {
+              show: true,
+            },
+            type: `bar`,
+            barWidth: this.information.barWidth, // 柱子宽度
+            label: {
+              show: false,
+              position: `top`,
+              padding: 10,
+              fontSize: 20,
+              color: `#00ffff`,
+              fontWeight: `bold`,
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#47FEED`,
+                },
+                {
+                  offset: 1,
+                  color: `#0E7E7D`,
+                },
+              ]),
+            },
+            data: this.information.dataArray,
+            legendHoverLink: false,
+          },
           {
-            offset: 0,
-            color: '#75aefd'
+            // 柱子底部椭圆
+            name: `报修数量`,
+            tooltip: {
+              show: false,
+            },
+            type: `pictorialBar`,
+            itemStyle: {
+              // 未填充部分鼠标移上去颜色
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#1ABFC0`,
+                },
+                {
+                  offset: 1,
+                  color: `#1ABFC0`,
+                },
+              ]),
+            },
+            symbolRotate: 0,
+            symbolSize: [this.information.barWidth, 5],
+            symbolOffset: [0, 3],
+            symbolPosition: `start`,
+            data: this.information.dataArray,
+            z: 3,
           },
           {
-            offset: 1,
-            color: '#74aefc'
-          }
-        ])
-      },
-      symbolRotate: 0,
-      symbolSize: [information.barWidth, 20],
-      symbolOffset: [0, -10],
-      symbolPosition: 'end',
-      data: information.dataArray,
-      z: 3
-    }
-  ]
-};
-
- myChart.setOption(this.option,true);
-
-    }
+            // 柱子头部椭圆
+            name: `报修数量`,
+            tooltip: {
+              show: false,
+            },
+            type: `pictorialBar`,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#1ABFC0`,
+                },
+                {
+                  offset: 1,
+                  color: `#1ABFC0`,
+                },
+              ]),
+            },
+            symbolRotate: 0,
+            symbolSize: [this.information.barWidth, 5],
+            symbolOffset: [0, -3],
+            symbolPosition: `end`,
+            data: this.information.dataArray,
+            z: 3,
+          },
+        ],
+      }
+      myChart.setOption(this.option, true)
+    },
   },
-  beforeDestroy() {
-
-  }
-};
- </script>
+  beforeDestroy() {},
+}
+</script>
 
- <style lang="scss" scoped>
+<style lang="scss" scoped>
 .sn-container {
-  width: 486px;
+  width: 526px;
   height: 300px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    .titleEn {
+      width: 120px;
+      font-size: 8px;
+      text-align: right;
+      word-break: break-all;
+    }
+  }
   .chartsdom {
     width: 100%;
     height: 100%;
   }
 }
- </style>
+</style>

src/components/Customize/wavyLineChart.vue

@@ -0,0 +1,233 @@
+<!-- 面积图 -->
+<template>
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+      <div class="sn-title title">
+        <div class="titleZn">{{ title }}</div>
+        <div class="titleEn">{{ titleEn }}</div>
+      </div>
+      <div class="sn-body">
+        <div class="wrap-container">
+          <div class="chartsdom" :id="id"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      default: ``,
+    },
+    smooth: {
+      type: String,
+      default: ``,
+    },
+    barWidth: {
+      type: Number,
+    },
+    area: {
+      type: Array,
+    },
+    dataArray: {
+      type: Object,
+    },
+    title: {
+      type: String,
+      default: ``,
+    },
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
+    },
+  },
+  mounted() {
+    this.getEchart()
+    console.log(this.smooth, `丝滑过渡`)
+    console.log(this.id, `标题`)
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(this.id))
+      this.option = {
+        color: [
+          `#23CF9C`,
+          `#578FFB`,
+          `#6E40F2`,
+          `#FF61E6`,
+          `#8B5CFF`,
+          `#00CA69`,
+        ],
+        legend: {
+          top: `0`,
+          textStyle: {
+            color: `#fff`,
+          },
+        },
+        tooltip: {
+          trigger: `axis`,
+          backgroundColor: `rgba(9,40,84,0.8)`,
+          borderColor: `rgba(9,40,84,0.8)`,
+          textStyle: {
+            fontSize: 20,
+            color: `#fff`,
+          },
+          axisPointer: {
+            type: `shadow`,
+          },
+        },
+        grid: {
+          top: `20%`,
+          left: `4%`,
+          right: `4%`,
+          bottom: `10%`,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: `category`,
+            boundaryGap: true,
+            axisLabel: {
+              formatter: `{value}`,
+              textStyle: {
+                color: `#c7d6f2`,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: `#D9D9D9`,
+              },
+            },
+            data: this.area,
+          },
+        ],
+        yAxis: [
+          {
+            type: `value`,
+            name: `平方米/面积`,
+            axisLabel: {
+              textStyle: {
+                color: `#65ABE7`,
+              },
+            },
+            nameTextStyle: {
+              color: `#65ABE7`,
+              fontSize: 12,
+              lineHeight: 40,
+            },
+            splitLine: {
+              lineStyle: {
+                type: `dashed`,
+                color: `#182D46`,
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: `今年`,
+            type: `line`,
+            smooth: this.smooth == `true` ? true : false,
+            symbol: `none`,
+            symbolSize: 0,
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: `#23CF9C30`,
+                    },
+                    {
+                      offset: 1,
+                      color: `#23CF9C10`,
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: `#23CF9C10`,
+                shadowBlur: 10,
+              },
+            },
+            data: this.dataArray.thisYear,
+          },
+          {
+            name: `去年`,
+            type: `line`,
+            smooth: this.smooth,
+            symbol: `none`,
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: `#578FFB30`,
+                    },
+                    {
+                      offset: 1,
+                      color: `#578FFB10`,
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: `#578FFB10`,
+                shadowBlur: 10,
+              },
+            },
+            data: this.dataArray.LastYear,
+          },
+        ],
+      }
+
+      myChart.setOption(this.option, true)
+    },
+  },
+  beforeDestroy() {},
+}
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  right: 100px;
+  width: 526px;
+  height: 300px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    .titleEn {
+      width: 120px;
+      font-size: 8px;
+      text-align: right;
+      word-break: break-all;
+    }
+  }
+  .chartsdom {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/Customize/weatherForecast.vue

@@ -0,0 +1,192 @@
+<!-- 温度折线图 -->
+<template>
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+      <div class="sn-title title">
+        <div class="titleZn">{{ title }}</div>
+        <div class="titleEn">{{ titleEn }}</div>
+      </div>
+      <div class="sn-body">
+        <div class="wrap-container">
+          <div class="chartsdom" id="weather"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+  props: {
+    barWidth: {
+      type: Number,
+    },
+    area: {
+      type: Array,
+    },
+    dataArray: {
+      type: Array,
+    },
+    title: {
+      type: String,
+      default: ``,
+    },
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
+    },
+    unit: {
+      type: String,
+    },
+    alertValue: {
+      type: Number,
+      default: 100,
+    },
+  },
+  mounted() {
+    this.getEchart()
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(`weather`))
+      let visualMap = []
+      let upColor = [`red`] // 超出标准线折线图的颜色
+      let lineColor = [`#17E2CD`] // 折线图颜色
+      lineColor.map((item, index) => {
+        visualMap.push({
+          type: `piecewise`,
+          show: false,
+          dimension: 1,
+          seriesIndex: index,
+          pieces: [
+            {
+              gt: this.alertValue,
+              color: upColor[index], // 超过部分的颜色
+            },
+            {
+              lt: 0,
+              color: lineColor[index], // 未超出标准线颜色
+            },
+          ],
+          outOfRange: {
+            // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
+            color: lineColor[index],
+          },
+        })
+      })
+      this.option = {
+        // 悬浮框
+        tooltip: {
+          trigger: `axis`,
+          axisPointer: {
+            type: `shadow`,
+          },
+          backgroundColor: `rgba(9,40,84,0.8)`,
+          borderColor: `rgba(9,40,84,0.8)`,
+          textStyle: {
+            fontSize: 20,
+            color: `#fff`,
+          },
+        },
+        // 图例
+        legend: {
+          data: [`CO`, `Co2`],
+        },
+        grid: {
+          left: 50,
+          right: 20,
+          top: 40,
+          bottom: 20,
+        },
+        // x轴
+        xAxis: {
+          type: `category`,
+          axisLabel: {
+            formatter: `{value}`,
+            color: `#c7d6f2`,
+            fontSize: `12px`,
+            fontFamily: `Microsoft YaHei`,
+          },
+          boundaryGap: false,
+          data: this.area,
+          axisTick: {
+            show: false,
+          },
+        },
+        // y轴
+        yAxis: {
+          type: `value`,
+          name: `摄氏度`,
+          axisLabel: {
+            textStyle: {
+              color: `#65ABE7`,
+            },
+          },
+          nameTextStyle: {
+            color: `#65ABE7`,
+            fontSize: 12,
+            lineHeight: 20,
+          },
+        },
+        // 超出标准线颜色
+        visualMap: visualMap,
+        color: lineColor,
+        // 数据
+        series: [
+          {
+            // name: 'CO',
+            data: this.dataArray,
+            connectNulls: true,
+            type: `line`,
+            // smooth: true,
+            symbolSize: 0,
+            // 标记线
+            markLine: {
+              symbol: `none`,
+              silent: true,
+              lineStyle: {
+                color: `red`,
+              },
+              data: [
+                {
+                  yAxis: this.alertValue,
+                },
+              ],
+            },
+          },
+        ],
+      }
+
+      myChart.setOption(this.option, true)
+    },
+  },
+  beforeDestroy() {},
+}
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  width: 526px;
+  height: 300px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    .titleEn {
+      width: 120px;
+      font-size: 8px;
+      text-align: right;
+      word-break: break-all;
+    }
+  }
+  .chartsdom {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/page1/index.vue

@@ -2,33 +2,145 @@
   <div class="home-container">
     <div class="wrap" ref="editor">
       <div class="top"></div>
-      <div class="box">
-
-        <cylindricalHistogram></cylindricalHistogram>
-      </div>
+      <cylindricalHistogram
+        style="left: 50px; top: 425px"
+        v-if="isGetData"
+        title="各区域移栽产量分析"
+        titleEn="Tongren Tobacco Planting Digital Management Platform"
+        :area="Transplantarea"
+        :dataArray="TransplantdataArray"
+      ></cylindricalHistogram>
+      <weatherForecast
+        style="left: 50px; top: 750px"
+        v-if="isWeather"
+        title="天气预报"
+        titleEn="Tongren Tobacco Planting Digital Management Platform"
+        :area="Weatherarea"
+        :dataArray="WeatherdataArray"
+        :alertValue="30"
+      >
+      </weatherForecast>
+      <wavyLineChart
+        id="`wavyLineChart`"
+        style="left: 1350px; top: 105px"
+        v-if="isWavyLine"
+        title="各区域移栽面积"
+        :area="wavyLineArea"
+        :dataArray="wavyLinedataArray"
+        smooth="true"
+      >
+      </wavyLineChart>
+      <HorizontalHistogram
+        style="left: 1350px; top: 425px"
+        v-if="isHorizontal"
+        title="移栽情况分析"
+        :area="HorizontalArea"
+        :dataArray="HorizontalArray"
+      ></HorizontalHistogram>
+      <wavyLineChart
+        id="`移栽趋势分析`"
+        style="left: 1350px; top: 750px"
+        v-if="isWavyLine"
+        title="移栽趋势分析"
+        :area="wavyLineArea"
+        :dataArray="wavyLinedataArray"
+      >
+      </wavyLineChart>
     </div>
   </div>
 </template>
 
 <script>
-import { screenSize } from "@/assets/js/utils";
-import cylindricalHistogram from "@/components/Customize/cylindricalHistogram"
+import { screenSize } from '@/assets/js/utils'
+import cylindricalHistogram from '@/components/Customize/cylindricalHistogram'
+import weatherForecast from '@/components/Customize/weatherForecast'
+import wavyLineChart from '@/components/Customize/wavyLineChart'
+import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
 export default {
-  name: "Home",
+  name: `Home`,
   components: {
-    cylindricalHistogram
+    cylindricalHistogram,
+    weatherForecast,
+    wavyLineChart,
+    HorizontalHistogram,
   },
   data() {
-    return {}
+    return {
+      TransplantdataArray: [],
+      Transplantarea: [],
+      Weatherarea: [],
+      WeatherdataArray: [],
+      wavyLineArea: [],
+      wavyLinedataArray: {
+        LastYear: [],
+        thisYear: [],
+      },
+      HorizontalArea: [],
+      HorizontalArray: {
+        Done: [],
+        Percentage: [],
+      },
+      isGetData: false,
+      isWeather: false,
+      isWavyLine: false,
+      isHorizontal: false,
+    }
   },
   computed: {},
   created() {
+    this.getAnalysisOfTransplantYieldInVariousRegions()
+    this.getWeatherForecast()
+    this.getTransplantAreaInEachRegion()
+    this.getAnalysisOfTransplantingSituation()
     this.$http.get(`https://httpbin.org/get`)
   },
+
   mounted() {
     screenSize(this.$refs.editor)
   },
-  methods: {},
+  methods: {
+    getAnalysisOfTransplantYieldInVariousRegions() {
+      this.$http
+        .get(`/api/analysisOfTransplantYieldInVariousRegions`)
+        .then((res) => {
+          res.forEach((element) => {
+            this.Transplantarea.push(element.名称.slice(0, 2))
+            this.TransplantdataArray.push(element.值)
+          })
+          this.isGetData = true
+        })
+    },
+    getWeatherForecast() {
+      this.$http.get(`/api/weatherForecast`).then((res) => {
+        res.forEach((element) => {
+          this.Weatherarea.push(element.时间)
+          this.WeatherdataArray.push(element.温度)
+        })
+        this.isWeather = true
+      })
+    },
+    getTransplantAreaInEachRegion() {
+      this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
+        res.forEach((element) => {
+          this.wavyLineArea.push(element.名称.slice(0, 2))
+          this.wavyLinedataArray.LastYear.push(element.去年)
+          this.wavyLinedataArray.thisYear.push(element.今年)
+        })
+        this.isWavyLine = true
+      })
+    },
+    getAnalysisOfTransplantingSituation() {
+      this.$http.get(`/api/analysisOfTransplantingSituation`).then((res) => {
+        const date = res.sort((a, b) => b.已移载 - a.已移载)
+        date.forEach((element) => {
+          this.HorizontalArea.push(element.名称.slice(0, 2))
+          this.HorizontalArray.Done.push(element.已移载)
+          this.HorizontalArray.Percentage.push(element.比率.toFixed(0))
+        })
+        this.isHorizontal = true
+      })
+    },
+  },
 }
 </script>
 
@@ -62,12 +174,6 @@ export default {
       border: none;
       overflow: hidden;
     }
-    .box {
-      color: #fff;
-      line-height: 100vh;
-      text-align: center;
-      font-size: 40px;
-    }
   }
 }
 </style>