echarts-gl icon indicating copy to clipboard operation
echarts-gl copied to clipboard

Published 20 hours ago • verified publisher icon ecomfe

scatter_3D symbol设置为图片时，显示问题

Open zhanzeliang opened this issue 6 years ago • 14 comments

image 如图，测试过geo3D和grid3D下scatter3D都会。不知道用术语怎么说，图标边缘线条模糊，而且图片被填充了颜色。 正常的图片是这样的。 12366request

zhanzeliang avatar Feb 28 '18 14:02 zhanzeliang

遇到了同样的问题，lz的解决了吗

Lilyooo avatar May 23 '18 01:05 Lilyooo

遇到了同样的问题，lz的解决了吗

您好，你这个可以用svg的图去做，我的小旗子事这么去做的： symbol: 'path://M201.142857 58.514286v658.285714s131.657143-160.914286 336.457143-73.142857c80.457143 43.885714 153.6 109.714286 277.942857 109.714286 124.342857 0 204.8-73.142857 204.8-73.142858V43.885714s-182.857143 182.857143-409.6 29.257143C552.228571 29.257143 449.828571-14.628571 369.371429 7.314286 281.6 29.257143 201.142857 58.514286 201.142857 58.514286M54.857143 1024c-29.257143 0-51.2-21.942857-51.2-58.514286V51.2C3.657143 21.942857 25.6 0 54.857143 0s51.2 21.942857 51.2 51.2v914.285714c7.314286 36.571429-14.628571 58.514286-51.2 58.514286z',

StarryYang avatar Dec 27 '18 08:12 StarryYang

你好，请问怎么设置的图片呢

cxt19951016 avatar May 13 '22 14:05 cxt19951016

你可以使用网络图片，然后设置就OK了 参照：https://echarts.apache.org/zh/option.html#series-scatter.symbol

------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:19 @.>; @.@.>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196)

你好，请问怎么设置的图片呢

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

StarryYang avatar May 13 '22 14:05 StarryYang

你可以使用网络图片，然后设置就OK了 参照：https://echarts.apache.org/zh/option.html#series-scatter.symbol … ------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:19 @.>; @.@.>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196) 你好，请问怎么设置的图片呢 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

scatter3D这个怎么设置为图片标志呢,现在貌似设置不对

{ type: "scatter3D", coordinateSystem: 'geo3D', symbol: 'pin', symbolSize: 30, animation: true, label: { normal: { show: true, position: 'top', distance: 0, formatter: function (data) { var res = '订单量：' + '\n {img1|这段文字}' + data.name + " " + data.value[2]; return res }, textStyle: { backgroundColor: '#1ea98ba8', borderColor: '#555', borderWidth: 1, borderRadius: 5, padding: 10, fontSize: 12, color: '#fff', fontWeight: '600' } } }, data: data, },

类似这种如何实现

1652453230(1)

cxt19951016 avatar May 13 '22 14:05 cxt19951016

1.把你symbol要显示的图片拿到图片路径：如image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7 然后直接symbol：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:47 @.>; @.@.>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196)

你可以使用网络图片，然后设置就OK了 参照：https://echarts.apache.org/zh/option.html#series-scatter.symbol … ------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:19 @.>; @.@.>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196) 你好，请问怎么设置的图片呢 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

scatter3D这个怎么设置为图片标志呢,现在貌似设置不对

{ type: "scatter3D", coordinateSystem: 'geo3D', symbol: 'pin', symbolSize: 30, animation: true, label: { normal: { show: true, position: 'top', distance: 0, formatter: function (data) { var res = '订单量：' + '\n {img1|这段文字}' + data.name + " " + data.value[2]; return res }, textStyle: { backgroundColor: '#1ea98ba8', borderColor: '#555', borderWidth: 1, borderRadius: 5, padding: 10, fontSize: 12, color: '#fff', fontWeight: '600' } } }, data: data, },

类似这种如何实现

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

StarryYang avatar May 13 '22 15:05 StarryYang

我验证了目前只能用path://，用image://显示异常

zhanzeliang avatar May 13 '22 16:05 zhanzeliang

我验证了目前只能用path://，用image://显示异常

path是svg的path么？

cxt19951016 avatar May 13 '22 16:05 cxt19951016

1.把你symbol要显示的图片拿到图片路径：如image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7 然后直接symbol：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7' … ------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:47 @.>; @.@.>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196) 你可以使用网络图片，然后设置就OK了 参照：https://echarts.apache.org/zh/option.html#series-scatter.symbol … ------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:19 @.>; @.@.>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196) 你好，请问怎么设置的图片呢 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.> scatter3D这个怎么设置为图片标志呢,现在貌似设置不对 { type: "scatter3D", coordinateSystem: 'geo3D', symbol: 'pin', symbolSize: 30, animation: true, label: { normal: { show: true, position: 'top', distance: 0, formatter: function (data) { var res = '订单量：' + '\n {img1|这段文字}' + data.name + " " + data.value[2]; return res }, textStyle: { backgroundColor: '#1ea98ba8', borderColor: '#555', borderWidth: 1, borderRadius: 5, padding: 10, fontSize: 12, color: '#fff', fontWeight: '600' } } }, data: data, }, 类似这种如何实现 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.>

现在显示不了，请问有什么别的办法没？

cxt19951016 avatar May 14 '22 06:05 cxt19951016

path是svg绘制路径坐标啦

------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月14日(星期六) 凌晨0:52 @.>; @.@.>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196)

我验证了目前只能用path://，用image://显示异常

path是svg的path么？

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

StarryYang avatar May 15 '22 08:05 StarryYang

你可以使用网络图片，然后设置就OK了 参照：https://echarts.apache.org/zh/option.html#series-scatter.symbol … ------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:19 _@**._>; _@.@._>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196) 你好，请问怎么设置的图片呢 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: _@_.*>

scatter3D这个怎么设置为图片标志呢,现在貌似设置不对

{ type: "scatter3D", coordinateSystem: 'geo3D', symbol: 'pin', symbolSize: 30, animation: true, label: { normal: { show: true, position: 'top', distance: 0, formatter: function (data) { var res = '订单量：' + '\n {img1|这段文字}' + data.name + " " + data.value[2]; return res }, textStyle: { backgroundColor: '#1ea98ba8', borderColor: '#555', borderWidth: 1, borderRadius: 5, padding: 10, fontSize: 12, color: '#fff', fontWeight: '600' } } }, data: data, },

类似这种如何实现

1652453230(1)

大兄弟你这个效果现在咋做的， 我也有这个需求 image

pengyinghao avatar Aug 03 '22 09:08 pengyinghao

遇到了同样的问题，lz的解决了吗

您好，你这个可以用svg的图去做，我的小旗子事这么去做的： symbol: 'path://M201.142857 58.514286v658.285714s131.657143-160.914286 336.457143-73.142857c80.457143 43.885714 153.6 109.714286 277.942857 109.714286 124.342857 0 204.8-73.142857 204.8-73.142858V43.885714s-182.857143 182.857143-409.6 29.257143C552.228571 29.257143 449.828571-14.628571 369.371429 7.314286 281.6 29.257143 201.142857 58.514286 201.142857 58.514286M54.857143 1024c-29.257143 0-51.2-21.942857-51.2-58.514286V51.2C3.657143 21.942857 25.6 0 54.857143 0s51.2 21.942857 51.2 51.2v914.285714c7.314286 36.571429-14.628571 58.514286-51.2 58.514286z',

遇到了同样的问题，lz的解决了吗

您好，你这个可以用svg的图去做，我的小旗子事这么去做的： symbol: 'path://M201.142857 58.514286v658.285714s131.657143-160.914286 336.457143-73.142857c80.457143 43.885714 153.6 109.714286 277.942857 109.714286 124.342857 0 204.8-73.142857 204.8-73.142858V43.885714s-182.857143 182.857143-409.6 29.257143C552.228571 29.257143 449.828571-14.628571 369.371429 7.314286 281.6 29.257143 201.142857 58.514286 201.142857 58.514286M54.857143 1024c-29.257143 0-51.2-21.942857-51.2-58.514286V51.2C3.657143 21.942857 25.6 0 54.857143 0s51.2 21.942857 51.2 51.2v914.285714c7.314286 36.571429-14.628571 58.514286-51.2 58.514286z',

大小如何设置呢，symbolSize设置到一定大小后就不能继续放大了

linhexs avatar Dec 22 '22 04:12 linhexs

你可以使用网络图片，然后设置就OK了 参照：https://echarts.apache.org/zh/option.html#series-scatter.symbol … ------------------ 原始邮件 ------------------ 发件人: "ecomfe/echarts-gl" @.>; 发送时间: 2022年5月13日(星期五) 晚上10:19 _@**._>; _@.@._>; 主题: Re: [ecomfe/echarts-gl] scatter_3D symbol设置为图片时，显示问题 (#196) 你好，请问怎么设置的图片呢 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: _@_.*>

scatter3D这个怎么设置为图片标志呢,现在貌似设置不对 { type: "scatter3D", coordinateSystem: 'geo3D', symbol: 'pin', symbolSize: 30, animation: true, label: { normal: { show: true, position: 'top', distance: 0, formatter: function (data) { var res = '订单量：' + '\n {img1|这段文字}' + data.name + " " + data.value[2]; return res }, textStyle: { backgroundColor: '#1ea98ba8', borderColor: '#555', borderWidth: 1, borderRadius: 5, padding: 10, fontSize: 12, color: '#fff', fontWeight: '600' } } }, data: data, }, 类似这种如何实现 1652453230(1)

大兄弟你这个效果现在咋做的， 我也有这个需求 image

兄弟你解决了吗

QixianX avatar May 04 '23 06:05 QixianX

如图，测试过geo3D和grid3D下scatter3D都会。不知道用术语怎么说，图标边缘线条模糊，而且图片被填充了颜色。 正常的图片是 貌似是不支持啊 只支持path 路径的 svg 和png 这样的base64的都不支持 貌似是

floki2020 avatar May 07 '23 06:05 floki2020