Skip to content

R
risk-monitor
提交 c0b4864a authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

地图标注样式更新

上级 d164fb2a
隐藏空白字符变更
内嵌 并排
正在显示 包含 481 行增加 和 141 行删除
src/views/technologyFigures/component/TimelineMap copy.vue 0 → 100644
浏览文件 @ c0b4864a
<template>
<div ref="map" style="width: 1600px; height: 551px"></div>
<div
style="width: 1231px; height: 72px; margin-top: -55px; background: linear-gradient(to top, #DAEBFD, #ffffff);margin-left: 182px">
<div style="width: 1231px; height: 40px; display: flex;justify-content: space-between;">
<div style="display: flex;align-self: center;">
<div class="time-btn">
⏸
</div>
<div class="time-btn">
⏹
</div>
<div class="time-btn">
重置
</div>
</div>
<div style="display: flex;align-self: center;">
<div>
当前时间：
</div>
<input></input>
<div style="margin: 0 10px 0 40px;color: #04295A;"> 刻度</div>
<select name="firstSelect" id="firstSelect">
<option value="option1">周制</option>
</select>
<div style="margin: 0 10px 0 40px;color: #04295A;">速率</div>
<select name="secondSelect" id="secondSelect" style="margin-right: 20px;">
<option value="optionA">1X</option>
<option value="optionB">2X</option>
</select>
</div>
</div>
<div ref=" timeLineChart" style="width: 1231px; height: 30px;background-color: #6091D6; "></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import worldJson from "@/assets/json/world.json";
export default {
name: "MapAnimation",
mounted() {
this.initMap();
},
methods: {
initMap() {
// 注册自定义地图数据
echarts.registerMap("China", worldJson);
const chart = echarts.init(this.$refs.map);
const option = {
// timeline: {
// autoplay: true,
// playInterval: 2000,
// data: ["9月23日"]
// },
grid: {
left: "10%",
right: "10%",
bottom: "10%",
top: "10%",
containLabel: true
},
geo: {
map: "China",
roam: true,
label: {
emphasis: {
show: false,
color: "#fff"
}
},
silent: true,
itemStyle: {
areaColor: "#F6FAFF",
borderColor: "#B9DCFF"
}
},
series: [
{
name: "行程",
type: "effectScatter",
coordinateSystem: "geo",
data: [
{
time: "2025-02-01",
text: "随美国总统特朗普进行国事访问",
value: [116.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "出席中国发展高层论坛2025年年会",
value: [116.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与民主党领导人查克·舒默及哈基姆...",
value: [1.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与阿拉伯国家领导人会晤，商讨加...",
value: [116.46, -44.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "对印度进行为期四天的访问，与总理...",
value: [78.1, 20.7],
itemStyle: { color: "#ffcc00" }
}
],
symbolSize: 10,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
formatter: function (params) {
var name = params.name;
var value = params.data.datas;
var text = `{fline|${value}}\n{tline|${name}}{img|${img}}`;
return text;
},
color: '#fff',
rich: {
fline: {
padding: [0, 25],
color: '#fff',
textShadowColor: '#030615',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1,
fontSize: 14,
fontWeight: 400,
},
img: {
backgroundColor: {
image: '/testData/image 21.png' // 图片URL
},
height: 50, // 图片高度
width: 50 // 图片宽度
},
tline: {
padding: [0, 27],
color: '#ABF8FF',
fontSize: 12,
},
},
},
emphasis: {
show: true,
},
},
label: {
show: true,
position: "right",
offset: [5, 0],
borderColor: "rgba(174, 214, 255, 1)",
backgroundColor: "rgba(255, 255, 255, 0.8)",
formatter: params => {
const { time, text } = params.data; // 👈 从 params.data 取
return `{time|${time}} \n {text|${text}项}`;
},
rich: {
time: {
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 30,
color: "rgba(5, 95, 194, 1)"
},
text: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
}
},
itemStyle: {
color: "#ddb926",
shadowBlur: 10,
shadowColor: "#333"
}
}
]
};
chart.setOption(option);
// const chart2 = echarts.init(this.$refs.timeLineChart);
// const option2 = {
// xAxis: {
// type: "time",
// position: "top",
// axisLine: {
// show: true,
// lineStyle: {
// color: "#000"
// }
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// formatter: "{value}日",
// color: "#000"
// },
// splitLine: {
// show: true
// },
// data: [
// "2024-03-25",
// "2024-04-08",
// "2024-04-15",
// "2024-04-22",
// "2024-04-29",
// "2024-05-06",
// "2024-05-13",
// "2024-05-20",
// "2024-05-27",
// "2024-06-03",
// "2024-06-10",
// "2024-06-17",
// "2024-06-24",
// "2024-07-01",
// "2024-07-08",
// "2024-07-15",
// "2024-07-22",
// "2024-07-29"
// ]
// },
// yAxis: {
// type: "value",
// show: false
// },
// series: [
// {
// data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// type: "line",
// areaStyle: {},
// emphasis: {
// focus: "series"
// }
// }
// ],
// visualMap: {
// show: false,
// dimension: 1,
// pieces: [{ gt: 0, lte: 1, color: "#ffcc00" }]
// }
// };
// chart2.setOption(option2);
}
}
};
</script>
<style scoped>
#map {
width: 1600px;
height: 581px;
}
.time-btn {
color: #04295A;
background-color: #F9FDFE;
border: 1px solid #04295A;
padding: 0 10px;
margin: 0 10px;
}
</style>
src/views/technologyFigures/component/TimelineMap.vue
浏览文件 @ c0b4864a
<template> <template>
<div ref="map" style="width: 1600px; height: 551px"></div> <div ref="map" style="width: 1600px; height: 551px"></div>
<div <div
style="width: 1231px; height: 72px; margin-top: -55px; background: linear-gradient(to top, #DAEBFD, #ffffff);margin-left: 182px"> style="width: 1231px; height: 72px; margin-top: -55px; background: linear-gradient(to top, #DAEBFD, #ffffff); margin-left: 182px">
<div style="width: 1231px; height: 40px; display: flex;justify-content: space-between;"> <div style="width: 1231px; height: 40px; display: flex; justify-content: space-between;">
<div style="display: flex;align-self: center;"> <div style="display: flex; align-self: center;">
<div class="time-btn"> <div class="time-btn">
⏸ ⏸
</div> </div>
...@@ -14,16 +14,16 @@ ...@@ -14,16 +14,16 @@
重置 重置
</div> </div>
</div> </div>
<div style="display: flex;align-self: center;"> <div style="display: flex; align-self: center;">
<div> <div>
当前时间： 当前时间：
</div> </div>
<input></input> <input></input>
<div style="margin: 0 10px 0 40px;color: #04295A;"> 刻度</div> <div style="margin: 0 10px 0 40px; color: #04295A;">刻度</div>
<select name="firstSelect" id="firstSelect"> <select name="firstSelect" id="firstSelect">
<option value="option1">周制</option> <option value="option1">周制</option>
</select> </select>
<div style="margin: 0 10px 0 40px;color: #04295A;">速率</div> <div style="margin: 0 10px 0 40px; color: #04295A;">速率</div>
<select name="secondSelect" id="secondSelect" style="margin-right: 20px;"> <select name="secondSelect" id="secondSelect" style="margin-right: 20px;">
<option value="optionA">1X</option> <option value="optionA">1X</option>
<option value="optionB">2X</option> <option value="optionB">2X</option>
...@@ -31,15 +31,13 @@ ...@@ -31,15 +31,13 @@
</div> </div>
</div> </div>
<div ref=" timeLineChart" style="width: 1231px; height: 30px;background-color: #6091D6; "></div> <div ref="timeLineChart" style="width: 1231px; height: 30px; background-color: #6091D6;"></div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import worldJson from "@/assets/json/world.json"; import worldJson from "@/assets/json/world.json";
export default { export default {
name: "MapAnimation", name: "MapAnimation",
mounted() { mounted() {
...@@ -49,15 +47,46 @@ export default { ...@@ -49,15 +47,46 @@ export default {
initMap() { initMap() {
// 注册自定义地图数据 // 注册自定义地图数据
echarts.registerMap("China", worldJson); echarts.registerMap("China", worldJson);
const eventsData = [
{
time: "9月23日",
text: "随美国总统特朗普进行国事访问",
lon: 116.46,
lat: 39.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "出席中国发展高层论坛2025年年会",
lon: 116.46,
lat: 39.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "与民主党领导人查克·舒默及哈基姆...",
lon: 1.46,
lat: 39.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "与阿拉伯国家领导人会晤，商讨加...",
lon: 116.46,
lat: -44.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "对印度进行为期四天的访问，与总理...",
lon: 78.1,
lat: 20.7,
avatar: "/testData/united_states 1 copy.png"
}
];
const chart = echarts.init(this.$refs.map); const chart = echarts.init(this.$refs.map);
const option = { const option = {
// timeline: {
// autoplay: true,
// playInterval: 2000,
// data: ["9月23日"]
// },
grid: { grid: {
left: "10%", left: "10%",
right: "10%", right: "10%",
...@@ -85,71 +114,31 @@ export default { ...@@ -85,71 +114,31 @@ export default {
name: "行程", name: "行程",
type: "effectScatter", type: "effectScatter",
coordinateSystem: "geo", coordinateSystem: "geo",
data: [ data: eventsData.map(item => ({
{ value: [item.lon, item.lat],
time: "2025-02-01", time: item.time,
text: "随美国总统特朗普进行国事访问", text: item.text,
value: [116.46, 39.92], avatar: item.avatar,
itemStyle: { color: "#ffcc00" } itemStyle: { color: "#ffcc00" }
}, })),
{
time: "2025-02-01",
text: "出席中国发展高层论坛2025年年会",
value: [116.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与民主党领导人查克·舒默及哈基姆...",
value: [1.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与阿拉伯国家领导人会晤，商讨加...",
value: [116.46, -44.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "对印度进行为期四天的访问，与总理...",
value: [78.1, 20.7],
itemStyle: { color: "#ffcc00" }
}
],
symbolSize: 10, symbolSize: 10,
showEffectOn: "render", showEffectOn: "render",
rippleEffect: { rippleEffect: {
brushType: "stroke" brushType: "stroke"
}, },
label: { // label: {
show: true, // normal: {
position: "right", // show: true,
offset: [5, 0], // formatter: params => {
borderColor: "rgba(174, 214, 255, 1)", // const { time, text } = eventsData[params.dataIndex];
// return `{time|${time}} \n {text|${text}}`;
backgroundColor: "rgba(255, 255, 255, 0.8)", // },
formatter: params => { // rich: {
const { time, text } = params.data; // 👈 从 params.data 取 // time: { fontSize: 16, color: 'rgba(5, 95, 194, 1)' },
return `{time|${time}} \n {text|${text}项}`; // text: { fontSize: 14, color: 'rgb(95, 101, 108)' }
}, // }
rich: { // }
time: { // },
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 30,
color: "rgba(5, 95, 194, 1)"
},
text: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
}
},
itemStyle: { itemStyle: {
color: "#ddb926", color: "#ddb926",
shadowBlur: 10, shadowBlur: 10,
...@@ -158,73 +147,137 @@ export default { ...@@ -158,73 +147,137 @@ export default {
} }
] ]
}; };
chart.setOption(option); chart.setOption(option);
// const chart2 = echarts.init(this.$refs.timeLineChart);
// const option2 = { // 添加 graphic 元素并设置其位置
// xAxis: { this.updateGraphics(chart, eventsData);
// type: "time",
// position: "top", // 监听地图缩放和移动事件，以更新 graphic 的位置
// axisLine: { chart.on('georoam', () => {
// show: true, this.updateGraphics(chart, eventsData);
// lineStyle: { });
// color: "#000"
// } const chart2 = echarts.init(this.$refs.timeLineChart);
// },
// axisTick: { const option2 = {
// show: false xAxis: {
// }, type: "time",
// axisLabel: { position: "top",
// formatter: "{value}日", axisLine: {
// color: "#000" show: true,
// }, lineStyle: {
// splitLine: { color: "#000"
// show: true }
// }, },
// data: [ axisTick: {
// "2024-03-25", show: false
// "2024-04-08", },
// "2024-04-15", axisLabel: {
// "2024-04-22", formatter: "{value}日",
// "2024-04-29", color: "#000"
// "2024-05-06", },
// "2024-05-13", splitLine: {
// "2024-05-20", show: true
// "2024-05-27", },
// "2024-06-03", data: [
// "2024-06-10", "2024-03-25",
// "2024-06-17", "2024-04-08",
// "2024-06-24", "2024-04-15",
// "2024-07-01", "2024-04-22",
// "2024-07-08", "2024-04-29",
// "2024-07-15", "2024-05-06",
// "2024-07-22", "2024-05-13",
// "2024-07-29" "2024-05-20",
// ] "2024-05-27",
// }, "2024-06-03",
// yAxis: { "2024-06-10",
// type: "value", "2024-06-17",
// show: false "2024-06-24",
// }, "2024-07-01",
// series: [ "2024-07-08",
// { "2024-07-15",
// data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "2024-07-22",
// type: "line", "2024-07-29"
// areaStyle: {}, ]
// emphasis: { },
// focus: "series" yAxis: {
// } type: "value",
// } show: false
// ], },
// visualMap: { series: [
// show: false, {
// dimension: 1, data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// pieces: [{ gt: 0, lte: 1, color: "#ffcc00" }] type: "line",
// } areaStyle: {},
// }; emphasis: {
focus: "series"
}
}
],
visualMap: {
show: false,
dimension: 1,
pieces: [{ gt: 0, lte: 1, color: "#ffcc00" }]
}
};
chart2.setOption(option2);
},
updateGraphics(chart, eventsData) {
const graphics = eventsData.map((event, index) => {
const position = chart.convertToPixel({ geoIndex: 0 }, [event.lon, event.lat]);
return {
type: 'group',
position: position,
children: [
// chart2.setOption(option2); {
type: 'image',
x: -170, y: -72,
style: {
image: "/icon/map-text-bg.png",
borderWidth: 2,
borderColor: '#1890ff', width: 339, height: 72
}
},
{
type: 'image',
x: -160, y: -63,
style: {
image: event.avatar,
borderWidth: 2,
borderColor: '#1890ff', width: 42, height: 42
}
}, {
type: 'text',
x: -106, y: -63,
style: {
text: event.time,
fontSize: 16,
fontWeight: '800',
fill: 'rgba(5, 95, 194, 1)', // 文字颜色（ECharts 中用 fill，不是 color）
textAlign: 'left'
}
},
{
type: 'text',
x: -106, y: -40,
style: {
text: event.text,
fontSize: 16,
fontWeight: '400',
fill: 'rgba(59, 65, 75, 1)', // 文字颜色（ECharts 中用 fill，不是 color）
textAlign: 'left'
}
}
]
};
});
chart.setOption({
graphic: graphics
});
chart.resize(); // 强制刷新图表
} }
} }
}; };
...@@ -234,14 +287,14 @@ export default { ...@@ -234,14 +287,14 @@ export default {
#map { #map {
width: 1600px; width: 1600px;
height: 581px; height: 581px;
font-family: Microsoft YaHei;
} }
.time-btn { .time-btn {
color: #04295A; color: #04295A;
background-color: #F9FDFE; background-color: #F9FDFE;
border: 1px solid #04295A; border: 1px solid #04295A;
padding: 0 10px; padding: 0 10px;
margin: 0 10px; margin: 0 10px;
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论