背景

可视化大屏需求，地图可切换到世界地图、中国地图、各个省份地图。

image.png

开始---引入echarts

npm install echarts
import echarts from 'echarts';

初始化数据

image.png

    // 设置地图数据
    async setMapType(obj) {
      let url = '';// 本地地址
      if (obj == 'china') {
        url = `${location.origin}${location.pathname}models/map/json/china.json`;
      } else if (obj == 'world') {
        url = `${location.origin}${location.pathname}models/map/json/world.json`;
      } else {
        url = `${location.origin}${location.pathname}models/map/json/province/${obj}.json`;
      }
      const map = await common.loadJson(url);//从静态json读取文件数据
      if (map != false) {
        echarts.registerMap('map', JSON.stringify(map));//注册地图数据
      }
    },
// 加载外部json文件
async function loadJson(url = '') {
  const result = await $.ajax({
    type: 'get',
    url,
    dataType: 'JSON',
    success(map) {
      return map;
    },
    error() {
      return false;
    },
  });
  return result;
}

初始化地图

async initChart(special) {
      const vm = this;
      vm.chart = echarts.init(document.getElementById(vm.dataInfo.id));
      const option = {
        backgroundColor: config.map.bgColor,
        tooltip: {
          show: config.tooltip.isTooltip,
          trigger: 'item',
          position: config.tooltip.tooltipPosition,
          backgroundColor: config.tooltip.bgColor,
          borderColor: config.tooltip.borderColor,
          borderWidth: config.tooltip.borderWidth * common.getFontSize(),
          padding: config.tooltip.padding * common.getFontSize(),
          formatter(params) {
            if (params.value == undefined) {
              return `${params.name}`;
            } else {
              return `${params.name} :</br>${params.value[2]}${unit}`;
            }
          },
          textStyle: {
            color: config.tooltip.color,
          },
        },
        legend: {
          orient: 'vertical',
          y: 'bottom',
          x: 'right',
          data: ['pm2.5'],
          textStyle: {
            color: '#fff',
          },
        },
        geo: {
          map: 'map',
          left: 0.25 * common.getFontSize(),
          top: 0.25 * common.getFontSize(),
          right: 0.25 * common.getFontSize(),
          bottom: 0.25 * common.getFontSize(),
          roam: config.map.isRoam, // 是否允许鼠标滚动放大，缩小
          scaleLimit: { // 所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min: 0.5, // 最小的缩放值
            max: 3, // 最大的缩放值
          },
          label: {
            show: config.textLabel.isTextLabel, // 是否显示文本
            color: config.textLabel.textColor, // 文本颜色
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。 默认样试。
            normal: {
              color: {
                type: 'linear',
                x: 100,
                y: 12,
                x2: 12,
                y2: 100,
                colorStops: [{
                  offset: 0, color: config.area.color[0], // 0% 处的颜色
                }, {
                  offset: 1, color: config.area.color[1], // 100% 处的颜色
                }],
                global: config.area.isGlobal, // 缺省为 false
              },
              borderColor: config.area.borderColor, // 边框线
              borderWidth: config.area.borderWidth * common.getFontSize(), // 线宽
              borderType: config.area.borderType, // 支持 'solid', 'dashed', 'dotted'。
              shadowColor: config.area.shadowColor[0], // 阴影颜色
              shadowBlur: config.area.shadowBlur * common.getFontSize(), // 模糊大小
              shadowOffsetX: config.area.shadowOffsetX * common.getFontSize(), // 水平偏移
              shadowOffsetY: config.area.shadowOffsetY * common.getFontSize(), // 垂直偏移
            },
          },
          emphasis: { // 高亮状态下的多边形和标签样式。
            label: { // 文本
              show: config.textLabel.isTextLabel,
              color: config.textLabel.emphasizeColor,
            },
            itemStyle: { // 区域
              areaColor: config.area.emphasizeAreaColor,
            },
          },
          // regions: [{
          //   name: '重庆',
          //   itemStyle: {
          //     normal: {
          //       areaColor: 'red',
          //       color: 'red',
          //     },
          //   },
          // }], // 区域块的颜色
        },
        // visualMap: {
        //   min: 0,
        //   max: 200,
        //   calculable: true,
        //   inRange: {
        //     color: ['#50a3ba', '#eac736', '#d94e5d'],
        //   },
        //   textStyle: {
        //     color: '#fff',
        //   },
        // },
        series: [
          {
            name: '点',
            type: config.scatter.isRipple ? 'effectScatter' : 'scatter',
            coordinateSystem: 'geo',
            data,
            symbol: config.scatter.isIconSelect ? `image://${config.scatter.iconUrl}` : config.scatter.scatterType,
            symbolSize: config.scatter.isIconSelect ? config.scatter.iconSize * common.getFontSize() : config.scatter.symbolSize * common.getFontSize(),
            // 标记的大小,可以设置数组或者函数返回值的形式
            // symbolSize(val) {
            //   return (val[2] / 2) / 100 * common.getFontSize();
            // },
            label: {
              normal: {
                formatter: '{b}',
                position: config.scatter.lapelPosition,
                show: config.scatter.iScatterLabel,
                color: config.scatter.labelColor,
              },
            },
            itemStyle: {
              color: config.scatter.scatterColor,
              borderColor: config.scatter.borderColor,
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
              },
            },
            rippleEffect: { // 涟漪特效相关配置。
              brushType: config.scatter.brushType, // 波纹的绘制方式
            },
            hoverAnimation: true, // 鼠标移入放大圆
          },
        ],
      };
      vm.chart.setOption(option, true);
    },

图片

image.png

image.png

欢迎评论点赞！