添加

src/components/echarts/MyEchart.vue

@@ -0,0 +1,88 @@
+<template>
+    <div ref="chartRef" class="my-chart" />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import echarts from './echarts'
+import 'echarts/lib/component/dataZoom'
+
+const props = defineProps(['options'])
+const chartRef = ref<HTMLDivElement>()
+let chart: echarts.ECharts | null = null
+const resizeHandler = () => {
+    chart?.resize()
+}
+const initChart = () => {
+    chart = echarts.init(chartRef.value as HTMLDivElement)
+    chart.setOption({
+        tooltip: {
+            showContent: true,
+            trigger: 'axis',
+            backgroundColor: 'rgba(8,36,68,.7)',
+            axisPointer: {
+                // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            },
+            color: '#ffff',
+            textStyle: {
+                color: '#ffff'
+            }
+        },
+        grid: {
+            top: '30px',
+            left: '40px',
+            right: '40px',
+            bottom: '40px',
+
+            containLabel: true
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100
+            }
+        ],
+        color: [
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
+        ...props.options
+    })
+}
+onMounted(() => {
+    setTimeout(() => {
+        initChart()
+    }, 20)
+    window.addEventListener('resize', resizeHandler)
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeHandler)
+    chart?.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.my-chart {
+    height: 100%;
+    width: 100%;
+}
+</style>

src/components/echarts/MyEchartMap.vue

@@ -0,0 +1,217 @@
+<!-- 地图组件 -->
+<template>
+  <div class="bars_w" :id="id"></div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, defineEmits } from 'vue'
+import * as echarts from 'echarts'
+// import cqMap from '../../views/ECharts/zg.json'
+import 'echarts/map/js/china.js'
+import axios from 'axios'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  datas: {
+    type: Array,
+    required: true
+  }
+  // cqMap: {
+  //   // type: String,
+  //   // required: true
+  // }
+})
+const myCharts = ref()
+const emit = defineEmits(['getRegionByRegionId'])
+
+onMounted(() => {
+  GetEchar()
+})
+const convertData = function (data) {
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var geoCoord = geoCoordMap[data[i].name]
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value)
+      })
+    }
+  }
+  return res
+}
+
+const GetEchar = () => { 
+  nextTick(() => {
+    let chartDom = document.getElementById(props.id)
+    myCharts.value = echarts.init(chartDom)
+
+    axios.get(`./zg.json`).then((res) => {
+      echarts.registerMap('china', res.data)
+
+      let option = {
+        backgroundColor: '#001540',
+        geo: {
+          show: true,
+          map: 'china',
+          roam: true,
+          top: 0,
+          left: 0,
+          zoom: 1,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderColor: 'rgba(147, 235, 248, 1)',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+                  }
+                ],
+                globalCoord: false // 缺省为 false
+              },
+              shadowColor: 'rgba(128, 217, 248, 1)',
+              // shadowColor: 'rgba(255, 255, 255, 1)',
+              shadowOffsetX: -2,
+              shadowOffsetY: 2,
+              shadowBlur: 10
+            },
+            emphasis: {
+              areaColor: '#389BB7',
+              borderWidth: 0
+            }
+          }
+        },
+        series: [
+          //地图？
+          {
+            type: 'map',
+            map: 'china',
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: '#031525',
+                borderColor: '#FFFFFF'
+              },
+              emphasis: {
+                areaColor: '#2B91B7'
+              }
+            },
+            animation: false
+          },
+          //地图点的动画效果
+          {
+            //  name: 'Top 5',
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+
+            symbolSize: function (val) {
+              return val[2] / 10
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+              normal: {
+                formatter: '{b}',
+                position: 'right',
+                show: true
+              }
+            },
+            itemStyle: {
+              normal: {
+                shadowBlur: 10
+              }
+            },
+            zlevel: 1
+          }
+        ]
+      }
+      myCharts.value.setOption(option)
+    })
+
+    window.addEventListener('resize', function () {
+      myCharts.value.resize()
+    })
+
+    //设置默认选中高亮部分
+    let index = 11
+    myCharts.value.dispatchAction({
+      type: 'highlight',
+      seriesIndex: 0,
+      dataIndex: index
+    })
+
+    // 点击事件
+    myCharts.value.on('click', (e) => {
+      emit('getRegionByRegionId', e.data)
+      myCharts.value.dispatchAction({
+        type: 'downplay',
+        seriesIndex: 0,
+        dataIndex: 0
+      })
+      if (e.dataIndex != index) {
+        myCharts.value.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: index
+        })
+      }
+      myCharts.value.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: e.dataIndex
+      })
+      index = e.dataIndex
+    })
+    // 当鼠标离开时
+    myCharts.value.on('mouseout', function (e) {
+      myCharts.value.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: index
+      })
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/components/echarts/echarts.ts

@@ -0,0 +1,84 @@
+import * as echarts from 'echarts/core'
+
+//引入需要的图表，需要什么就加什么
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  EffectScatterChart,
+  RadarChart,
+  GaugeChart
+} from 'echarts/charts'
+
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  ToolboxComponent,
+  // 数据集组件
+  DatasetComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent
+} from 'echarts/components'
+
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers'
+
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineSeriesOption
+} from 'echarts/charts'
+
+import type {
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  LegendComponentOption,
+  ToolboxComponentOption,
+  DatasetComponentOption
+} from 'echarts/components'
+import type { ComposeOption } from 'echarts/core'
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | LegendComponentOption
+  | ToolboxComponentOption
+>
+
+// 注册必须的组件,上面引入的都需要在此注册
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  LegendComponent,
+  ToolboxComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  EffectScatterChart,
+  RadarChart,
+  GaugeChart
+])
+
+// 导出
+export default echarts