echarts中使用散点scatter更改颜色却不生效的问题
在地图上增加散点显示数据：
{
name: "图标散点",
geoIndex: 0,
type: "scatter",
coordinateSystem: "geo",
symbol: "pin",
symbolSize: [40, 40],
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: 8
},
formatter(value) {
return value.data.value[2];
}
}
},
itemStyle: {
normal: {
color: "#D8BC37"
}
// emphasis: {
// borderColor: "pink",
// color: "pink"
// }
},
data: convertData(散点),
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
zlevel: 3
}
但是发现上面的代码并没有实现更改颜色，但是增加边框和emphasis都是正常的，各种找帖子，终于找到了解决办法，和造成的原因；
原因：
因为我的项目里面用到了visualMap，echarts中visualMap的优先级是最高的。
所以我们可以增加一个属性，seriesIndex，标识让它针对series中第几个元素生效，我第二个元素是散点图，所以只让他对第一个生效即可，下标0：
visualMap: {
show: true,
x: "85%",
y: "center",
splitList: [
{
start: 1, end: 500 },
{
start: 500, end: 1000 },
{
start: 1000, end: 1500 },
{
start: 1500, end: 2000 },
{
start: 2000, end: 2500 },
{
start: 2500 }
],
color: [
"#ffb43d",
"#5475f5",
"#85daef",
"#9feaa5",
"#74e2ca",
"#0074bc"
], // e6ac53 '#9fb5ea'
textStyle: {
color: "#black"
},
seriesIndex: "0"
},
参考：https://blog.csdn.net/hsany330/article/details/118699098
全部代码：
<!--
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-06-07 16:53:49
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-06-08 11:41:55
-->
<template>
<div class="mapBox">
<div id="map"></div>
</div>
</template>
<script>
import chinaJson from "./china.json";
export default {
name: "CenterMap",
data() {
return {
};
},
mounted() {
this.$echarts.registerMap("china", chinaJson);
let myChart = this.$echarts.init(document.getElementById("map"));
var 散点 = [
{
name: "广东", value: 92 },
{
name: "浙江", value: 76 },
{
name: "北京", value: 77 },
{
name: "江苏", value: 69 },
{
name: "上海", value: 67 },
{
name: "山东", value: 21 },
{
name: "安徽", value: 19 },
{
name: "福建", value: 18 },
{
name: "四川", value: 12 },
{
name: "河南", value: 11 },
{
name: "湖南", value: 11 },
{
name: "江西", value: 11 },
{
name: "湖北", value: 10 },
{
name: "天津", value: 8 },
{
name: "河北", value: 6 },
{
name: "陕西", value: 6 },
{
name: "重庆", value: 4 },
{
name: "辽宁", value: 3 },
{
name: "吉林", value: 3 },
{
name: "黑龙江", value: 2 },
{
name: "山西", value: 2 },
{
name: "贵州省", value: 2 },
{
name: "新疆", value: 2 },
{
name: "海南", value: 1 },
{
name: "云南", value: 1 },
{
name: "广西", value: 1 }
];
var convertData = function(data) {
var res = [];
var geoCoordMap = {
北京: [116.4, 40.4],
天津: [117.04, 39.52],
河北: [115.21, 38.44],
山西: [111.95, 37.65],
内蒙古: [112.17, 42.81],
辽宁: [123.42, 41.29],
吉林: [126.32, 43.38],
黑龙江: [128.34, 47.05],
上海: [121.46, 31.28],
江苏: [120.26, 32.54],
浙江: [120.15, 29.28],
安徽: [117.28, 31.86],
福建: [118.31, 26.07],
江西: [115.89, 27.97],
山东: [118.01, 36.37],
河南: [113.46, 34.25],
湖北: [112.29, 30.98],
湖南: [112.08, 27.79],
广东: [113.98, 22.82],
广西: [108.67, 23.68],
海南: [110.03, 19.33],
重庆: [107.51, 29.63],
四川: [103.36, 30.65],
贵州: [106.91, 26.67],
云南: [101.71, 24.84],
西藏: [89.13, 30.66],
陕西: [108.94, 34.46],
甘肃: [103.82, 36.05],
青海: [97.07, 35.62],
宁夏: [106.27, 36.76],
新疆: [86.61, 40.79]
};
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: [...geoCoord, ...data[i].value]
});
}
}
return res;
};
let option = {
// [
//阴影地图
geo: {
map: "china",
// label: { show: true }, //显示省份
// roam: true, //缩放
aspectScale: 1.3 /*长宽比*/,
zoom: 1,
label: {
show: false
// color: "#fff",
// fontSize: 14
},
itemStyle: {
normal: {
color: "transparent" //标志颜色
},
// areaColor: "transparent",
borderColor: "rgb(62, 142, 253)",
borderWidth: 1
},
emphasis: {
label: {
show: false },
itemStyle: {
// areaColor: "transparent"
}
},
silent: true
},
// 选中的样式
select: {
label: {
show: true, //1.国内业务布局：地图上省份的文字 最好不显示 和设计稿一致
color: "white"
// textBorderColor: selectedBorderColor,
// textBorderWidth: 1
},
itemStyle: {
// areaColor: areaColor,
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
areaColor: "#D8BC37",
// areaColor: {
// type: "radial",
// x: 0.5,
// y: 0.5,
// r: 1.5,
// colorStops: [
// {
// offset: 0,
// color: "red" // 0% 处的颜色
// },
// {
// offset: 1,
// color: "green" // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// },
borderColor: "#A4D9FF",
borderWidth: 2
}
},
// 被选中状态下的地图省份样式
//左侧小导航图标
visualMap: {
show: true,
x: "85%",
y: "center",
splitList: [
{
start: 1, end: 500 },
{
start: 500, end: 1000 },
{
start: 1000, end: 1500 },
{
start: 1500, end: 2000 },
{
start: 2000, end: 2500 },
{
start: 2500 }
],
color: [
"#ffb43d",
"#5475f5",
"#85daef",
"#9feaa5",
"#74e2ca",
"#0074bc"
], // e6ac53 '#9fb5ea'
textStyle: {
color: "#black"
},
seriesIndex: "0"
},
tooltip: {
trigger: "item",
show: true,
confine: true,
enterable: true,
alwaysShowContent: true,
borderWidth: 0,
// backgroundColor: "rgba(0,0,0,0.0)",
formatter: param => {
console.log(param, "param");
// let { name, value } = param.data;
// if (name) {
// return `name:${name}</br>value:${value}`;
// }
return param.name;
}
},
series: [
{
name: "mapOKOKOK",
map: "china",
type: "map",
roam: false,
label: {
show: true,
color: "#fff",
fontSize: 14
},
aspectScale: 1.3 /*长宽比*/,
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 0.6)",
borderWidth: 0.8,
areaColor: {
type: "linear-gradient",
x: 0,
y: 1200,
x2: 1000,
y2: 0,
colorStops: [
{
offset: 0,
color: "#009DA1" // 0% 处的颜色
},
{
offset: 1,
color: "#005B9E" // 100% 处的颜色
}
],
global: true // 缺省为 false
}
// areaColor:"red"
},
// borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
// shadowColor: "rgb(43, 56, 196)",
shadowOffsetX: 3,
shadowOffsetY: 3,
emphasis: {
// 鼠标经过的颜色
areaColor: "#389BB7",
borderWidth: 0
}
},
zlevel: 2,
data: [
{
name: "湖北", value: 30.0 },
{
name: "湖北", value: 2.0 },
{
name: "安徽", value: 1.0 },
{
name: "江苏", value: 4.0 },
{
name: "贵州", value: 4.0 },
{
name: "贵州", value: 3.0 },
{
name: "湖北", value: 12.0 },
{
name: "重庆", value: 5.0 },
{
name: "内蒙古", value: 1.0 },
{
name: "湖南", value: 17.0 },
{
name: "湖南", value: 19.0 },
{
name: "湖北", value: 1.0 },
{
name: "云南", value: 1.0 },
{
name: "辽宁", value: 1.0 },
{
name: "安徽", value: 1.0 },
{
name: "湖北", value: 3.0 },
{
name: "江苏", value: 12.0 },
{
name: "山东", value: 4.0 },
{
name: "湖南", value: 0.138333 },
{
name: "湖南", value: 12.0 },
{
name: "湖南", value: 36.0 },
{
name: "江苏", value: 5.0 },
{
name: "湖南", value: 13.0 },
{
name: "湖北", value: 5.0 },
{
name: "山东", value: 10.0 },
{
name: "重庆", value: 20.0 },
{
name: "湖南", value: 6.0 },
{
name: "江苏", value: 3.0 },
{
name: "陕西", value: 2.0 },
{
name: "贵州", value: 10.0 },
{
name: "贵州", value: 5.0 },
{
name: "陕西", value: 3.0 },
{
name: "湖南", value: 3.0 },
{
name: "贵州", value: 6.0 },
{
name: "湖南", value: 5.0 },
{
name: "山西", value: 1.0 },
{
name: "湖南", value: 13.0 },
{
name: "云南", value: 1.0 },
{
name: "湖南", value: 45.0 },
{
name: "湖南", value: 38.0 },
{
name: "湖南", value: 40.0 },
{
name: "陕西", value: 2.0 },
{
name: "贵州", value: 2.0 },
{
name: "江苏", value: 45.0 },
{
name: "湖南", value: 19.0 },
{
name: "湖南", value: 22.0 },
{
name: "江苏", value: 14.0 },
{
name: "安徽", value: 8.0 },
{
name: "湖南", value: 55.0 },
{
name: "湖南", value: 17.0 },
{
name: "湖南", value: 20.0 },
{
name: "江苏", value: 10.0 },
{
name: "湖南", value: 14.0 },
{
name: "湖北", value: 25.0 },
{
name: "湖南", value: 10.0 },
{
name: "湖南", value: 7.0 },
{
name: "贵州", value: 2.0 },
{
name: "湖南", value: 0.179167 },
{
name: "重庆", value: 2.0 },
{
name: "四川", value: 7.0 },
{
name: "云南", value: 5.0 },
{
name: "贵州", value: 5.0 },
{
name: "湖南", value: 2.0 },
{
name: "山东", value: 2.0 },
{
name: "湖北", value: 11.0 },
{
name: "湖南", value: 6.0 },
{
name: "安徽", value: 1.0 },
{
name: "湖南", value: 11.0 },
{
name: "安徽", value: 3.0 },
{
name: "湖南", value: 53.0 },
{
name: "湖南", value: 47.0 },
{
name: "湖南", value: 30.0 },
{
name: "贵州", value: 15.0 },
{
name: "江苏", value: 13.0 },
{
name: "湖南", value: 8.0 },
{
name: "湖南", value: 12.0 },
{
name: "湖南", value: 9.0 },
{
name: "安徽", value: 17.0 },
{
name: "湖北", value: 5.0 },
{
name: "湖南", value: 8.0 },
{
name: "湖南", value: 7.0 },
{
name: "陕西", value: 1.0 },
{
name: "湖北", value: 4.0 },
{
name: "辽宁", value: 9.0 },
{
name: "江苏", value: 1.0 },
{
name: "贵州", value: 13.0 },
{
name: "湖南", value: 41.0 },
{
name: "贵州", value: 10.0 },
{
name: "贵州", value: 9.0 },
{
name: "重庆", value: 6.0 },
{
name: "湖北", value: 18.0 },
{
name: "湖南", value: 14.0 },
{
name: "湖南", value: 15.0 },
{
name: "湖南", value: 15.0 },
{
name: "江苏", value: 2.0 },
{
name: "安徽", value: 5.0 },
{
name: "江苏", value: 3.0 },
{
name: "湖南", value: 14.0 },
{
name: "湖南", value: 5.0 },
{
name: "江苏", value: 3.0 },
{
name: "贵州", value: 3.0 },
{
name: "湖南", value: 12.0 },
{
name: "辽宁", value: 1.0 },
{
name: "安徽", value: 1.0 },
{
name: "湖南", value: 3.0 },
{
name: "江苏", value: 2.0 },
{
name: "江苏", value: 13.0 },
{
name: "湖南", value: 31.0 },
{
name: "湖南", value: 8.0 },
{
name: "重庆", value: 11.0 },
{
name: "安徽", value: 7.0 },
{
name: "湖南", value: 7.0 },
{
name: "江苏", value: 11.0 },
{
name: "湖北", value: 3.0 },
{
name: "湖北", value: 3.0 },
{
name: "贵州", value: 3.0 },
{
name: "北京", value: 1.0 },
{
name: "湖南", value: 6.278031 },
{
name: "湖南", value: 2.0 },
{
name: "江苏", value: 9.0 },
{
name: "安徽", value: 2.0 },
{
name: "安徽", value: 7.0 },
{
name: "湖南", value: 3.0 },
{
name: "贵州", value: 75.0 },
{
name: "四川", value: 5.0 },
{
name: "江苏", value: 1.0 },
{
name: "安徽", value: 2.0 },
{
name: "湖南", value: 4.0 },
{
name: "云南", value: 1.0 },
{
name: "湖南", value: 2.0 },
{
name: "湖南", value: 36.0 },
{
name: "湖南", value: 29.0 },
{
name: "辽宁", value: 3.0 },
{
name: "贵州", value: 2.0 },
{
name: "吉林", value: 2.0 },
{
name: "云南", value: 3.0 },
{
name: "云南", value: 8.0 },
{
name: "江苏", value: 3.0 },
{
name: "湖南", value: 34.0 },
{
name: "湖南", value: 10.0 },
{
name: "湖南", value: 0.2 },
{
name: "江苏", value: 13.0 },
{
name: "湖南", value: 14.0 },
{
name: "湖南", value: 26.0 },
{
name: "湖南", value: 17.0 },
{
name: "江苏", value: 1.0 },
{
name: "贵州", value: 11.0 },
{
name: "江苏", value: 5.0 },
{
name: "重庆", value: 1.0 },
{
name: "云南", value: 10.0 },
{
name: "重庆", value: 1.0 },
{
name: "安徽", value: 1.0 },
{
name: "湖南", value: 13.0 },
{
name: "湖南", value: 4.0 },
{
name: "湖南", value: 5.0 },
{
name: "青海", value: 7.0 },
{
name: "湖南", value: 9.0 },
{
name: "湖南", value: 35.0 },
{
name: "吉林", value: 11.0 },
{
name: "湖南", value: 97.0 },
{
name: "湖南", value: 39.0 },
{
name: "湖南", value: 18.0 },
{
name: "湖南", value: 10.0 },
{
name: "重庆", value: 1.0 },
{
name: "湖北", value: 2.0 },
{
name: "江苏", value: 6.0 },
{
name: "云南", value: 2.0 },
{
name: "湖南", value: 2.0 },
{
name: "湖北", value: 35.0 },
{
name: "湖南", value: 10.0 },
{
name: "江苏", value: 1.0 },
{
name: "四川", value: 1.0 },
{
name: "山东", value: 4.0 },
{
name: "黑龙江", value: 22.0 },
{
name: "江苏", value: 13.0 },
{
name: "陕西", value: 1.0 },
{
name: "江苏", value: 8.0 },
{
name: "四川", value: 5.0 },
{
name: "山东", value: 6.0 },
{
name: "陕西", value: 3.0 },
{
name: "云南", value: 5.0 },
{
name: "吉林", value: 2.0 },
{
name: "湖南", value: 3.0 },
{
name: "内蒙古", value: 3.0 },
{
name: "贵州", value: 7.0 },
{
name: "江苏", value: 1.0 },
{
name: "湖南", value: 13.0 },
{
name: "黑龙江", value: 1.0 },
{
name: "湖北", value: 24.0 },
{
name: "湖北", value: 30.0 },
{
name: "重庆", value: 8.0 },
{
name: "湖北", value: 13.0 },
{
name: "湖南", value: 2.0 },
{
name: "安徽", value: 7.0 },
{
name: "云南", value: 3.0 },
{
name: "贵州", value: 30.0 },
{
name: "江苏", value: 3.0 },
{
name: "安徽", value: 1.0 },
{
name: "湖南", value: 6.0 },
{
name: "湖南", value: 5.0 },
{
name: "黑龙江", value: 5.0 },
{
name: "湖南", value: 9.0 },
{
name: "湖南", value: 2.0 },
{
name: "湖北", value: 2.0 },
{
name: "湖南", value: 20.0 },
{
name: "贵州", value: 13.0 },
{
name: "贵州", value: 5.0 },
{
name: "安徽", value: 2.0 },
{
name: "云南", value: 2.0 },
{
name: "湖南", value: 32.0 },
{
name: "湖南", value: 0.606945 },
{
name: "浙江", value: 19.0 },
{
name: "湖南", value: 12.0 },
{
name: "重庆", value: 7.0 },
{
name: "湖南", value: 0.15 },
{
name: "安徽", value: 12.0 },
{
name: "湖南", value: 4.0 },
{
name: "湖南", value: 2.0 },
{
name: "重庆", value: 7.0 },
{
name: "湖南", value: 25.0 },
{
name: "安徽", value: 3.0 },
{
name: "安徽", value: 3.0 },
{
name: "陕西", value: 1.0 },
{
name: "云南", value: 5.0 },
{
name: "上海", value: 34.0 },
{
name: "江苏", value: 3.0 },
{
name: "山东", value: 2.0 },
{
name: "湖北", value: 5.0 },
{
name: "云南", value: 2.0 },
{
name: "湖北", value: 3.0 },
{
name: "云南", value: 3.0 },
{
name: "安徽", value: 11.0 },
{
name: "黑龙江", value: 7.0 },
{
name: "湖北", value: 1.0 },
{
name: "江苏", value: 33.0 },
{
name: "湖南", value: 12.0 },
{
name: "山东", value: 16.0 },
{
name: "山东", value: 2.0 },
{
name: "湖北", value: 31.0 },
{
name: "湖南", value: 5.0 },
{
name: "湖北", value: 5.0 },
{
name: "湖北", value: 12.0 },
{
name: "湖南", value: 6.0 },
{
name: "江苏", value: 13.0 },
{
name: "山东", value: 2.0 },
{
name: "重庆", value: 20.0 },
{
name: "重庆", value: 2.0 },
{
name: "青海", value: 6.0 },
{
name: "湖南", value: 23.0 },
{
name: "山东", value: 4.0 },
{
name: "湖南", value: 9.0 },
{
name: "陕西", value: 3.0 },
{
name: "安徽", value: 10.0 },
{
name: "湖北", value: 5.0 },
{
name: "贵州", value: 5.0 },
{
name: "安徽", value: 7.0 },
{
name: "贵州", value: 10.0 },
{
name: "陕西", value: 1.0 },
{
name: "湖南", value: 7.0 },
{
name: "湖南", value: 16.0 },
{
name: "湖南", value: 3.991401 },
{
name: "云南", value: 6.0 }
]
},
{
name: "图标散点",
geoIndex: 0,
type: "scatter",
coordinateSystem: "geo",
symbol: "pin",
symbolSize: [50, 50],
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: 8
},
formatter(value) {
return value.data.value[2];
}
}
},
itemStyle: {
normal: {
color: "#D8BC37"
}
// emphasis: {
// borderColor: "pink",
// color: "pink"
// }
},
data: convertData(散点),
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
// animation: false // 关闭动画(关闭后scatter点悬浮样式会失效)
zlevel: 3
}
]
};
// option.series[1].itemStyle.normal.color = "red";
myChart.setOption(option);
myChart.on("click", function(params) {
console.log("---params----", params);
});
window.addEventListener("resize", function() {
myChart.resize();
});
},
methods: {
}
};
</script>
<style lang="less" scoped>
.mapBox {
height: 100%;
#map {
width: 100%;
height: 100%;
}
}
</style>
