最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

精彩看点：echarts的散点图和中国地图配合使用

来源：博客园


(资料图片仅供参考)

热力图，我觉得也是叫散点图，我做的是分散在地图上面的点，主要效果如下：图是在晚上抄的：

主要配置有几个:第一个需要配置两个地图属性，即两个series:

series: [      {        // 地图,可以是数组，多个        label: { // label就是你地图上展示的名字，比如四川，重庆等等          show: true, //显示省市名称          position: [1, 100], // 相对的百分比          fontSize: 12,          offset: [2, 0], // 是否对文字进行偏移，横向偏移2像素，纵向偏移0          align: "left", // 文字对齐方式          color: "#fff",        },        itemStyle: {          areaColor: "#5470c6" // 地图图形颜色        },        geoIndex: 0, // 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件        type: "map", // 地图类型        roam: true, // 整个地图能否缩放，拖拽        map: city, // 地图名字        zoom: 1.1, // 当前视角的缩放比例        top: "15%", // 距离顶部距离        scaleLimit: { // 缩放级别限制          max: 9,          min: 1        },      }, { // 散点图配置        type: "scatter", // 地图类型        coordinateSystem: "geo", // 该系列所用的坐标系,geo表示使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。        data: arr, // 数据        symbolSize: function (val) { // 散点大小分块展示，calculateValue根据你的最大值除以20得出，最后整个散点大小都会在10-20像素          if (!val) {            return          }          if (val.length === 0 || val.length < 3) {            return          }          if (!val[2]) {            return          }          let value = val?.[2] / calculateValue          if (value < 12) {            return 10          }          if (value < 14) {            return 12          }          if (value < 16) {            return 16          }          if (value < 18) {            return 18          }          return 20        },        tooltip: {          // 提示框          trigger: "item", // 触发类型          showDelay: 0, // 浮层显示延迟          transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动          formatter: function (params) { // 用来格式化图例文本            let { data = {} } = params;            return `${data?.name}设备总数: ${data?.value?.[2]}`;          }        },      }],

然后设置地理坐标系组件geo

geo: {      scaleLimit: {        max: 9,        min: 1      },      map: city,      roam: true,      tooltip: {        show: true      },      itemStyle: {        areaColor: "#5470c6" // 地图图形颜色      },      label: {        show: true, //显示省市名称        position: [1, 100], // 相对的百分比        fontSize: 12,        offset: [2, 0],        align: "left",        color: "#fff",      },    },

还有一些其他配置，但是我不知道为什么不加这个配置就不得行:

tooltip: {      // 提示框      trigger: "item",      showDelay: 0,      transitionDuration: 0.2,      formatter: function (params) {        let Count = 0;        arr.map(item => {          if(item.name === params.name) {            Count = item?.value?.[2]          }        })        return `${params.name}
                    个数: ${Count}`;      }    },    dataset: {      source: data    },

完整代码：

export const chinaMapConfig = (configData) => {  const { data, city, mapData } = configData;  const arr = []  const calculatedArr = []; // 获取当前级别里面的设备数量数组  const foo = (max) => {    return max / 20  }    for (let i of data) {    for (let j of mapData?.features) {      if ((i?.Province && i?.Province?.indexOf(j.properties.name) !== -1)        || (i?.City && i?.City?.indexOf(j.properties.name) !== -1)        || (i?.District && i?.District?.indexOf(j.properties.name) !== -1)) {        arr.push({ value: [...j.properties.center, i.Count], name: j.properties.name }) // 热力图数据        calculatedArr.push(i.Count)      }    }  }  calculatedArr.sort((a, b) => b - a)  const calculateValue = foo(calculatedArr[0])  const result = {    tooltip: {      // 提示框      trigger: "item",      showDelay: 0,      transitionDuration: 0.2,      formatter: function (params) {        let Count = 0;        arr.map(item => {          if(item.name === params.name) {            Count = item?.value?.[2]          }        })        return `${params.name}
                    个数: ${Count}`;      }    },    dataset: {      source: data    },    series: [      {        // 地图,可以是数组，多个        label: {          show: true, //显示省市名称          position: [1, 100], // 相对的百分比          fontSize: 12,          offset: [2, 0],          align: "left",          color: "#fff",        },        itemStyle: {          areaColor: "#5470c6" // 地图图形颜色        },        geoIndex: 0,        type: "map",        roam: true, // 整个地图能否缩放，拖拽        map: city,        zoom: 1.1, // 当前视角的缩放比例        top: "15%", // 距离顶部距离        scaleLimit: {          max: 9,          min: 1        },      }, { // 散点配置        type: "scatter",        coordinateSystem: "geo",        data: arr,        symbolSize: function (val) {          if (!val) {            return          }          if (val.length === 0 || val.length < 3) {            return          }          if (!val[2]) {            return          }          let value = val?.[2] / calculateValue          if (value < 12) {            return 10          }          if (value < 14) {            return 12          }          if (value < 16) {            return 16          }          if (value < 18) {            return 18          }          return 20        },        tooltip: {          // 提示框          trigger: "item",          showDelay: 0,          transitionDuration: 0.2,          formatter: function (params) {            let { data = {} } = params;            return `${data?.name}设备总数: ${data?.value?.[2]}`;          }        },      }],    geo: {      scaleLimit: {        max: 9,        min: 1      },      map: city,      roam: true,      tooltip: {        show: true      },      itemStyle: {        areaColor: "#5470c6" // 地图图形颜色      },      label: {        show: true, //显示省市名称        position: [1, 100], // 相对的百分比        fontSize: 12,        offset: [2, 0],        align: "left",        color: "#fff",      },    },  };  return result};

关键词：