Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] seriesId not working in legend in scatter map chart #910

Closed
youngwinds opened this issue Sep 12, 2023 · 0 comments
Closed

[Bug] seriesId not working in legend in scatter map chart #910

youngwinds opened this issue Sep 12, 2023 · 0 comments
Assignees
@kkxxkk2019
Labels
bp bug Something isn't working
Milestone
v1.4.0

Comments

@youngwinds
Copy link
Contributor

youngwinds commented Sep 12, 2023 •
edited

seriesId not working, but seriesIndex work well.

    const spec = {
      type: "common",
      series: [
        {
          type: "map",
          area: {
            style: {
              fill: "#f3f3f3",
            },
            state: {
              hover: {
                cursor: "pointer",
                fillOpacity: 0.8,
                stroke: "#58595B",
                lineWidth: 1,
                zIndex: 500,
              },
              selected: {
                cursor: "pointer",
                fillOpacity: 1,
                stroke: "#58595B",
                lineWidth: 1,
              },
            },
          },
          nameField: "230912153223024",
          nameProperty: "id",
          url: "http://localhost:3003/aeolus/api/v3/geo/geoJson?&scope=CHN-PROVINCE",
          map: "http://localhost:3003/aeolus/api/v3/geo/geoJson?&scope=CHN-PROVINCE",
          mapOption: {
            type: "topojson",
            object: "object",
          },
          seriesField: "230912153223034",
          nameMap: {
            "CHN-SHANGHAI": "上海",
            "CHN-YUNNAN": "云南",
            "CHN-NEIMENGGU": "内蒙古",
            "CHN-BEIJING": "北京",
            "CHN-JILIN": "吉林",
            "CHN-SICHUAN": "四川",
            "CHN-TIANJIN": "天津",
            "CHN-NINGXIA": "宁夏",
            "CHN-ANHUI": "安徽",
            "CHN-SHANDONG": "山东",
            "CHN-SHANXI": "山西",
            "CHN-GUANGDONG": "广东",
            "CHN-GUANGXI": "广西",
            "CHN-XINJIANG": "新疆",
            "CHN-JIANGSU": "江苏",
            "CHN-JIANGXI": "江西",
            "CHN-HEBEI": "河北",
            "CHN-HENAN": "河南",
            "CHN-ZHEJIANG": "浙江",
            "CHN-HAINAN": "海南",
            "CHN-HUBEI": "湖北",
            "CHN-HUNAN": "湖南",
            "CHN-GANSU": "甘肃",
            "CHN-FUJIAN": "福建",
            "CHN-XIZANG": "西藏自治区",
            "CHN-GUIZHOU": "贵州",
            "CHN-LIAONING": "辽宁",
            "CHN-CHONGQING": "重庆",
            "CHN-SHAANXI": "陕西",
            "CHN-QINGHAI": "青海",
            "CHN-HEILONGJIANG": "黑龙江",
          },
          label: {
            visible: false,
            overlap: {
              hideOnHit: true,
            },
            style: {
              fontSize: 12,
              zIndex: 100,
              fill: "#363839",
              stroke: "rgba(255, 255, 255, 0.8)",
              strokeOpacity: 1,
              lineWidth: 2,
            },
            clampForce: true,
            limit: "",
            position: "outside",
          },
          hover: {
            enable: true,
          },
          select: {
            enable: true,
          },
          point: {},
          seriesMark: "point",
          padding: 0,
          region: [
            {
              clip: true,
            },
          ],
          background: "rgba(255, 255, 255, 0)",
          animation: false,
        },
        {
          id: "scatter",
          type: "scatter",
          xField: "230912153223024",
          yField: "230912153223014",
          sizeField: "230912153223014",
          seriesField: "230912153223034",
          point: {
            style: {
              fill: {
                scale: "scatterMapPointColorScale",
                field: "230912153223034",
              },
              fillOpacity: 0.9,
              lineWidth: 0,
            },
            state: {
              hover: {
                cursor: "pointer",
                fillOpacity: 0.8,
                stroke: "#58595B",
                lineWidth: 1,
                zIndex: 500,
              },
            },
          },
          size: {
            type: "linear",
            range: [3.5449077018110318, 56.71852322897651],
          },
          hover: {
            enable: true,
          },
          select: {
            enable: true,
          },
          seriesMark: "point",
          padding: 0,
          region: [
            {
              clip: true,
            },
          ],
          background: "rgba(255, 255, 255, 0)",
          animation: false,
        },
      ],
      map: "http://localhost:3003/aeolus/api/v3/geo/geoJson?&scope=CHN-PROVINCE",
      url: "http://localhost:3003/aeolus/api/v3/geo/geoJson?&scope=CHN-PROVINCE",
      mapOption: {
        type: "topojson",
        object: "object",
      },
      center: null,
      region: [
        {
          coordinate: "geo",
          roam: true,
          zoomLimit: {
            min: 0,
            max: 100,
          },
          projection: {
            zoom: 1,
            center: null,
          },
        },
      ],
      data: [
        {
          id: "data",
          values: [
            {
              "230912153223014": "-107603.01941305399",
              "230912153223024": "江苏",
              "230912153223034": "华东",
            },
            {
              "230912153223014": "-132032.34773816913",
              "230912153223024": "湖北",
              "230912153223034": "中南",
            },
            {
              "230912153223014": "18998.42001771927",
              "230912153223024": "贵州",
              "230912153223034": "西南",
            },
            {
              "230912153223014": "385463.00792324543",
              "230912153223024": "山东",
              "230912153223034": "华东",
            },
            {
              "230912153223014": "117704.09058022499",
              "230912153223024": "天津",
              "230912153223034": "华北",
            },
            {
              "230912153223014": "23933.79118156433",
              "230912153223024": "海南",
              "230912153223034": "中南",
            },
            {
              "230912153223014": "257172.0618750155",
              "230912153223024": "黑龙江",
              "230912153223034": "地区-dongbei",
            },
            {
              "230912153223014": "64431.75177577138",
              "230912153223024": "重庆",
              "230912153223034": "西南",
            },
            {
              "230912153223014": "12277.299978733063",
              "230912153223024": "青海",
              "230912153223034": "西北",
            },
            {
              "230912153223014": "47807.06022775173",
              "230912153223024": "江西",
              "230912153223034": "华东",
            },
            {
              "230912153223014": "-168038.7239317",
              "230912153223024": "辽宁",
              "230912153223034": "地区-dongbei",
            },
            {
              "230912153223014": "107063.39007788897",
              "230912153223024": "山西",
              "230912153223034": "华北",
            },
            {
              "230912153223014": "149028.80988395214",
              "230912153223024": "安徽",
              "230912153223034": "华东",
            },
            {
              "230912153223014": "172031.6850079298",
              "230912153223024": "河北",
              "230912153223034": "华北",
            },
            {
              "230912153223014": "-89487.52344161272",
              "230912153223024": "四川",
              "230912153223034": "西南",
            },
            {
              "230912153223014": "142601.731725201",
              "230912153223024": "福建",
              "230912153223034": "华东",
            },
            {
              "230912153223014": "121650.08878350258",
              "230912153223024": "上海",
              "230912153223034": "华东",
            },
            {
              "230912153223014": "8537.619744062424",
              "230912153223024": "宁夏",
              "230912153223034": "西北",
            },
            {
              "230912153223014": "15788.331855773926",
              "230912153223024": "海南",
              "230912153223034": "西南",
            },
            {
              "230912153223014": "199528.67920143902",
              "230912153223024": "河南",
              "230912153223034": "中南",
            },
            {
              "230912153223014": "86639.16781044006",
              "230912153223024": "云南",
              "230912153223034": "西南",
            },
            {
              "230912153223014": "14606.06029844284",
              "230912153223024": "新疆",
              "230912153223034": "西北",
            },
            {
              "230912153223014": "-131728.99608793855",
              "230912153223024": "浙江",
              "230912153223034": "华东",
            },
            {
              "230912153223014": "1266.5800173282623",
              "230912153223024": "西藏自治区",
              "230912153223034": "西南",
            },
            {
              "230912153223014": "91961.93995001912",
              "230912153223024": "北京",
              "230912153223034": "华北",
            },
            {
              "230912153223014": "-57707.88812363148",
              "230912153223024": "内蒙古",
              "230912153223034": "华北",
            },
            {
              "230912153223014": "337994.9930600375",
              "230912153223024": "广东",
              "230912153223034": "中南",
            },
            {
              "230912153223014": "105814.68778556585",
              "230912153223024": "陕西",
              "230912153223034": "西北",
            },
            {
              "230912153223014": "-42682.19228865206",
              "230912153223024": "甘肃",
              "230912153223034": "西北",
            },
            {
              "230912153223014": "84724.26922267675",
              "230912153223024": "广西",
              "230912153223034": "中南",
            },
            {
              "230912153223014": "153058.17127805948",
              "230912153223024": "吉林",
              "230912153223034": "地区-dongbei",
            },
            {
              "230912153223014": "156735.92889063805",
              "230912153223024": "湖南",
              "230912153223034": "中南",
            },
          ],
          fields: {
            "230912153223014": {
              alias: "利润",
            },
            "230912153223024": {
              alias: "省/自治区",
            },
            "230912153223034": {
              alias: "地区",
              domain: ["华东", "中南", "西南", "华北", "地区-dongbei", "西北"],
              sortIndex: 0,
            },
          },
        },
      ],
      scales: [
        {
          id: "scatterMapPointColorScale",
          domain: [
            {
              dataId: "data",
              fields: ["230912153223034"],
            },
          ],
          type: "ordinal",
          field: "230912153223034",
          range: [
            "#009db5",
            "#f2b823",
            "#eb7006",
            "#1f5273",
            "#3da241",
            "#77bfc8",
          ],
        },
      ],
      legends: [
        {
          type: "size",
          title: {
            text: "利润",
            textStyle: {
              fontSize: 12,
              fill: "#6F6F6F",
            },
            space: 0,
          },
          margin: {
            left: 8,
            right: 8,
          },
          id: "legend",
          orient: "bottom",
          position: "start",
          layoutType: "normal",
          visible: true,
          field: ["230912153223014"],
          layoutLevel: 70,
          maxHeight: 130,
          width: 100,
          track: {
            style: {
              fill: "rgba(20,20,20,0.1)",
            },
          },
          rail: {
            width: 200,
          },
          handler: {
            style: {
              symbolType: "M0,6L-3.5,2.5\n    v-5\n    h7\n    v5\n    Z",
              size: 8,
              outerBorder: {
                stroke: "#AEB8C6",
                lineWidth: 1,
                strokeOpacity: 0.5,
              },
            },
          },
          handlerText: {
            style: {
              maxLineWidth: 50,
              fontSize: 12,
              fill: "#6F6F6F",
            },
          },
          padding: {
            top: 16,
            bottom: 0,
            left: 0,
            right: 0,
          },
          background: {
            visible: true,
            style: {
              fill: "#fff",
              fillOpacity: 0.4,
              padding: {
                top: 6,
                bottom: 4,
              },
            },
          },
        },
        {
          type: "discrete",
          id: "legend",
          // seriesIndex: 1,
          seriesId: 'scatter',
          orient: "bottom",
          position: "start",
          layoutType: "normal",
          visible: true,
          maxRow: 2,
          title: {
            textStyle: {
              fontSize: 12,
              fill: "#6F6F6F",
            },
          },
          layoutLevel: 50,
          item: {
            focus: true,
            focusIconStyle: {
              size: 14,
            },
            maxWidth: 400,
            spaceRow: 0,
            spaceCol: 0,
            padding: {
              top: 1,
              bottom: 1,
              left: 1,
              right: 1,
            },
            background: {
              visible: false,
              style: {
                fillOpacity: 0.001,
              },
            },
            label: {
              style: {
                fontSize: 12,
                fill: "#6F6F6F",
              },
            },
            shape: {
              style: {
                lineWidth: 0,
                symbolType: "square",
              },
            },
          },
          pager: {
            layout: "horizontal",
            padding: 0,
            textStyle: {},
            space: 0,
            handler: {
              preShape: "triangleLeft",
              nextShape: "triangleRight",
              style: {},
              state: {
                disable: {},
              },
            },
          },
          padding: {
            top: 16,
            bottom: 0,
            left: 0,
            right: 0,
          },
          background: {
            visible: true,
            style: {
              fill: "#fff",
              fillOpacity: 0.4,
              padding: {
                top: 6,
                bottom: 4,
              },
            },
          },
        },
      ],
      tooltip: {
        handler: {},
      },
      hash: "b6fed4dae9e41b80464b77c45e637186",
    };
    VChart.registerMap(spec.map, MAP_DATA, spec.mapOption);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkxxkk2019 kkxxkk2019

Labels
bp bug Something isn't working
Projects
None yet
Milestone
v1.4.0
Development

No branches or pull requests
2 participants
@youngwinds @kkxxkk2019