feature：代码初始化。

src/views/components/chart/drawAnnular.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="echarts-wraper">
+    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const drawChart = (value) => {
+      const myChart = echarts.init(proxy.$refs.echarts)
+      const option = {
+        legend: {
+          show: true,
+          bottom: -5,
+          left: 'center',
+          type: 'scroll',
+          icon: 'circle'
+        },
+        grid: {
+          left: 30,
+          right: 60,
+          top: 50,
+          bottom: 40,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'item',
+          axisPointer: { type: 'shadow' },
+          formatter: function (params) {
+            return params.marker + params.data.name + '：' + params.data.percent
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            data: value,
+            label: {
+              formatter: function (params) {
+                return params.data.name + ' ' + params.data.percent
+              }
+            }
+          }
+        ]
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    return { drawChart }
+  }
+}
+</script>

src/views/components/chart/drawBar.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="echarts-wraper">
+    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const drawChart = (value) => {
+      const myChart = echarts.init(proxy.$refs.echarts)
+      const option = {
+        legend: {
+          show: true,
+          top: 20,
+          left: 'center'
+        },
+        grid: {
+          left: 30,
+          right: 30,
+          top: 50,
+          bottom: 10,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' }
+        },
+        xAxis: {
+          axisTick: { show: false },
+          data: value.xAxis
+        },
+        yAxis: {
+          name: value.unit,
+          minInterval: 1,
+          nameTextStyle: { color: '#707070', fontSize: 14 },
+          splitLine: { show: false },
+          axisLabel: {
+            formatter: '{value}'
+          }
+        },
+        series: value.series
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    return { drawChart }
+  }
+}
+</script>

src/views/components/chart/drawLine.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="echarts-wraper">
+    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const drawChart = (value) => {
+      const myChart = echarts.init(proxy.$refs.echarts)
+      const option = {
+        legend: {
+          show: true,
+          top: 20,
+          left: 'center'
+        },
+        grid: {
+          left: 30,
+          right: 30,
+          top: 50,
+          bottom: 10,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' }
+        },
+        xAxis: {
+          axisTick: { show: false },
+          data: value.xAxis
+        },
+        yAxis: {
+          minInterval: 1,
+          nameTextStyle: { color: '#707070', fontSize: 14 },
+          splitLine: { show: false },
+          axisLabel: {
+            formatter: '{value}'
+          }
+        },
+        series: value.series
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    return { drawChart }
+  }
+}
+</script>

src/views/components/chart/drawPie.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="echarts-wraper">
+    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const drawChart = (value) => {
+      const myChart = echarts.init(proxy.$refs.echarts)
+      const option = {
+        legend: {
+          show: true,
+          bottom: -5,
+          left: 'center',
+          type: 'scroll',
+          icon: 'circle'
+        },
+        grid: {
+          left: 30,
+          right: 60,
+          top: 50,
+          bottom: 40,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'item',
+          axisPointer: { type: 'shadow' },
+          formatter: function (params) {
+            return params.marker + params.data.name + '：' + params.data.percent
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            data: value,
+            label: {
+              formatter: function (params) {
+                return params.data.name + ' ' + params.data.percent
+              }
+            }
+          }
+        ]
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    return { drawChart }
+  }
+}
+</script>

src/views/components/chart/drawSortBar.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="echarts-wraper">
+    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const drawChart = (value) => {
+      const myChart = echarts.init(proxy.$refs.echarts)
+      const option = {
+        legend: {
+          show: true,
+          bottom: -5,
+          left: 'center'
+        },
+        grid: {
+          left: 30,
+          right: 30,
+          top: 30,
+          bottom: 10,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          formatter: function (params) {
+            return params[0].name + '</br>' + params[0].marker + '  ' + params[0].data
+          }
+        },
+        xAxis: {
+          type: 'value',
+          minInterval: 1,
+          axisTick: { show: false },
+          axisLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          minInterval: 1,
+          nameTextStyle: { color: '#707070', fontSize: 14 },
+          splitLine: { show: false },
+          axisLabel: {
+            formatter: '{value}'
+          },
+          data: value.xData.reverse()
+        },
+        series: {
+          type: 'bar',
+          data: value.yData.reverse()
+        }
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    return { drawChart }
+  }
+}
+</script>

src/views/components/chart/drawSortBar1.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="echarts-wraper">
+    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const drawChart = (value) => {
+      const myChart = echarts.init(proxy.$refs.echarts)
+      const option = {
+        legend: {
+          show: true,
+          bottom: -5,
+          left: 'center'
+        },
+        grid: {
+          left: 30,
+          right: 30,
+          top: 30,
+          bottom: 10,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          formatter: function (params) {
+            return params[0].name + '</br>' + params[0].marker + '  ' + params[0].data
+          }
+        },
+        xAxis: {
+          type: 'category',
+          minInterval: 1,
+          axisTick: { show: false },
+          axisLine: {
+            show: true
+          },
+          data: value.xData
+        },
+        yAxis: {
+          type: 'value',
+          minInterval: 1,
+          nameTextStyle: { color: '#707070', fontSize: 14 },
+          splitLine: { show: false },
+          axisLabel: {
+            formatter: '{value}'
+          }
+        },
+        series: {
+          type: 'bar',
+          data: value.yData
+        }
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    return { drawChart }
+  }
+}
+</script>

src/views/components/chart/drawSortBar2.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="echarts-wraper">
+    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const drawChart = (value) => {
+      const myChart = echarts.init(proxy.$refs.echarts)
+      const option = {
+        legend: {
+          show: true,
+          bottom: -5,
+          left: 'center'
+        },
+        grid: {
+          left: 30,
+          right: 30,
+          top: 30,
+          bottom: 10,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          formatter: function (params) {
+            return params[0].name + '</br>' + params[0].marker + '  ' + params[0].data
+          }
+        },
+        xAxis: {
+          type: 'value',
+          minInterval: 1,
+          name: '%',
+          axisTick: { show: false },
+          axisLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          minInterval: 1,
+          nameTextStyle: { color: '#707070', fontSize: 14 },
+          splitLine: { show: false },
+          axisLabel: {
+            formatter: '{value}'
+          },
+          data: value.xData.reverse()
+        },
+        series: {
+          type: 'bar',
+          data: value.yData.reverse()
+        }
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    return { drawChart }
+  }
+}
+</script>

src/views/components/map/latLngSelect.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-dialog v-model="dialogShow" @close="cancel" title="经纬度选择" append-to-body>
+    <div>当前经纬度：{{ lngLat }}</div>
+    <div class="map" id="container"></div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { Scene, RasterLayer, Marker, MarkerLayer, Scale, Zoom } from '@antv/l7'
+import { Map } from '@antv/l7-maps'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  dialogVisible: {
+    type: Boolean,
+    default: false
+  },
+  lonLat: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:dialogVisible', 'updateLngLat', 'closeDialog'])
+const dialogShow = computed({
+  get: () => props.dialogVisible,
+  set: (val) => {
+    emit('update:dialogVisible', val)
+  }
+})
+
+watch(dialogShow, (val) => {
+  if (val) {
+    lngLat.value = props.lonLat
+    nextTick(() => {
+      initMap()
+    })
+  }
+})
+
+const scene = ref(null)
+const markerLayer = ref(null)
+const lngLat = ref('')
+
+const initMap = () => {
+  scene.value = new Scene({
+    id: 'container',
+    logoVisible: false,
+    map: new Map({
+      zoom: 13,
+      minZoom: 4,
+      maxZoom: 18,
+      pitch: 0,
+      center: lngLat.value ? lngLat.value.split(',') : ['120.43325056066504', '36.183868828044005'],
+      logoVisible: false
+    })
+  })
+
+  const layer = new RasterLayer({ zIndex: 1, name: 'baseLayer' })
+  const annotionLayer = new RasterLayer({
+    zIndex: 2,
+    name: 'annotionLayer'
+  })
+
+  layer.source('https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=85c9d12d5d691d168ba5cb6ecaa749eb', {
+    parser: {
+      type: 'rasterTile',
+      tileSize: 256,
+      format: async (data) => {
+        console.log(data)
+      }
+    }
+  })
+  annotionLayer.source('https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=85c9d12d5d691d168ba5cb6ecaa749eb', {
+    parser: {
+      type: 'rasterTile',
+      tileSize: 256
+    }
+  })
+
+  scene.value.on('loaded', () => {
+    scene.value.addLayer(layer)
+    scene.value.addLayer(annotionLayer)
+
+    const scale = new Scale({
+      zoomInTitle: '放大',
+      zoomOutTitle: '缩小'
+    })
+    scene.value.addControl(scale)
+
+    const zoom = new Zoom({
+      zoomInTitle: '放大',
+      zoomOutTitle: '缩小'
+    })
+    scene.value.addControl(zoom)
+    if (lngLat.value) {
+      createMarkerLayer(lngLat.value.split(','))
+    }
+  })
+
+  scene.value.on('click', (ev) => {
+    console.log('markerLayer.value', markerLayer.value)
+    if (markerLayer.value) {
+      scene.value.removeMarkerLayer(markerLayer.value)
+    }
+    createMarkerLayer([ev.lngLat.lng, ev.lngLat.lat])
+    lngLat.value = `${ev.lngLat.lng},${ev.lngLat.lat}`
+  })
+}
+
+const createMarkerLayer = (lngLatArr) => {
+  const marker = new Marker().setLnglat(lngLatArr)
+  markerLayer.value = new MarkerLayer({ zIndex: 100 })
+  markerLayer.value.addMarker(marker)
+  scene.value.addMarkerLayer(markerLayer.value)
+}
+
+const submitForm = () => {
+  if (!lngLat.value) {
+    ElMessage({ type: 'warning', message: '您没有选择位置' })
+  } else {
+    emit('updateLngLat', lngLat.value)
+  }
+  cancel()
+}
+
+const cancel = () => {
+  markerLayer.value && scene.value.removeMarkerLayer(markerLayer.value)
+  emit('closeDialog')
+}
+</script>
+
+<style>
+.map {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/views/components/timeSelect.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { getTime } from '@/utils/utils.js'
+const data = reactive({
+  selectTime: {}
+})
+const { selectTime } = toRefs(data)
+const props = defineProps(['arr', 'getData'])
+
+let select = ref(null)
+// 初始化 执行一次
+onMounted(() => {
+  props.arr.map((item) => {
+    if (item.select) {
+      select = item.value
+    }
+  })
+  selectTime.value = getTime(select)
+  props.getData(selectTime.value)
+})
+// 点击执行
+const selectClick = (item) => {
+  if (select === item.value) return
+  select = item.value
+  props.arr.map((ele) => {
+    if (item.value === ele.value) {
+      ele.select = true
+    } else {
+      ele.select = false
+    }
+  })
+  selectTime.value = getTime(select)
+  props.getData(selectTime.value)
+}
+</script>
+
+<template>
+  <div class="select-box">
+    <div v-for="(item, index) in props.arr" :key="index" :class="item.select ? 'active' : ''" class="select-item" @click="selectClick(item)">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.select-box {
+  min-width: 2rem;
+  height: 0.32rem;
+  position: absolute;
+  top: -0.02rem;
+  right: 0.06rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 100;
+  .select-item {
+    min-width: 0.6rem;
+    height: 0.28rem;
+    color: black;
+    font-size: 0.14rem;
+    line-height: 0.26rem;
+    text-align: center;
+    border: 1px solid rgb(220, 223, 230);
+    background-color: white;
+    cursor: pointer;
+  }
+  .active {
+    color: #fff;
+    border-width: 1px;
+    background-color: rgb(64, 158, 255);
+    border: 1px solid rgb(64, 158, 255);
+    cursor: pointer;
+  }
+}
+</style>