Version

5.2.2

Link to Minimal Reproduction

No response

Steps to Reproduce

1、正常创建echarts, 下载geoJson 使用geo与type: 'map生成双重地图' 然后通过visualMap渲染series数据块
2、问题1：pices中 第0项symbol设置成功，其它未设置项开始循环展示(使用默认的循环'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none')， 需要全部设置 symbol后方可正常展示
如下图

3、问题2：实现疫情地图 通过type: 'scatter'，放置小红旗， 当pices中有一项设置symbol时， scatter映射失败 展示为默认roundRect
如下图

当pices中不设置使用任何的symbol时(即每一项都不设置symbol) ,type: 'scatter'中的symbol设置才能生效 如下图

但是实际需求 是需要在visualMap生成的类似图例中去展示0的小红旗

所有代码如下

initMapChart(mapData = []) {
      axios.get("/city/china.json").then((res) => {
        console.log(res);
        echarts.registerMap("china", { geoJSON: res.data });
        let myChart = echarts.init(document.getElementById("mapChart"));

        // 目标数据格式
        // let arr = [
        //   {
        //     name: "北京市",
        //     value: 54,
        //   }
        // ];
        
        // 找出数据中所有数据为0 的坐标 用于0数据小红旗的渲染
        let markPointData = [], brr = [];
        for (let i of mapData) {
          if (i.value == 0) {
            brr.push(i.name)
          }
        }
        for (let j of brr) {
          for(let k of res.data.features) {
            if (j == k.properties.name) {
              markPointData.push({
                name: j,
                value: k.properties.center
              })
            }
          }
        }
        console.log('markPointData:', markPointData)
        let option = {
          visualMap: {
            type: "piecewise",
            show: true,
            min: 0,
            max: 1000000,
            left: "27%",
            bottom: "25%",
            showLabel: true,
            itemWidth: 12,
            itemHeight: 12,
            zlevel: 2,
            // seriesIndex: 0,
            // text: ["高", "低"],
            textStyle: {
              // color: "#ffffff",
              color: "#06fcff"
            },
            pieces: [
              // 图例颜色
              {
                min: 10000,
                max: 999999,
                label: ">10000",
                color: "#A9251B",
                // symbol: "roundRect",
              },
              {
                min: 1000,
                max: 9999,
                label: "1000-9999",
                // symbol: "roundRect",
                color: '#D5514D',
              },
              {
                min: 100,
                max: 999,
                label: "100-999",
                // symbol: "roundRect",
                color: '#E57C6D',
              },
              {
                min: 10,
                max: 99,
                label: "10-99",
                // symbol: "roundRect",
                color: '#F19D8A',
              },
              {
                min: 1,
                max: 9,
                label: "1-9",
                // symbol: "roundRect",
                color: '#FBE6DC',
              },
              {
                value: 0,
                label: "0",
                // color: "#ffffff",
                color: { // 径向渐变
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                      offset: 0, color: '#040E3B' // 0% 处的颜色
                  }, {
                      offset: 1, color: '#082750' // 100% 处的颜色
                  }],
                  global: false, // 缺省为 false
                },
                // symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAeCAMAAAAB8C7XAAAAeFBMVEUAAADBIhzAIh+/ISDBHSHDHh6jMyHAISDAISC/ISDAIR/AISDAHiG/IR+6RjG+IiC/IiHAICC/IR/AISG+ISG+Ix+/ICDAIiC+IB/AIBzCHh68JRa/IiHAIB+/ISC9IiK/Hx+/IiC+IiK+Ih++ICDCJB/BJB+/ISDiIZL9AAAAJ3RSTlMALfv3HQwG0secl4NTQQPkvLWoo2xpZWFYJBkR693CkIx4WktHMjGv/nLNAAAAp0lEQVQoz4XNVwrEMAxFUcUlvfcyvWn/OxxBMASPxNyPBL9jMPwrNJ9gcwfTLfQt52ueRgqpeLQ0rJnGgP4BHtJNcqE7BNQJvRy0EgwSLBJAJUEnwSSBkQDO/l6XOyTe3lrYexxX1bzAte5TlWT9XFg4FNGs+xJ+SgnuwJQTGA42xYB7pGDhhjiw8ERMWbAKY2CLUYcsZIhvFgrEkYVQYw5s9QR8/tNf+EUpppEdkKMAAAAASUVORK5CYII=",
                // symbol: "roundRect",
              },
            ],
          },
          geo: {
            map: "china",
            zoom: 1.7,
            top: "30%",
            zlevel: 0,
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: '#07183F',
              shadowColor: '#1863DE',
              shadowOffsetY: 15,
              shadowOffsetX: 2,
            },
          },
          series: [
            {
              type: "map",
              map: 'china',
              zoom: 1.7,
              top: "30%",
              zlevel: 1,
              label: {
                show: true,
                fontSize: "14",
                color: "#00D9A9",
              },
              itemStyle: {
                // areaColor: '#07183F',
                // areaColor: { // 单向渐变
                //   type: 'linear',
                //   x: 0,
                //   y: 0,
                //   x2: 0,
                //   y2: 1,
                //   colorStops: [{
                //       offset: 0, color: '#040E3B' // 0% 处的颜色
                //   }, {
                //       offset: 1, color: '#144975' // 100% 处的颜色
                //   }],
                //   global: false // 缺省为 false
                // },
                areaColor: { // 径向渐变
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                      offset: 0, color: '#040E3B' // 0% 处的颜色
                  }, {
                      offset: 1, color: '#082750' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                borderWidth: 2,
                borderColor: '#3680A8',
                shadowColor: '#3680A8',
                // shadowOffsetY: 15,
                // shadowOffsetX: 0,
              },
              // geoIndex: 0,
              data: mapData,
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAeCAMAAAAB8C7XAAAAeFBMVEUAAADBIhzAIh+/ISDBHSHDHh6jMyHAISDAISC/ISDAIR/AISDAHiG/IR+6RjG+IiC/IiHAICC/IR/AISG+ISG+Ix+/ICDAIiC+IB/AIBzCHh68JRa/IiHAIB+/ISC9IiK/Hx+/IiC+IiK+Ih++ICDCJB/BJB+/ISDiIZL9AAAAJ3RSTlMALfv3HQwG0secl4NTQQPkvLWoo2xpZWFYJBkR693CkIx4WktHMjGv/nLNAAAAp0lEQVQoz4XNVwrEMAxFUcUlvfcyvWn/OxxBMASPxNyPBL9jMPwrNJ9gcwfTLfQt52ueRgqpeLQ0rJnGgP4BHtJNcqE7BNQJvRy0EgwSLBJAJUEnwSSBkQDO/l6XOyTe3lrYexxX1bzAte5TlWT9XFg4FNGs+xJ+SgnuwJQTGA42xYB7pGDhhjiw8ERMWbAKY2CLUYcsZIhvFgrEkYVQYw5s9QR8/tNf+EUpppEdkKMAAAAASUVORK5CYII=',
              symbolSize: 12, //图形大小
              zlevel: 3,
              label: {
                show: false,
              },
              data: markPointData
            }
          ],
        };
        myChart.setOption(option);
      });
    },

Current Behavior

symbol设置有冲突

Expected Behavior

symbol设置正常

Environment

- OS: win10
- Browser: chrome  97.0.4692.99
- Framework:

Any additional comments?

vue cli 4.5 (v2)