diff --git a/src/components/chinaMap/chinaHooks.ts b/src/components/chinaMap/chinaHooks.ts
index 5911768..562555f 100644
--- a/src/components/chinaMap/chinaHooks.ts
+++ b/src/components/chinaMap/chinaHooks.ts
@@ -47,6 +47,110 @@ export const legendList = [
{ img: legend5, text: '地方医院' },
{ img: legend6, text: '直升机' },
];
+const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
+
+export function createChartOption({ icons }) {
+ return {
+ tooltip: {
+ show: false,
+ // formatter: (params) => {
+ // console.log('params', params);
+ // if (!params?.data?.id) {
+ // return '';
+ // }
+ // return ` ${params.name}
+ // id: ${params?.data?.id}
`;
+ // },
+ },
+ geo: [
+ {
+ map: 'china',
+ zlevel: 3,
+ aspectScale: 0.8, //长宽比
+ zoom: 1.1,
+ // roam: true,
+ // draggable: true,
+ top: '60',
+ left: 'center',
+ itemStyle: {
+ areaColor: '#173a58',
+ shadowColor: '#173a58',
+ shadowOffsetX: 0,
+ shadowOffsetY: 5,
+ borderWidth: 6, //外部边框
+ borderColor: '#6ccffe',
+ },
+ },
+ {
+ map: 'china',
+ zlevel: 2,
+ aspectScale: 0.8, //长宽比
+ zoom: 1.1,
+ // roam: true,
+ // draggable: true,
+ top: '60',
+ left: 'center',
+ itemStyle: {
+ areaColor: '#1e2c38',
+ shadowColor: '#1e2c38',
+ shadowOffsetX: 0,
+ shadowOffsetY: 10,
+ borderWidth: 6, //外部边框
+ borderColor: '#384d61',
+ },
+ },
+ ],
+ series: [
+ {
+ map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
+ name: '中国地图',
+ type: 'map',
+ selected: {}, // 默认所有省份都是未选中状态
+ selectedMode: 'single', // 选中模式为单选
+ zlevel: 9,
+ zoom: 1.1,
+ aspectScale: 0.8, //长宽比
+ // roam: true,
+ // draggable: true,
+ hoverAnimation: false,
+ silent: false,
+ top: '60',
+ left: 'center',
+ label: {
+ show: true,
+ padding: [0, 10],
+ height: 31,
+ lineHeight: 31,
+ textStyle: {
+ color: '#fff',
+ fontSize: 13,
+ marginLeft: 5,
+ },
+ },
+ itemStyle: {
+ // 给地图添加背景图片
+ areaColor: {
+ type: 'pattern',
+ image: bgImg,
+ repeat: 'no-repeat',
+ },
+ borderColor: '#359de5',
+ borderWidth: 2, //内部边框,
+ },
+ // 鼠标悬浮
+ emphasis: {
+ label: {
+ color: '#fff',
+ },
+ itemStyle: {
+ areaColor: '#008CFF',
+ },
+ },
+ },
+ ...icons.value,
+ ],
+ };
+}
/**
* @description 秒转小时
diff --git a/src/components/chinaMap/chinaMap.vue b/src/components/chinaMap/chinaMap.vue
index 9c9357b..656286e 100644
--- a/src/components/chinaMap/chinaMap.vue
+++ b/src/components/chinaMap/chinaMap.vue
@@ -15,12 +15,12 @@
- 清空
+ 清空
路线规划
@@ -61,11 +61,9 @@
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import mapJson from '/@/components/chinaMap/json/c';
- import { tabList, mapIcons, legendList, getTimeStr, getKmStr } from './chinaHooks.ts';
+ import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption } from './chinaHooks.ts';
import { message } from 'ant-design-vue';
- const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
-
const formState = ref({
start: '西安北站',
end: '',
@@ -84,22 +82,21 @@
//自定义图片的 路径
// symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567', // 图片 URL
symbol: 'image://' + mapIcons[0], // 图片 URL
- },
- {
- type: 'scatter',
- zlevel: 100,
- coordinateSystem: 'geo',
- //自定义图片的 位置（lng, lat）
- data: [{ name: '太原', value: [112.55, 37.98], id: 'taiyuan' }],
- //自定义图片的 大小
- symbolSize: [25, 63],
- symbol: 'image://' + mapIcons[1], // 图片 URL
+ label: {
+ borderColor: 'red',
+ borderWidth: 2,
+ borderType: 'solid',
+ shadowBlur: '10px',
+ shadowColor: 'red',
+ shadowOffsetX: '5px',
+ shadowOffsetY: '5px',
+ },
},
]);
function changeTab(i) {
- let x = Math.random() + 3 - Math.random() - i;
- let y = Math.random() - 2 + Math.random() + i;
+ let x = Math.random() + 5 - Math.random() - i;
+ let y = Math.random() - 5 + Math.random() + i;
const o = {
type: 'scatter',
zlevel: 100,
@@ -110,8 +107,41 @@
symbolSize: [25, 63],
symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL
};
+ const line = {
+ name: '线路',
+ type: 'lines',
+ coordinateSystem: 'geo',
+ zlevel: 100,
+ large: true,
+ effect: {
+ show: true,
+ constantSpeed: 30,
+ symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+ symbolSize: 0,
+ trailLength: 0,
+ },
+ lineStyle: {
+ normal: {
+ color: '#0fff17',
+ width: 2,
+ opacity: 1.0,
+ curveness: 0.15,
+ },
+ },
+ data: [
+ {
+ fromName: '六安',
+ toName: '合肥市',
+ coords: [
+ [116.27, 31.786],
+ [117.37, 31.386],
+ ],
+ },
+ ],
+ };
icons.value = [];
icons.value.push(o);
+ icons.value.push(line);
currentIndex.value = i;
let myChart = echarts.init(document.querySelector('.china-map-container'));
initMap(myChart);
@@ -125,91 +155,34 @@
});
function initMap(myChart) {
- let option = {
- tooltip: {
- show: false,
- formatter: '{b0}: {c0}',
- },
- geo: [
- {
- map: 'china',
- zlevel: 3,
- aspectScale: 0.8, //长宽比
- zoom: 1.1,
- roam: false,
- top: '60',
- left: 'center',
- itemStyle: {
- areaColor: '#173a58',
- shadowColor: '#173a58',
- shadowOffsetX: 0,
- shadowOffsetY: 5,
- borderWidth: 6, //外部边框
- borderColor: '#6ccffe',
- },
- },
- {
- map: 'china',
- zlevel: 2,
- aspectScale: 0.8, //长宽比
- zoom: 1.1,
- roam: false,
- top: '60',
- left: 'center',
- itemStyle: {
- areaColor: '#1e2c38',
- shadowColor: '#1e2c38',
- shadowOffsetX: 0,
- shadowOffsetY: 10,
- borderWidth: 6, //外部边框
- borderColor: '#384d61',
- },
- },
- ],
- series: [
- {
- map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
- name: '中国地图',
- type: 'map',
- zlevel: 9,
- zoom: 1.1,
- aspectScale: 0.8, //长宽比
- hoverAnimation: false,
- silent: false,
- top: '60',
- left: 'center',
- label: {
- show: true,
- padding: [0, 10],
- height: 31,
- lineHeight: 31,
- textStyle: {
- color: '#fff',
- fontSize: 13,
- marginLeft: 5,
- },
- },
- itemStyle: {
- // 给地图添加背景图片
- areaColor: {
- type: 'pattern',
- image: bgImg,
- repeat: 'no-repeat',
- },
- borderColor: '#359de5',
- borderWidth: 2, //内部边框
- },
- },
- ...icons.value,
- ],
- };
+ let option = createChartOption({ icons });
myChart.setOption(option);
+ // 关闭之前的点击事件
+ myChart.off('click');
myChart.on('click', function (res) {
- if ('scatter' === res.componentSubType) {
- alert(`点击了 ${res.name} 图标`);
- }
- if ('map' === res.componentSubType) {
- alert(`点击了 ${res.name} 地图`);
+ mapClick(res, myChart);
+ });
+ myChart.getZr().on('click', (params) => {
+ if (params.target) {
+ // alert('画布非空白区');
+ } else {
+ // alert('画布空白区');
+ myChart.dispatchAction({
+ // 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
+ type: 'unselect',
+ // 指定 series 的索引
+ seriesIndex: 0,
+ // 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
+ dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
+ });
+ myChart.dispatchAction({
+ // 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
+ type: 'geoUnSelect',
+ // 指定 series 的索引
+ seriesIndex: 0,
+ // 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
+ dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
+ });
}
});
window.addEventListener('resize', () => {
@@ -217,12 +190,27 @@
});
}
+ function mapClick(res, myChart) {
+ if (res.componentType !== 'series') {
+ myChart.setOption({
+ series: [{ selected: {} }], // 取消所有省份的选中状态
+ });
+ }
+
+ console.log('res', res);
+ if ('scatter' === res.componentSubType) {
+ // alert(`点击了 ${res.name} 图标`);
+ }
+ if ('map' === res.componentSubType) {
+ // alert(`点击了 ${res.name} 地图`);
+ }
+ }
+
const routeList = ref([]);
const showRoutePanel = ref(false);
const panelTitle = ref();
function outClick() {
- console.log('点击外面');
showRoutePanel.value = false;
}
@@ -275,12 +263,14 @@
arr.push(data.destinationName);
showRoutePanel.value = true;
routeList.value = arr;
- console.log(arr);
}
});
}
- console.log();
+ function clickSearch() {
+ formState.value.start = '';
+ formState.value.end = '';
+ }