当前位置: 首页 > 工具软件 > Map Index > 使用案例 >

echarts之map常用属性

赵禄
2023-12-01

首先,数据需要提供
1、

mapData=[ {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
    {name: '青岛', value: 18},
    {name: '乳山', value: 18},
    {name: '金昌', value: 19},
    {name: '泉州', value: 21},
    {name: '莱西', value: 21},
    {name: '日照', value: 21},
    {name: '胶南', value: 22},
    {name: '南通', value: 23},
    {name: '拉萨', value: 24},
    {name: '云浮', value: 24},
    {name: '梅州', value: 25},
    {name: '文登', value: 25},
    {name: '上海', value: 25},
    {name: '攀枝花', value: 25},
    {name: '威海', value: 25},
    {name: '承德', value: 25},
    {name: '厦门', value: 26},
    {name: '汕尾', value: 26},
    {name: '潮州', value: 26},
    {name: '丹东', value: 27},
    {name: '太仓', value: 27},
    {name: '曲靖', value: 27},
    {name: '烟台', value: 28},
    {name: '福州', value: 29},
    {name: '瓦房店', value: 30},
    {name: '即墨', value: 30}
    ]

2、

 geoCoordMap: {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120.33,36.07],
    '乳山':[121.52,36.89],
    '金昌':[102.188043,38.520089],
    '泉州':[118.58,24.93],
    '莱西':[120.53,36.86],
    '日照':[119.46,35.42],
    '胶南':[119.97,35.88],
    '南通':[121.05,32.08],
    '拉萨':[91.11,29.97],
    '云浮':[112.02,22.93],
    '梅州':[116.1,24.55],
    '文登':[122.05,37.2],
    '上海':[121.48,31.22],
    '攀枝花':[101.718637,26.582347],
    '威海':[122.1,37.5],
    '承德':[117.93,40.97],
    '厦门':[118.1,24.46],
    '汕尾':[115.375279,22.786211],
    '潮州':[116.63,23.68],
    '丹东':[124.37,40.13],
    '太仓':[121.1,31.45],
    '曲靖':[103.79,25.51],
    '烟台':[121.39,37.52],
    '福州':[119.3,26.08],
    '瓦房店':[121.979603,39.627114],
    '即墨':[120.45,36.38]
      }
   option = {
        color: ['#B0EEF4', 'yellow', '#d8e050'],
        tooltip: {
          trigger: 'item',  // 数据项图形触发方式,主要在散点图,饼图等无类目轴的图表中使用。
          formatter: format  //函数,提供参数params,返回的是tip上的html片段,常用params.data
        },
        geo: {
          show: true,
          map: '辽宁',  //地图范围数据,通过echarts.registerMap引入(在node_modules里)
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
            }
          },
          roam: false,  //鼠标平移或者缩放
          itemStyle: {   //每个点的样式
            normal: {
              areaColor: 'transparent',  
              borderColor: '#3fdaff',
              borderWidth: 2,
              shadowColor: 'rgba(63, 218, 255, 0.5)',
              shadowBlur: 30  
            },
            emphasis: {
              areaColor: '#2B91B7',
            }
          }
        },
        series: [
          {
            name: 'light',
            type: 'scatter',  //设置普通点样式,scatter为单色实心圆形
            coordinateSystem: 'geo',  //使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。
            data: convertData(mapData),

		/*var convertData = function (data) {
    		var res = [];
    		for (var i = 0; i < data.length; i++) {
        		var geoCoord = geoCoordMap[data[i].name];
        			if (geoCoord) {
            			res.push({
                			name: data[i].name,
                			value: geoCoord.concat(data[i].value)
            			});
        			}
    		}
    		return res;
			};*/
			//把 { name: '齐齐哈尔', value: 14 } { '齐齐哈尔':[123.97,47.33] } 格式的数据合并转换为 { "name":"齐齐哈尔","value":[114.854101942,33.8237408181,5000] } 

            symbolSize: function (val) {
              return val[2] / 1000;
            },
            // symbolSize:15,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontSize: 12,
                  fontWeight: 'bold',
                  color: '#007277'

                }
              },
              emphasis: {
                show: true
              }
            }
          },
          {
            name: 'point',  //点名称
            type: 'map',
            mapType: '辽宁',  //地图省份
            roam: false,
            mapLocation: { x: 'center', y: '2%' },  //在v2以上作废,改用top left right bottom
            selectedMode: 'single',   //选点模式,单选
            label: {
              normal: {
                show: false
              },
              textStyle: {
                color: '#fff'
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#89d6d9',
                borderColor: '#b1b1b1'
              },
              emphasis: {
                areaColor: '#99e3e6',
                label: {
                  //              show: true
                }
              }
            },
            data: mapData,
            heatmap: {
              minAlpha: 0.5,
              data: heatData
            },
          },
          {
            name: 'Top 5',
            type: 'effectScatter',  //雷达样式点
            coordinateSystem: 'geo',
            data: convertData(mapData.sort(function (a, b) {
              return b.dayOrderTotal - a.dayOrderTotal;   //数据排序,取前五
            }).slice(0, 5)),
            symbolSize: function (val) {  //点的大小,根据数据值来定
              return val[2] / 1000;
            },
            showEffectOn: 'render',  //何时显示特效,'render' 绘制完成后显示,'emphasis'鼠标放上去后显示。
            rippleEffect: {      //涟漪特效相关配置
              brushType: 'stroke'     //波纹的绘制方式,可选 'stroke' 和 'fill'。
            },
            hoverAnimation: false,    //是否开启鼠标hover效果
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontSize: 12,
                  fontWeight: 'bold',
                  color: '#007277'

                }
              }
            },
            itemStyle: {
              normal: {
                color: '#ff0000',
                shadowBlur: 10,
                shadowColor: '#05C3F9'
              }
            },
            zlevel: 1
          },
        ]
      };
 类似资料: