You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/05/02 11:19:02 UTC
[GitHub] hl-stone opened a new issue #8264: echarts 4.04 视觉映射后，导致散点图（effectScatter） 无法设置 itemStyle > color
hl-stone opened a new issue #8264: echarts 4.04 视觉映射后，导致散点图（effectScatter） 无法设置 itemStyle > color
URL: https://github.com/apache/incubator-echarts/issues/8264
<!--
为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
-->
### One-line summary [问题简述]
echarts 4.04 视觉映射后，导致散点图（effectScatter） 无法设置 itemStyle > color
### Version & Environment [版本及环境]
+ ECharts version [ECharts 版本]: echarts 4.04
+ Browser version [浏览器类型和版本]: Chrome 66.0.3359.117
+ OS Version [操作系统类型和版本]:win10 64位
### Expected behaviour [期望结果]
散点图颜色可以自定义
### ECharts option [ECharts配置项]
<!-- Copy and paste your 'echarts option' here. -->
<!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
```javascript
// 国家颜色映射
var colorMapData = [{
name: "中国",
value: 1
}, //亚洲
{
name: "朝鲜",
value: 1
},
{
name: "蒙古",
value: 1
},
{
name: "越南",
value: 1
},
{
name: "泰国",
value: 1
},
{
name: "柬埔寨",
value: 1
},
{
name: "尼泊尔",
value: 1
},
{
name: "缅甸",
value: 1
},
{
name: "印度",
value: 1
},
{
name: "斯里兰卡",
value: 1
},
{
name: "巴基斯坦",
value: 1
},
{
name: "塔吉克斯坦",
value: 1
},
{
name: "吉尔吉斯斯坦",
value: 1
},
{
name: "乌兹别克斯坦",
value: 1
},
{
name: "土库曼斯坦",
value: 1
},
{
name: "哈萨克斯坦",
value: 1
},
{
name: "老挝",
value: 1
},
{
name: "阿富汗",
value: 1
},
{
name: "菲律宾",
value: 1
},
{
name: "新加坡",
value: 5
},
{
name: "印尼",
value: 2
},
{
name: "韩国",
value: 1
},
{
name: "黎巴嫩",
value: 3
},
{
name: "伊拉克",
value: 1
},
{
name: "孟加拉国",
value: 1
},
{
name: "伊朗",
value: 1
},
{
name: "土耳其",
value: 1
},
{
name: "叙利亚",
value: 1
},
{
name: "阿联酋",
value: 1
},
{
name: "马来西亚",
value: 1
},
{
name: "日本",
value: 1
},
{
name: "以色列",
value: 1
},
{
name: "卡塔尔",
value: 1
},
{
name: "巴林",
value: 5
},
{
name: "沙特阿拉伯",
value: 1
},
{
name: "亚美尼亚",
value: 3
},
{
name: "科威特",
value: 1
},
{
name: "塞浦路斯",
value: 3
},
{
name: "阿曼",
value: 1
},
{
name: "格鲁吉亚",
value: 3
},
{
name: "阿塞拜疆",
value: 1
},
{
name: "文莱",
value: 5
},
{
name: "不丹",
value: 1
},
{
name: "约旦",
value: 1
},
{
name: "也门",
value: 1
},
{
name: "东帝汶",
value: 1
},
{
name: "卢旺达",
value: 25
}, //非洲
{
name: "布隆迪",
value: 25
},
{
name: "乌干达",
value: 25
},
{
name: "埃塞俄比亚",
value: 25
},
{
name: "马达加斯加",
value: 25
},
{
name: "海地",
value: 25
},
{
name: "肯尼亚",
value: 25
},
{
name: "索马里",
value: 25
},
{
name: "厄立特里亚",
value: 25
},
{
name: "布基纳法索",
value: 25
},
{
name: "马拉维",
value: 25
},
{
name: "埃及",
value: 25
},
{
name: "塞拉利昂",
value: 25
},
{
name: "坦桑尼亚",
value: 25
},
{
name: "尼日利亚",
value: 25
},
{
name: "尼日尔",
value: 25
},
{
name: "毛里塔尼亚",
value: 25
},
{
name: "喀麦隆",
value: 25
},
{
name: "贝宁",
value: 25
},
{
name: "摩洛哥",
value: 25
},
{
name: "马里",
value: 25
},
{
name: "刚果民主共和国",
value: 25
},
{
name: "几内亚",
value: 25
},
{
name: "利比里亚",
value: 25
},
{
name: "多哥",
value: 25
},
{
name: "毛里求斯",
value: 25
},
{
name: "莫桑比克",
value: 25
},
{
name: "阿尔及利亚",
value: 25
},
{
name: "斯威士兰",
value: 25
},
{
name: "乍得",
value: 25
},
{
name: "塞内加尔",
value: 25
},
{
name: "津巴布韦",
value: 25
},
{
name: "科特迪瓦",
value: 25
},
{
name: "赞比亚",
value: 25
},
{
name: "突尼斯",
value: 25
},
{
name: "加纳",
value: 25
},
{
name: "中非共和国",
value: 25
},
{
name: "安哥拉",
value: 25
},
{
name: "冈比亚",
value: 25
},
{
name: "刚果共和国",
value: 25
},
{
name: "苏丹",
value: 25
},
{
name: "加蓬",
value: 25
},
{
name: "利比亚",
value: 25
},
{
name: "南非",
value: 25
},
{
name: "纳米比亚",
value: 25
},
{
name: "博茨瓦纳",
value: 25
},
{
name: "南苏丹",
value: 25
},
{
name: "索马里兰",
value: 25
},
{
name: "赤道几内亚",
value: 25
},
{
name: "几内亚比绍",
value: 25
},
{
name: "西撒哈拉",
value: 25
},
{
name: "莱索托",
value: 25
},
{
name: "吉布提",
value: 25
},
{
name: "俄罗斯",
value: 15
}, //欧洲
{
name: "波兰",
value: 15
},
{
name: "希腊",
value: 15
},
{
name: "马其顿",
value: 15
},
{
name: "阿尔巴尼亚",
value: 15
},
{
name: "西班牙",
value: 15
},
{
name: "克罗地亚",
value: 15
},
{
name: "瑞士",
value: 15
},
{
name: "英国",
value: 15
},
{
name: "爱尔兰",
value: 15
},
{
name: "意大利",
value: 15
},
{
name: "荷兰",
value: 15
},
{
name: "黑山",
value: 15
},
{
name: "斯洛文尼亚",
value: 15
},
{
name: "德国",
value: 15
},
{
name: "卢森堡",
value: 15
},
{
name: "葡萄牙",
value: 15
},
{
name: "塞尔维亚",
value: 15
},
{
name: "法国",
value: 15
},
{
name: "奥地利",
value: 15
},
{
name: "捷克共和国",
value: 15
},
{
name: "斯洛伐克",
value: 15
},
{
name: "拉脱维亚",
value: 15
},
{
name: "挪威",
value: 15
},
{
name: "比利时",
value: 15
},
{
name: "丹麦",
value: 15
},
{
name: "匈牙利",
value: 15
},
{
name: "瑞典",
value: 15
},
{
name: "罗马尼亚",
value: 15
},
{
name: "保加利亚",
value: 15
},
{
name: "立陶宛",
value: 15
},
{
name: "爱沙尼亚",
value: 15
},
{
name: "白俄罗斯",
value: 15
},
{
name: "摩尔多瓦",
value: 15
},
{
name: "芬兰",
value: 15
},
{
name: "乌克兰",
value: 15
},
{
name: "科索沃",
value: 15
},
{
name: "波黑",
value: 15
},
{
name: "哥斯达黎加",
value: 32
}, //北美洲
{
name: "萨尔瓦多",
value: 32
},
{
name: "多米尼加",
value: 32
},
{
name: "危地马拉",
value: 32
},
{
name: "洪都拉斯",
value: 32
},
{
name: "巴拿马",
value: 32
},
{
name: "古巴",
value: 32
},
{
name: "牙买加",
value: 32
},
{
name: "墨西哥",
value: 32
},
{
name: "波多黎各",
value: 32
},
{
name: "特立尼达和多巴哥",
value: 32
},
{
name: "伯利兹",
value: 32
},
{
name: "加拿大",
value: 32
},
{
name: "美国",
value: 32
},
{
name: "巴哈马",
value: 32
},
{
name: "格陵兰",
value: 32
},
{
name: "哥伦比亚",
value: 32
}, //南美洲
{
name: "尼加拉瓜",
value: 32
},
{
name: "厄瓜多尔",
value: 32
},
{
name: "秘鲁",
value: 32
},
{
name: "委内瑞拉",
value: 32
},
{
name: "玻利维亚",
value: 32
},
{
name: "巴西",
value: 32
},
{
name: "智利",
value: 32
},
{
name: "苏里南",
value: 32
},
{
name: "乌拉圭",
value: 32
},
{
name: "巴拉圭",
value: 32
},
{
name: "圭亚那",
value: 32
},
{
name: "阿根廷",
value: 32
},
{
name: "澳大利亚",
value: 7
}, //大洋洲
{
name: "巴布亚新几内亚",
value: 7
},
{
name: "斐济",
value: 7
},
{
name: "新喀里多尼亚",
value: 7
},
{
name: "新西兰",
value: 7
},
{
name: "北马里亚纳",
value: 7
}
];
// 某类资源Top5国家经纬度
// 一带一路国家路线
var oborData = {
"regions": [{
"name": "西安",
"value": [108.94819, 34.351799],
"symbolSize": 2,
"itemStyle": {
"normal": {
"color": "#000"
}
}
}, {
"name": "兰州",
"value": [103.838799, 36.066535]
}, {
"name": "乌鲁木齐",
"value": [87.60834, 43.831804]
},
{
"name": "阿拉木图",
"value": [77.002105, 43.276609]
},
{
"name": "北海",
"value": [109.119632, 21.491948]
}, {
"name": "海口",
"value": [110.197895, 20.052472]
}, {
"name": "吉隆坡",
"value": [101.707542, 3.20636]
}
],
"moveLines": [{
"fromName": "西安",
"toName": "兰州",
"coords": [
[108.94819, 34.351799],
[103.838799, 36.066535]
]
},
{
"fromName": "兰州",
"toName": "乌鲁木齐",
"coords": [
[103.838799, 36.066535],
[87.60834, 43.831804]
]
},
{
"fromName": "乌鲁木齐",
"toName": "阿拉木图",
"coords": [
[87.60834, 43.831804],
[77.002105, 43.276609]
]
},
{
"fromName": "北海",
"toName": "海口",
"coords": [
[109.119632, 21.491948],
[110.197895, 20.052472]
]
},
{
"fromName": "海口",
"toName": "吉隆坡",
"coords": [
[110.197895, 20.052472],
[101.707542, 3.20636]
]
}
]
};
var option = {
visualMap: {
type: 'piecewise',
min: 1,
max: 5,
pieces: [{
gt: 40
}, // (41, Infinity] 一带一路
{
gt: 30,
lte: 40
}, // (31, 40] 北、南美
{
gt: 20,
lte: 30
}, // (21, 30] 非洲
{
gt: 10,
lte: 20
}, // (11, 20] 欧洲
{
gt: 5,
lte: 10
}, // (6, 10] 大洋洲
{
lt: 5
} // (-Infinity, 5) 亚洲
],
text: ['High', 'Low'],
inRange: {
color: ['#8ff202', '#e9e9eb', '#004fed', '#01e098', '#00deeb', '#ffdc7b']
},
show: false
},
geo: {
show: true,
type: 'map',
map: 'world',
roam: true,
zoom: 1,
nameMap: nameMap,
scaleLimit: {
min: 1,
max: 3
},
selectedMode: 'single',
label: {
normal: {
show: false,
color: '#fff'
},
emphasis: {
show: true,
color: '#ff5400',
fontSize: 22,
fontWeight: 'bold'
}
},
itemStyle: {
normal: {
areaColor: '#02dce3',
borderColor: '#017688'
},
emphasis: {
areaColor: '#ffdc7b'
}
}
},
series: [{
name: 'mapBg',
type: 'map',
map: 'world',
geoIndex: 0,
roam: true,
selectedMode: 'single',
nameMap: nameMap,
data: colorMapData
}, {
name: '一带一路点',
type: 'effectScatter',
coordinateSystem: 'geo',
symbol: 'circle',
zlevel: 3,
rippleEffect: {
brushType: 'stroke',
period: 5,
scale: 10
},
label: {
show: true,
color: '#fff',
position: 'right',
formatter: '{b}'
},
symbolSize: 3,
itemStyle: {
normal: {
color: '#000'
}
},
data: oborData.regions
}, {
name: '一带一路线',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true,
effect: {
show: true,
constantSpeed: 15,
symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 5,
trailLength: 0,
color: '#fd3a24',
delay: 200
},
lineStyle: {
normal: {
color: '#32abff',
width: 1.5,
opacity: 0.8,
curveness: 0.2
}
},
data: oborData.moveLines
}]
};
```
### Other comments [其他信息]
<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
可以参考此例子，加上视觉映射就能复现问题
http://gallery.echartsjs.com/editor.html?c=xBkrP1lbqG
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org