Vue + Echart 绘制地图区域标记

绘制地图区域

• 绘制地图区域

绘制标记

• 配置项添加scatter图标类型

  mapOption:{
  	geo: {
  	  	map: "QN"
  	},
  	series:[
  		{
  			name: "", // series名称
              type: "scatter", // series图表类型
              coordinateSystem: "geo", // series坐标系类型
              label: {
                show: true,
                // 提示信息
                formatter: "{@[2]} 件",
                color: "#fff",
                fontSize: 12,
                backgroundColor: "#f40",
                padding: 5
              },
             	// 标记图标尺寸
              symbolSize:20,
              data: [
                {
                  name: "瓮安县",
                  value: [107.471232, 27.083355, 20],
                  label: {
                    position: "right"
                  },
                  symbol:'none'
                },
                {
                  name: "福泉市",
                  value: [107.52457, 26.690395, 20],
                  label: {
                    position: "right"
                  },
                  symbol:'none'
                },
                {
                  name: "龙里县",
                  value: [106.985883, 26.59907, 0],
                  label: {
                    position: "left"
                  },
                  symbol:'none'
                },
                {
                  name: "贵定县",
                  value: [107.23022, 26.503264, 0],
                  label: {
                  	// 标记位置
                    position: "right"
                  },
                  // 标记图标
                  symbol:'pin'
                },
                {
                  name: "都匀市",
                  value: [107.523109, 26.203375, 0],
                  label: {
                    position: "right"
                  },
                  symbol:'none'
                },
                {
                  name: "长顺县",
                  value: [106.447348, 26.009799, 30],
                  label: {
                    position: "left"
                  },
                  symbol:'none'
                },
                {
                  name: "惠水县",
                  value: [106.703305, 26.100271, 0],
                  label: {
                    position: "right"
                  },
                  symbol:'none'
                },
                {
                  name: "平塘县",
                  value: [107.209315, 25.72819, 0],
                  label: {
                    position: "bottom"
                  },
                  symbol:'none'
                },
                {
                  name: "独山县",
                  value: [107.625195, 25.723464, 0],
                  label: {
                    position: "right"
                  },
                  symbol:'none'
                },
                {
                  name: "三都水族自治县",
                  value: [107.875655, 25.95995, 0],
                  label: {
                    position: "right"
                  },
                  symbol:'none'
                },
                {
                  name: "罗甸县",
                  value: [106.75773, 25.430636, 0],
                  label: {
                    position: "left"
                  },
                  symbol:'none'
                },
                {
                  name: "荔波县",
                  value: [107.905333, 25.419984, 0],
                  label: {
                    position: "right"
                  },
                  symbol:'none'
                }
              ]
  		},
  		{
              name: "区域图",
              show: true,
              type: "map",
              ......
  		}
  	]
  }
  

• 效果图