前端大屏展示可视化——地图的绘制（Echarts）

1、安装

文档

npm install echarts

2、引入

import * as echarts from 'echarts';

3、渲染

3.1、前期准备，基础配置

// 地图实例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中定义一个有宽高的容器

获取节点，初始化实例

myChart.value = echarts.init(document.getElementById('mainMap'));

3.3、监听

监听窗口大小的变化

  window.addEventListener("resize", () => {    if (myChart.value) myChart.value.resize();  })

3.4、渲染加载

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

  echarts.registerMap("map_area", geoJSON);  myChart.value.setOption(option);

3.5、销毁

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

4、完整代码

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({});  

5、其他扩展

5.1、加入事件

要在实例渲染之前执行

  // 点击事件  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.2、背景色/纹理填充

// 地图配置const option = reactive({  tooltip: {    trigger: 'item',    formatter: function (params) {      return params.name + '：' + (params.value || 0);    },  },  series: [    // 地图配置    {      type: "map",      map: "map_area",      layoutCenter: ['50%', '50%'],      layoutSize: '92%',      z: 2,      label: {        show: true,        fontSize: 13,        color: '#1bfeff',      },      // itemStyle: {      //   // borderColor: '#5ec8f3', // 图形的描边颜色      //   // borderWidth: 1.8,      //   // borderType: 'dotted', // 描边类型      //   // opacity: .7,      //   areaColor: '#9967FB'      // },      itemStyle: { // 地图区域的多边形 图形样式。        borderColor: '#5ec8f3', // 图形的描边颜色        borderWidth: 1.8,        borderType: 'dotted', // 描边类型        // color: "#010e3b", // 图形颜色        opacity: .7,        areaColor: {          image: map_bg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串          repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'        },      },      data: [{        name: '杭州市',        value: '333'      },{        name: '湖州市',        value: '444'      }],    },  ],})