前端大屏展示可视化——地图的绘制(持续更新)

一、ECharts

1、安装

javascript 复制代码
npm install echarts

2、引入

javascript 复制代码
import * as echarts from 'echarts';

3、渲染

3.1、前期准备,基础配置
javascript 复制代码
// 地图实例
const myChart = ref(null);
// 地图配置
const option = reactive({
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      return params.name + ':' + (params.value || 0);
    },
  },
  series: [
    // 地图配置
    {
      type: "map",
      geoIndex: 0,
      data: [{
        name: '杭州市',
        value: '333'
      },{
        name: '湖州市',
        value: '444'
      }],
    },
  ],
  geo: [{
    map: "map_area",
    layoutCenter: ['50%', '50%'],
    layoutSize: '92%',
    z: 2,
    label: {
      show: true,
      fontSize: 13,
      color: '#1bfeff',
    },
  }]
})
3.2、初始化

首先要现在HTML中定义一个有宽高的容器

html 复制代码
<div id="mainMap" style="width: 100%;height: 100%;"></div>

获取节点,初始化实例

javascript 复制代码
myChart.value = echarts.init(document.getElementById('mainMap'));
3.3、监听

监听窗口大小的变化

javascript 复制代码
  window.addEventListener("resize", () => {
    if (myChart.value) myChart.value.resize();
  })
3.4、渲染加载

geoJSON数据可通过接口获取,或自行下载保存到本地,自行引入,建议通过接口获取

javascript 复制代码
  echarts.registerMap("map_area", geoJSON);
  myChart.value.setOption(option);
3.5、销毁
javascript 复制代码
  window.removeEventListener("resize", () => {
    if (myChart.value) myChart.value.resize();
  })
  if (myChart.value) myChart.value.dispose()

4、其他

4.1、加入事件

要在实例渲染之前执行

javascript 复制代码
  // 点击事件
  myChart.value.on('click', (mapParams) => {
    console.log('click', mapParams);
  });
  // 鼠标移入事件
  myChart.value.on('mouseover', (mapParams) => {
    console.log('mouseover', mapParams);
  });
  // 鼠标移出事件
  myChart.value.on('mouseout', (mapParams) => {
    console.log('mouseout', mapParams);
  });

5、完整代码

javascript 复制代码
<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref, onBeforeUnmount } from 'vue';
import geoJSON from './geo.json';

defineOptions({name: 'echarts'});
onMounted(() => {
  loadEchartsMap();
});

// 地图实例
const myChart = ref(null);
// 地图配置
const option = reactive({
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      return params.name + ':' + (params.value || 0);
    },
  },
  series: [
    // 地图配置
    {
      type: "map",
      geoIndex: 0,
      data: [{
        name: '杭州市',
        value: '333'
      },{
        name: '湖州市',
        value: '444'
      }],
    },
  ],
  geo: [{
    map: "map_area",
    layoutCenter: ['50%', '50%'],
    layoutSize: '92%',
    z: 2,
    label: {
      show: true,
      fontSize: 13,
      color: '#1bfeff',
    },
  }]
})
// 加载Echarts地图
const loadEchartsMap = () => {
  // 初始化
  myChart.value = echarts.init(document.getElementById('mainMap'));
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart.value) myChart.value.resize();
  })
  // 点击事件
  myChart.value.on('click', (mapParams) => {
    console.log('click', mapParams);
  });
  // 鼠标移入事件
  myChart.value.on('mouseover', (mapParams) => {
    console.log('mouseover', mapParams);
  });
  // 鼠标移出事件
  myChart.value.on('mouseout', (mapParams) => {
    console.log('mouseout', mapParams);
  });
  // 加载地图
  echarts.registerMap("map_area", geoJSON);
  myChart.value.setOption(option);
}

// 销毁
onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    if (myChart.value) myChart.value.resize();
  })
  if (myChart.value) myChart.value.dispose()
})

// 子组件暴露
defineExpose({});

</script>

<template>
  <div id="mainMap" style="width: 100%;height: 100%;"></div>
</template>

<style lang="less" scoped>

</style>
相关推荐
回忆哆啦没有A梦2 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__2 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生3 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园3 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8284 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全4 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊5 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan6 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿7 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊7 小时前
Polar WEB(1-20)
前端