echarts配置里颜色只能修改单个地图块的颜色,改变整体的有两个做法:
1.获取每个地图块方向和渐变色的值,每个单独写。
2.写两个地图,下面一层用不包含子区域的地图,上层的地图用透明色。
我用的第二种方法,具体如下:
先准备杭州市整体区域的json文件,和一个包含杭州各个区的json文件
地图json文件下载传送门
先引入需要的文件
import geoJson from "./hangzhou.json";
import hzJson from "./hz.json";
var echarts = require("echarts/lib/echarts.js");
methods方法里
if (this.myChart) {
this.myChart.dispose(document.getElementById("hzChart"));
}
this.myChart = echarts.init(document.getElementById("hzChart"));
this.mapData = mapData; // 各个区要展示的数据
echarts.registerMap("hangzhou", geoJson);
echarts.registerMap("hz", hzJson);
const option = {
tooltip: { // 悬浮展示数据的框框
trigger: "item",
backgroundColor: "rgba(49, 97, 171, 0.75)",
borderColor: "rgba(127, 179, 255, 0.75)",
borderWeight: 3,
padding: 15,
formatter: (params) => {
const css =
"margin-bottom:8px;color: #FFF600;min-width:80px;font-size: 21px;";
const text = `
<p style="text-align: center; ${css}">${params.name}</p>
<p style="${css}">xx数:${params?.data?.Num || 0}</p>
<p style="${css}">xx数:${params?.data?.HanNum || 0}</p>
`;
return text;
},
},
geo: [
// 底层 不包含子区域的地图,除了渐变色应该也能引入图片背景,还没有试过
{
map: "hz",
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: {
//地图色
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: "RGBA(12, 93, 176, 0.5)", // 0% 处的颜色
},
{
offset: 0,
color: "RGBA(38, 255, 228, 0.4)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
shadowColor: "rgb(58,115,192)",
shadowOffsetX: 2,
shadowOffsetY: 5,
borderColor: "RGBA(146, 255, 246, 0)",
borderWidth: 1,
},
},
},
],
series: [
//上面第二层主要操作的地图
{
type: "map",
roam: false,
mapType: "hangzhou", // 自定义扩展图表类型
map: "hangzhou", // 使用
zoom: 1.1,
label: {
normal: {
show: true,
textStyle: {
// 地图上的地名
color: "rgba(126, 233, 254, 1)", // 字体颜色
fontSize: 16,
fontWeight: "700",
fontFamily: "FZZhengHeiS-B-GB",
},
},
},
select: {
// 点击后鼠标离开样式
label: {
color: "rgba(255, 246, 0, 1)", // 子区域字体颜色
},
itemStyle: {
areaColor: "RGBA(18, 105, 167, 0.7)", // 上层地图面的颜色
},
},
itemStyle: { 默认的样式
normal: {
areaColor: "RGBA(20, 103, 183, 0)", // 上层地图面的颜色 透明度0不显示
borderColor: "RGBA(146, 255, 246, 0.3)", // 上层地图线条的颜色
borderWidth: 1,
shadowBlur: 0,
color: "rgba(255, 246, 0, 1)", // 字体颜色
},
emphasis: {
areaColor: "RGBA(18, 105, 167, 0.7)", // 鼠标悬浮地图面的颜色
label: {
show: true,
color: "rgba(255, 246, 0, 1)", // 字体颜色
},
},
},
data: mapData,
},
],
};
this.myChart.setOption(option);