地图万能模板+地图配置+全国数据+地图重绘
0. echarts图表只能在mounted生命周期函数调用，created钩子中页面还没挂载
1、样例
that.chart0 = this.$echarts.init(document.getElementById("map"));
that.$echarts.registerMap("城市名称", require("需要引入的json文件"));
$.ajax({
cache: false,
type: "get",
success: function (data) {
window.dataList = [];
let option0 = {
layoutCenter: ["50%", "43%"], //距离左右，上下距离的百分比
layoutSize: "68%", //map百分比大小
tooltip: {
//map标题
triggerOn: "click",
formatter: function (e, t, n) {
return 0.5 == e.value
? e.name + "：有疑似病例"
: e.seriesName + "<br />" + e.name + "：" + e.value;
},
},
visualMap: {
//视觉映射组件
min: 0,
max: 1000,
left: 36,
bottom: 240,
showLabel: !0,
//text: ["高", "低"],
textStyle: {
color: "rgb(58,227,228)",
},
pieces: [
//用于鉴别数据的高低风险，以及地图区域的颜色
{
gt: 100, //大于
label: "高风险",
color: "rgb(175,51,55)",
},
{
gte: 50,
lte: 100, //小于
label: "较高风险",
color: "rgb(194,121,48)",
},
{
gte: 20,
lt: 50,
label: "中风险",
color: "rgb(214,195,61)",
},
{
gt: 5,
lt: 10,
label: "较低风险",
color: "rgb(35,115,167)",
},
{
gt: 0,
lt: 5,
label: "低风险",
color: "rgb(34,150,128)",
},
],
show: !0,
},
geo: {
map: "城市名称",
roam: !1,
scaleLimit: {
min: 1,
max: 2,
},
zoom: 1.23,
top: 120,
label: {
//在map中显示各区域的名称
normal: {
show: !0,
fontSize: "14",
color: "#fff",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
show: true, // 是否显示对应地名
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0,
},
},
},
series: [
{
name: "确诊病例",
type: "map",
geoIndex: 0,
data: window.dataList,
},
],
};
that.chart0.setOption(option0);
},
});
总结：这段代码的前两句是精髓，你需要获取创建地图的 json 数据以及 dom，通过 registerMap 获取地图 json 数据。此外，geo 中的 map 要和 registerMap 的城市名称对应。
2、配置
series: [
{
map: "chinaMapOutline", //用来设置地图外边框
silent: true,
type: "map",
zoom:1, //控制地图在页面中的大小
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
},
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
top: "14%",
roam: false,
itemStyle: {
normal: {
areaColor: "rgba(0,255,255,.02)",
borderColor: "#00ffff",
borderWidth: 1.5,
shadowColor: "#00ffff",
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
},
emphasis: {
areaColor: "transparent", //悬浮背景
textStyle: {
color: "#fff",
},
},
},
},
{
map: "chinaMap", //地图内部区域颜色渐变
type: "map",
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: "#D4EEFF",
},
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
top: "14%",
tooltip: {
show: true,
},
roam: false,
//地图区域渐变颜色
itemStyle: {
normal: {
//areaColor: "transparent",
borderColor: "rgba(0,255,255,.1)",
borderWidth: 1,
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0% 处的颜色
},
{
offset: 1,
color: "#061E3D", // 100% 处的颜色
},
],
},
},
//鼠标滑动地图变色
emphasis: {
areaColor: "rgba(0,255,255,.1)",
textStyle: {
color: "red",
},
},
},
data: this.dataList, //地图数据
},
],
3、地图数据
4、获取地图 json 数据
this.$axios.get("../static/370200.json").then((res) => {
this.mapData = res.data; //地图数据
});
5、重绘
document.getElementById("e1").removeAttribute("_echarts_instance_");
this.init();
如果数据没有变化，只执行 init 函数，图表不会重新绘制，需要执行
document.getElementById("e1").removeAttribute("_echarts_instance_");
这一行代码，移除 echarts_instance 属性，如果没有此属性，地图就会进行重绘
标签：map,vue,textStyle,color,地图,label,echarts From： https://www.cnblogs.com/wp-leonard/p/17129518.html