象形图echarts 配置项内容和展示

      option = {
  "grid": {
    "left": "5%",
    "top": "40%",
    "bottom": "30%",
    "right": "20%",
    "containLabel": true
  },
  "tooltip": {
    "trigger": "item"
  },
  "xAxis": {
    "splitLine": {
      "show": false
    },
    "axisLine": {
      "show": false
    },
    "axisLabel": {
      "show": false,
      "_displayCount": 0
    },
    "axisTick": {
      "show": false
    }
  },
  "yAxis": [
    {
      "type": "category",
      "inverse": false,
      "data": [
        "未知",
        "女",
        "男"
      ],
      "axisLine": {
        "show": false
      },
      "axisTick": {
        "show": false
      },
      "splitLine": {
        "show": false,
        "lineStyle": {
          "type": "dashed",
          "color": "#3e86dd"
        }
      },
      "axisLabel": {
        "margin": 35,
        "textStyle": {
          "color": "#fff",
          "fontSize": 14
        }
      }
    }
  ],
  "series": [
    {
      "tooltip": {
        "show": false
      },
      "type": "pictorialBar",
      "symbolSize": [
        "30",
        "30"
      ],
      "symbolRepeat": "fixed",
      "data": [
        {
          "value": 1,
          "symbol": "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDE2IDM0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjOTRhNWVjOwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgICBvcGFjaXR5OiAwLjI7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJtYW4iIGNsYXNzPSJjbHMtMSIgZD0iTTM3NjMuMSw4NzkuODE3YTMuMzA3LDMuMzA3LDAsMCwwLDMuMTUtMy4wNCwzLjM0NywzLjM0NywwLDAsMC0zLjA3LTMuMTU0LDMuNDEyLDMuNDEyLDAsMCwwLTMuMTEsMy4xOTJBMy4xNiwzLjE2LDAsMCwwLDM3NjMuMSw4NzkuODE3Wm02LjE0LDkuMDQ5di00LjY4OGExNy43MTUsMTcuNzE1LDAsMCwwLDAtMi4zNDQsMS45OSwxLjk5LDAsMCwwLTEuOTUtMS41NjNoLTMuNWMtMS41NywwLTIuMzMsMC0zLjg5LDBhMi4yOTEsMi4yOTEsMCwwLDAtMS44Ni40NzVjLTAuNzkuOS0uNzEsMC45NzQtMC43MSwzLjQ3NXY0Ljc3MWMwLDEuMjM0LS4yMSwzLjE1NSwxLjAyLDMuMTU1LDEuMTcsMCwxLjE2LS44MzcsMS4xNi0yLjA4NFY4ODYuOGMwLTEuMTM3LS4wNy0xLjMzLjE2LTEuMzNzMC4yMywwLjAxNS4yMywxLjIyNGMwLDEuMTItLjAxLDE2Ljg4OS0wLjAxLDE3LjhhMS40ODksMS40ODksMCwwLDAsMS41OSwxLjYxOCwxLjQ0NywxLjQ0NywwLDAsMCwxLjY2LTEuNDY4di04LjJjMC0uNzgxLjAyLTEuMTYsMC4yMi0xLjE2czAuMTcsMC4zNzkuMTcsMS4xNnY4LjJhMS42ODksMS42ODksMCwwLDAsMS42OCwxLjU0MiwxLjgyMywxLjgyMywwLDAsMCwxLjUtMS41MjVjMC0zLjEyNS4wMS0xNy4wMzIsMC4wMS0xOC4wMTUsMC0uNTMzLTAuMDQtMS4yMS4xNi0xLjIxczAuMTksMC4xODQuMTksMC45NTJWODg5LjRjMCwyLjA1NS4zMiwyLjU5NCwxLjEsMi41OTRDMzc2OS4zNCw4OTEuOTkxLDM3NjkuMjQsODg5Ljk4NCwzNzY5LjI0LDg4OC44NjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzc1NS4yNjUgLTg3Mi45MDcpIi8+Cjwvc3ZnPg=="
        },
        {
          "value": 100,
          "symbol": "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDE2IDM0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjOTRhNWVjOwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgICBvcGFjaXR5OiAwLjI7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJ3b21lbiIgY2xhc3M9ImNscy0xIiBkPSJNMzc2My41Myw5MjguMDMzYTMuMywzLjMsMCwwLDAsMy4xMy0zLjA1MSwzLjMzNSwzLjMzNSwwLDAsMC0zLjA1LTMuMTY1LDMuNDE4LDMuNDE4LDAsMCwwLTMuMSwzLjJBMy4xNjQsMy4xNjQsMCwwLDAsMzc2My41Myw5MjguMDMzWm02Ljg4LDkuMDg0Yy0wLjgyLTIuNDgxLTEuMTYtMy41My0xLjU1LTQuNzA2YTE4LjAxMywxOC4wMTMsMCwwLDAtLjc3LTIuMzUzLDEuOTg5LDEuOTg5LDAsMCwwLTEuOTQtMS41NjhoLTUuMDRhMi40LDIuNCwwLDAsMC0yLjMyLDEuNTY4bC0wLjc4LDIuMzUzYy0wLjM5LDEuMTc2LTEuMTYsMy41MjktMS41NSw0LjcwNnMtMS4xNiwyLjc0NSwwLDMuMTM2LDEuOTQtMS45NiwyLjMzLTMuMTM2LDAuMzgtMS4xNzcuNzctMi4zNTNjMC4wOC0uMjE0LjI0LTAuODk1LDAuNTQtMC43ODIsMC4xOSwwLjA3NywwLC4zNDQtMC4xNS43ODItMC4zLDEuMTEtMi43MSw4LjYyNy0yLjcxLDguNjI3aDMuMVY5NTIuOGExLjMyLDEuMzIsMCwwLDAsMS4zMiwxLjU4LDEuMzg1LDEuMzg1LDAsMCwwLDEuMzktMS41OHYtOC4yMzVjMC0uNzg0LjAzLTEuMTY0LDAuMjItMS4xNjRzMC4xNywwLjM4LjE3LDEuMTY0Vjk1Mi44YTEuNDMsMS40MywwLDAsMCwxLjM4LDEuNTU2LDEuNDQ2LDEuNDQ2LDAsMCwwLDEuMzMtMS41NTZ2LTkuNDExaDMuMXMtMi4xLTcuNDQzLTIuNC04LjY0NmMtMC4xMi0uNTUxLTAuMjctMC43NTgtMC4wOC0wLjg3NiwwLjI2LS4wNzMuMTMsMC4wMzMsMC41NCwxLjI4N2wwLjc4LDIuMzUyYzAuMjYsMC44MTIuNzcsMi43NDUsMS41NSwyLjc0NUMzNzcwLjgsOTQwLjI1MywzNzcxLjE5LDkzOS40NjksMzc3MC40MSw5MzcuMTE3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM3NTUuMzI1IC05MjEuMDk0KSIvPgo8L3N2Zz4="
        },
        {
          "value": 100,
          "symbol": "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDE2IDM0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjOTRhNWVjOwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgICBvcGFjaXR5OiAwLjI7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJtYW4iIGNsYXNzPSJjbHMtMSIgZD0iTTM3NjMuMSw4NzkuODE3YTMuMzA3LDMuMzA3LDAsMCwwLDMuMTUtMy4wNCwzLjM0NywzLjM0NywwLDAsMC0zLjA3LTMuMTU0LDMuNDEyLDMuNDEyLDAsMCwwLTMuMTEsMy4xOTJBMy4xNiwzLjE2LDAsMCwwLDM3NjMuMSw4NzkuODE3Wm02LjE0LDkuMDQ5di00LjY4OGExNy43MTUsMTcuNzE1LDAsMCwwLDAtMi4zNDQsMS45OSwxLjk5LDAsMCwwLTEuOTUtMS41NjNoLTMuNWMtMS41NywwLTIuMzMsMC0zLjg5LDBhMi4yOTEsMi4yOTEsMCwwLDAtMS44Ni40NzVjLTAuNzkuOS0uNzEsMC45NzQtMC43MSwzLjQ3NXY0Ljc3MWMwLDEuMjM0LS4yMSwzLjE1NSwxLjAyLDMuMTU1LDEuMTcsMCwxLjE2LS44MzcsMS4xNi0yLjA4NFY4ODYuOGMwLTEuMTM3LS4wNy0xLjMzLjE2LTEuMzNzMC4yMywwLjAxNS4yMywxLjIyNGMwLDEuMTItLjAxLDE2Ljg4OS0wLjAxLDE3LjhhMS40ODksMS40ODksMCwwLDAsMS41OSwxLjYxOCwxLjQ0NywxLjQ0NywwLDAsMCwxLjY2LTEuNDY4di04LjJjMC0uNzgxLjAyLTEuMTYsMC4yMi0xLjE2czAuMTcsMC4zNzkuMTcsMS4xNnY4LjJhMS42ODksMS42ODksMCwwLDAsMS42OCwxLjU0MiwxLjgyMywxLjgyMywwLDAsMCwxLjUtMS41MjVjMC0zLjEyNS4wMS0xNy4wMzIsMC4wMS0xOC4wMTUsMC0uNTMzLTAuMDQtMS4yMS4xNi0xLjIxczAuMTksMC4xODQuMTksMC45NTJWODg5LjRjMCwyLjA1NS4zMiwyLjU5NCwxLjEsMi41OTRDMzc2OS4zNCw4OTEuOTkxLDM3NjkuMjQsODg5Ljk4NCwzNzY5LjI0LDg4OC44NjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzc1NS4yNjUgLTg3Mi45MDcpIi8+Cjwvc3ZnPg=="
        }
      ]
    },
    {
      "type": "pictorialBar",
      "symbolSize": [
        "30",
        "30"
      ],
      "animation": true,
      "symbolRepeat": "fixed",
      "symbolClip": true,
      "symbolOffset": [
        0,
        0
      ],
      "data": [
        {
          "value": 5,
          "symbol": "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDE2IDM0IiBmaWxsPSIjMUZEOEMzIj4KCiAgPHBhdGggaWQ9Im1hbiIgY2xhc3M9ImNscy0xIiBkPSJNMzc2My4xLDg3OS44MTdhMy4zMDcsMy4zMDcsMCwwLDAsMy4xNS0zLjA0LDMuMzQ3LDMuMzQ3LDAsMCwwLTMuMDctMy4xNTQsMy40MTIsMy40MTIsMCwwLDAtMy4xMSwzLjE5MkEzLjE2LDMuMTYsMCwwLDAsMzc2My4xLDg3OS44MTdabTYuMTQsOS4wNDl2LTQuNjg4YTE3LjcxNSwxNy43MTUsMCwwLDAsMC0yLjM0NCwxLjk5LDEuOTksMCwwLDAtMS45NS0xLjU2M2gtMy41Yy0xLjU3LDAtMi4zMywwLTMuODksMGEyLjI5MSwyLjI5MSwwLDAsMC0xLjg2LjQ3NWMtMC43OS45LS43MSwwLjk3NC0wLjcxLDMuNDc1djQuNzcxYzAsMS4yMzQtLjIxLDMuMTU1LDEuMDIsMy4xNTUsMS4xNywwLDEuMTYtLjgzNywxLjE2LTIuMDg0Vjg4Ni44YzAtMS4xMzctLjA3LTEuMzMuMTYtMS4zM3MwLjIzLDAuMDE1LjIzLDEuMjI0YzAsMS4xMi0uMDEsMTYuODg5LTAuMDEsMTcuOGExLjQ4OSwxLjQ4OSwwLDAsMCwxLjU5LDEuNjE4LDEuNDQ3LDEuNDQ3LDAsMCwwLDEuNjYtMS40Njh2LTguMmMwLS43ODEuMDItMS4xNiwwLjIyLTEuMTZzMC4xNywwLjM3OS4xNywxLjE2djguMmExLjY4OSwxLjY4OSwwLDAsMCwxLjY4LDEuNTQyLDEuODIzLDEuODIzLDAsMCwwLDEuNS0xLjUyNWMwLTMuMTI1LjAxLTE3LjAzMiwwLjAxLTE4LjAxNSwwLS41MzMtMC4wNC0xLjIxLjE2LTEuMjFzMC4xOSwwLjE4NC4xOSwwLjk1MlY4ODkuNGMwLDIuMDU1LjMyLDIuNTk0LDEuMSwyLjU5NEMzNzY5LjM0LDg5MS45OTEsMzc2OS4yNCw4ODkuOTg0LDM3NjkuMjQsODg4Ljg2NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNzU1LjI2NSAtODcyLjkwNykiLz4KPC9zdmc+"
        },
        {
          "value": 20,
          "symbol": "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDE2IDM0IiBmaWxsPSIjRkYxMDZFIj4KICA8cGF0aCBpZD0id29tZW4iIGNsYXNzPSJjbHMtMSIgZD0iTTM3NjMuNTMsOTI4LjAzM2EzLjMsMy4zLDAsMCwwLDMuMTMtMy4wNTEsMy4zMzUsMy4zMzUsMCwwLDAtMy4wNS0zLjE2NSwzLjQxOCwzLjQxOCwwLDAsMC0zLjEsMy4yQTMuMTY0LDMuMTY0LDAsMCwwLDM3NjMuNTMsOTI4LjAzM1ptNi44OCw5LjA4NGMtMC44Mi0yLjQ4MS0xLjE2LTMuNTMtMS41NS00LjcwNmExOC4wMTMsMTguMDEzLDAsMCwwLS43Ny0yLjM1MywxLjk4OSwxLjk4OSwwLDAsMC0xLjk0LTEuNTY4aC01LjA0YTIuNCwyLjQsMCwwLDAtMi4zMiwxLjU2OGwtMC43OCwyLjM1M2MtMC4zOSwxLjE3Ni0xLjE2LDMuNTI5LTEuNTUsNC43MDZzLTEuMTYsMi43NDUsMCwzLjEzNiwxLjk0LTEuOTYsMi4zMy0zLjEzNiwwLjM4LTEuMTc3Ljc3LTIuMzUzYzAuMDgtLjIxNC4yNC0wLjg5NSwwLjU0LTAuNzgyLDAuMTksMC4wNzcsMCwuMzQ0LTAuMTUuNzgyLTAuMywxLjExLTIuNzEsOC42MjctMi43MSw4LjYyN2gzLjFWOTUyLjhhMS4zMiwxLjMyLDAsMCwwLDEuMzIsMS41OCwxLjM4NSwxLjM4NSwwLDAsMCwxLjM5LTEuNTh2LTguMjM1YzAtLjc4NC4wMy0xLjE2NCwwLjIyLTEuMTY0czAuMTcsMC4zOC4xNywxLjE2NFY5NTIuOGExLjQzLDEuNDMsMCwwLDAsMS4zOCwxLjU1NiwxLjQ0NiwxLjQ0NiwwLDAsMCwxLjMzLTEuNTU2di05LjQxMWgzLjFzLTIuMS03LjQ0My0yLjQtOC42NDZjLTAuMTItLjU1MS0wLjI3LTAuNzU4LTAuMDgtMC44NzYsMC4yNi0uMDczLjEzLDAuMDMzLDAuNTQsMS4yODdsMC43OCwyLjM1MmMwLjI2LDAuODEyLjc3LDIuNzQ1LDEuNTUsMi43NDVDMzc3MC44LDk0MC4yNTMsMzc3MS4xOSw5MzkuNDY5LDM3NzAuNDEsOTM3LjExN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNzU1LjMyNSAtOTIxLjA5NCkiLz4KPC9zdmc+"
        },
        {
          "value": 75,
          "symbol": "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDE2IDM0IiBmaWxsPSIjNDQ2NkY0Ij4KICA8ZGVmcz4KICAgIAogIDwvZGVmcz4KICA8cGF0aCBpZD0ibWFuIiBjbGFzcz0iY2xzLTEiIGQ9Ik0zNzYzLjEsODc5LjgxN2EzLjMwNywzLjMwNywwLDAsMCwzLjE1LTMuMDQsMy4zNDcsMy4zNDcsMCwwLDAtMy4wNy0zLjE1NCwzLjQxMiwzLjQxMiwwLDAsMC0zLjExLDMuMTkyQTMuMTYsMy4xNiwwLDAsMCwzNzYzLjEsODc5LjgxN1ptNi4xNCw5LjA0OXYtNC42ODhhMTcuNzE1LDE3LjcxNSwwLDAsMCwwLTIuMzQ0LDEuOTksMS45OSwwLDAsMC0xLjk1LTEuNTYzaC0zLjVjLTEuNTcsMC0yLjMzLDAtMy44OSwwYTIuMjkxLDIuMjkxLDAsMCwwLTEuODYuNDc1Yy0wLjc5LjktLjcxLDAuOTc0LTAuNzEsMy40NzV2NC43NzFjMCwxLjIzNC0uMjEsMy4xNTUsMS4wMiwzLjE1NSwxLjE3LDAsMS4xNi0uODM3LDEuMTYtMi4wODRWODg2LjhjMC0xLjEzNy0uMDctMS4zMy4xNi0xLjMzczAuMjMsMC4wMTUuMjMsMS4yMjRjMCwxLjEyLS4wMSwxNi44ODktMC4wMSwxNy44YTEuNDg5LDEuNDg5LDAsMCwwLDEuNTksMS42MTgsMS40NDcsMS40NDcsMCwwLDAsMS42Ni0xLjQ2OHYtOC4yYzAtLjc4MS4wMi0xLjE2LDAuMjItMS4xNnMwLjE3LDAuMzc5LjE3LDEuMTZ2OC4yYTEuNjg5LDEuNjg5LDAsMCwwLDEuNjgsMS41NDIsMS44MjMsMS44MjMsMCwwLDAsMS41LTEuNTI1YzAtMy4xMjUuMDEtMTcuMDMyLDAuMDEtMTguMDE1LDAtLjUzMy0wLjA0LTEuMjEuMTYtMS4yMXMwLjE5LDAuMTg0LjE5LDAuOTUyVjg4OS40YzAsMi4wNTUuMzIsMi41OTQsMS4xLDIuNTk0QzM3NjkuMzQsODkxLjk5MSwzNzY5LjI0LDg4OS45ODQsMzc2OS4yNCw4ODguODY2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM3NTUuMjY1IC04NzIuOTA3KSIvPgo8L3N2Zz4K"
        }
      ],
      "label": {
        "normal": {
          "show": true,
          "textStyle": {
            "color": "#18fcff",
            "fontSize": 14
          },
          "position": "left",
          "offset": [
            3,
            0
          ]
        }
      }
    }
  ]
}