ECharts地图的使用1：EChars的引入通过CDN的形式或者在vue开发中通过ES6导入的形式引入Echars

1：EChars的引入

通过CDN的形式或者在vue开发中通过ES6导入的形式引入Echars

2：EChars的使用

2.1：目标容器

let box=document.getElementById("id")

2.2: 初始化Echars实例

let charts = echarts.init(box);

2.3：使用指定的配置项和数据区显示图标

charts.setOption(option) 重点就在这个option参数的配置

3：参数option的配置

3.1 title 参数

let option={
    title:{
         text: '主标题',
         link: 'http://baidu.com', //超链接
         subtext: "副标题",
         sublink: 'http://baidu.com',
         left: 'center',
         textStyle: { //主标题 字体控制
             color: 'red',
             fontSize: 30
            },
         subtextStyle:{ //副标题字体控制
            color: 'red',
            fontSize: 30
            }
         },

3.2 series参数

series 参数主要控制地图数据和title平级参数是一个数组，里面包含对象

series: [{
      name："疫情地图", // 此处的名称可用于悬浮显示，悬浮显示的时候是此名称和 data中的name 和value 属性的结合 ，也可以再 3.3中修改
      type: 'map', //地图
      map: 'china', //中国地图
      label: { // 地图上显示文字的属性
        show: true,
        color: 'red',
        fontSize: 10,
      },
      itemStyle: { //每个块的属性
        areaColor: '#eee',//每块地区的原始颜色
        borderColor: 'blue' //边界颜色
      },
      zoom: 1.5,//地图初始大小的倍数
      roam: true,// //滚轮控制缩放
      data:[], //地图数据 包括省会或者直辖市的经纬度
      emphasis: { //当鼠标悬停的时候
        // 高亮属性
        label: { 
          // 当鼠标悬停的时候字体
          color: "#fff",
          fontSize: 12
        },
        itemStyle: { //当鼠标悬停的时候背景和边界
          areaColor: 'red',
          borderColor: '#fff'
        }
      }
    }]

其中data属性为一个数组，里面的数据如下：

[
  {
    name: '北京',
    value: 55
  },
  {
    name: '天津',
    value: 31
  },
  {
    name: '河北',
    value: 3
  }]

3.3 tooltip 参数

和title平级参数是一个对象，是一个提示框组件

tooltip:{
      trigger:'item' //
      showDelay: 20, //浮层显示的延迟，单位为 ms，默认没有延迟
      transitionDuration: 0.2, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
      padding: [8, 10, 8, 10], // 弹框的padding值
      backgroundColor: '#08143E',
      borderWidth: 1,
      borderColor: '#40ACFA',
      borderRadius: 4,
      formatter(params) { // 此处可返回一个字符串用作提示框展示，formatter 也可以直接设置一个字符串
        const { name, value } = params.data || {}
        if (name) {
          return `${name}<br/>XXXX：${value || 0}`
        }
      }
    }

3.4 visualMap 参数

同样和title同级别

visualMap: [{
      type: 'piecewise', //分段的数据，也就是地图左下角展示的
      splitNumber: 5, //分段数 还可以使用 使用 `lt`（小于，little than），`gt`（大于，greater than），`lte`（小于等于 lettle than or equals），`gte`（大于等于，greater than or equals） 还可以在每个对象里自定义 颜色 （color）
      pieces: [ 
        {
          max:55,
          min:45
        },
        {
          max:44,
          min:34
        },
        {
          max:33,
          min:23
        },
        {
          max:22,
          min:12
        },
        {
          max:11,
          min:1
        }
      ],
      precision: 0,
      itemWidth: 20,
      itemHeight: 20,
      textGap: 8,
      itemGap: 6,
      bottom: 20,
      left: 10,
      inverse: true,
      inRange: {
        symbol: [// 左下角的图标图片替代色块
          `image://${require('./_assets/symbol_one.png')}`,
          `image://${require('./_assets/symbol_two.png')}`,
          `image://${require('./_assets/symbol_three.png')}`,
          `image://${require('./_assets/symbol_four.png')}`,
          `image://${require('./_assets/symbol_five.png')}`
        ],
        color: ['#3AA0FF', '#7FC9FB', '#418DFF', '#207CFE', '#2D5FFA'] // 与左下角区域颜色对应，
      },
      textStyle: { //  左下角字体颜色
        color: '#fff',
        fontSize: 12
      }
    }]

3.5 geo 参数

geo 参数可用于设置阴影，其余属性可参照文档

geo: { // 地图阴影
      z: 1,
      map: mapName,
      roam: false, // 是否允许缩放
      silent: true,
      ...mapPosition,
      itemStyle: {
        normal: {
          shadowColor: '#022764',
          shadowOffsetY: 20,
          shadowOffsetX: 10,
          shadowBlur: 0,
          borderWidth: 1,
          borderColor: '#01E3CD'
        }
      }
    }

3.6 toolbox 参数

toolbox 是工具栏的展示，一下属性适用于下载地图编程图片，下下来的图片名称就是pic.jpeg

toolbox:{
      show:true,
      feature:{
        saveAsImage:{
          type:'jpeg',
          name:"pic"
        }
      }
    }

ECharts地图的使用