[Bug] I add scatter in a iamgeUrl way into my map,but the scatter isn't reactive. The size of scatter will not change with the window's screen,and the resize()function also can't control the scatter's size.

Zzj1185 commented 2 years ago

Version

5.2.2

Link to Minimal Reproduction

No response

Steps to Reproduce

initCharts() { this.$echarts.registerMap("sh", json, {}); // console.log(this.$echarts.getMap("sh"), "注册"); //检查地图是否注册成功 this.myCharts = this.$echarts.init(document.querySelector("#custom-map")); const option = { // xAxis: [ // { // type: "value", // // data: [1, 2, 3, 4, 5], // }, // ], // yAxis: [ // { // type: "value",

    //     // data: [1, 2, 3, 4, 5],
    //   },
    // ],
    // 背景颜色
    // backgroundColor: "#404a59",
    // 提示浮窗样式
    tooltip: {
      show: true,
      trigger: "item",

      borderColor: "rgba(0, 0, 0, 0.16);",
      hideDelay: 0,
      showDelay: 0,
      triggerOn: "mousemove",
      enterable: true,
      // textStyle: {
      //   color: "#DADADA",
      //   fontSize: "12",
      //   width: 20,
      //   height: 30,
      //   overflow: "break",
      // },
    },

    // 地图配置
    geo: {
      map: "sh",
      // show: true,
      roam: false, //禁止滚轮缩放
      type: "map",
      zoom: 1.25,
      center: [106.57424926757812, 30.181786340847875],
      label: {
        // 通常状态下的样式
        normal: {
          show: true,
          textStyle: {
            color: "#191C65",
          },
        },
        // 鼠标放上去的样式
        emphasis: {
          disable: true,
          textStyle: {
            color: "#ffffff",
          },
        },
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: "rgba(255, 255, 255, 0.1)",
          borderWidth: 1,
          areaColor: "#191C65",
          // shadowColor: "rgba(128, 217, 248, 1)",
          // shadowOffsetX: -2,
          // shadowOffsetY: 2,
          // shadowBlur: 10,
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#191C65",

          borderWidth: 0,
        },
      },
    },
    series: [
      // {
      //   type: "map",
      //   mapType: "sh",
      //   geoIndex: 0, //默认情况下，map series会自己生成内部专用的geo组件。
      //   zoom: 1.25,
      //   label: {
      //     show: true,
      //     color: "#fff", //文本颜色
      //     emphasis: {
      //       //高亮
      //       // color: "#fff", //强调色
      //     },
      //   },
      //   itemStyle: {
      //     normal: {
      //       // borderColor: "#f20",
      //       // areaColor: "#191C65", //鼠标移入背景颜色
      //     },
      //     emphasis: {
      //       // areaColor: "#191C65", //鼠标移入背景颜色
      //       // color: "#f20",
      //     },
      //     // 绑定数据
      //     data: {},
      //   },
      //   markPoint: {
      //     symbol: "pin",
      //     symbolSize: 10,
      //     label: {
      //       show: true,
      //       position: "top",
      //       distance: 5,
      //       formatter: "{b}: wwww{@score}",
      //       color: "#f20f20",
      //     },
      //   },
      // },
      {
        show: true,
        type: "scatter",
        coordinateSystem: "geo", // series坐标系类型
        tooltip: {
          show: false,
        },
        symbolKeepAspect: true,
        symbol:
          "image://http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/a9d7c5a8-0343-4595-b79d-bc267680faaf.png",
        data: [[106.55599999900007812, 30.188000880847875]], //散点的坐标，自己定义一个var即可
        symbolSize:600,
        // symbolSize: function (val) {
        //   console.log(val, "val");
        //   //设置散点大小
        //   // return val[2] / (val[2] / 12);
        // },
        symbolRotate: -6,
        animation: false,
        hoverAnimation: false,
        z: 2,
      },
      {
        type: "effectScatter", //是散点图的一种
        coordinateSystem: "geo", //结合百度地图
        data: village,
        // symbolSize: function (val) {
        //   return val[2] / 10;
        // },
        symbolSize: 8,
        encode: {
          value: 2,
        },
        showEffectOn: "render", //显示效果
        // rippleEffect: {
        //   //水波涟漪效果
        //   brushType: "stroke",
        // },
        hoverAnimation: true, //鼠标放上有动画
        label: {
          formatter: "{b}",
          position: "right",
          distance: 10,
          color: "ragb(255,255,255,.6)",
          show: true,
        },
        itemStyle: {
          // color: "#8E9FFF",
          shadowBlur: 5,
          shadowColor: "#333",
          normal: {
            //加这句话是因为上面改颜色无效
            color: "#8E9FFF ", //打点的标志颜色
          },
        },
        zlevel: 1,
        tooltip: {
          backgroundColor: "#647BFF",
          padding: 10,

          textStyle: {
            color: "#fff",
          },
          formatter: (params, ticket, callback) => {
            // console.log(params);
            let template = `<div style="display: flex;">
    <img style="width:86px;height:49px;margin-right: 6px;" src="http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/caa6bfcf-e083-4635-bfa1-5a66bf82a71c.png

" alt=""/>

    <div style="display: flex; flex-direction: column; justify-content: space-between;">
        <span style="font-size: 16px;">${params.name}</span>
        <span style="font-size:12px;">${params.name}种植樱桃${params.value[2]}亩</span>
    </div>

</div>`;

            return template;
          },
          extraCssText: "border-rasius:10px",
        },
      },
      {
        type: "scatter",
        coordinateSystem: "geo", // series坐标系类型
        data: community,      
        symbol:
          "image://http://sinonc-develop-test.oss-cn-hangzhou.aliyuncs.com/7bd6cf3a-6543-4f6e-9316-bf45316f7a4d.png",
        label: {
          show: true,
          position: "left",
          fontSize: "20",
          fontWeight: "bold",
          color: "#fff",
          formatter: (params) => {
            return params.name;
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
  };
  this.myCharts.setOption(option);
},

Current Behavior

i set symbol in the url way,and set symblosize:600(after that,any screen is the same size)

Expected Behavior

i want to know how to make the scatter reactive.(scatter is the image in url way and it decripts a river and some roads)

Environment

- OS:
- Browser:Chrome
- Framework:vue@2

Any additional comments?

No response

github-actions[bot] commented 5 months ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 5 months ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

apache / echarts