apache
[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.
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
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] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
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!