农产品溯源地图
This commit is contained in:
parent
28ea06f411
commit
fa5993c982
@ -47,8 +47,6 @@ export default {
|
||||
const option = reactive({});
|
||||
|
||||
watchEffect(() => {
|
||||
regMap(props.name, props.geo);
|
||||
console.info('watchEffect');
|
||||
props.chartData && initCharts();
|
||||
});
|
||||
|
||||
@ -66,8 +64,9 @@ export default {
|
||||
if (props.option) {
|
||||
Object.assign(option, cloneDeep(props.option));
|
||||
}
|
||||
setOptions(option);
|
||||
|
||||
setOptions(option);
|
||||
regMap(props.name, props.geo);
|
||||
onMapClick((data) => {
|
||||
emit('click', data);
|
||||
});
|
||||
|
||||
@ -1,15 +1,26 @@
|
||||
<template>
|
||||
<section ref="chartRef" class="_container"></section>
|
||||
<div class="map-center-warp">
|
||||
<div class="map-pos">
|
||||
<custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import geoJsonData from './china.json'; // 根据实际情况调整路径;
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: '首页',
|
||||
},
|
||||
});
|
||||
const isShow = ref(false);
|
||||
let geoData = geoJsonData;
|
||||
let mapName = ref('china');
|
||||
|
||||
onMounted(() => loadMapChart());
|
||||
|
||||
const chartRef = ref(null);
|
||||
const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
|
||||
const chinaGeoCoordMap = ref({
|
||||
云南: [102.9199, 25.4663],
|
||||
广东: [113.12244, 23.009505],
|
||||
@ -24,7 +35,7 @@ const chinaDatas = ref([
|
||||
[{ name: '四川', value: 1256 }],
|
||||
[{ name: '河北', value: 382 }],
|
||||
]);
|
||||
function convertData(data) {
|
||||
const convertData = (data) => {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
@ -43,8 +54,8 @@ function convertData(data) {
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
function getSeries() {
|
||||
};
|
||||
const getSeries = () => {
|
||||
let list = [];
|
||||
[['云南', chinaDatas.value]].forEach(function (item, i) {
|
||||
list.push(
|
||||
@ -147,9 +158,10 @@ function getSeries() {
|
||||
);
|
||||
});
|
||||
return list;
|
||||
}
|
||||
async function loadMapChart() {
|
||||
var option = {
|
||||
};
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
title: {
|
||||
text: '地图统计图表',
|
||||
subtext: '',
|
||||
@ -177,7 +189,6 @@ async function loadMapChart() {
|
||||
transitionDuration: 0,
|
||||
extraCssText: 'z-index:100',
|
||||
formatter: function (params, ticket, callback) {
|
||||
console.log('params', params);
|
||||
let val = 0;
|
||||
if (typeof params.value == 'number') {
|
||||
val = params.value;
|
||||
@ -187,7 +198,6 @@ async function loadMapChart() {
|
||||
//根据业务自己拓展要显示的内容
|
||||
var res = '';
|
||||
var name = params.name;
|
||||
|
||||
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
|
||||
return res;
|
||||
},
|
||||
@ -205,7 +215,7 @@ async function loadMapChart() {
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
map: mapName.value,
|
||||
zoom: 1.2,
|
||||
top: 250,
|
||||
label: {
|
||||
@ -226,40 +236,92 @@ async function loadMapChart() {
|
||||
},
|
||||
},
|
||||
series: getSeries(),
|
||||
};
|
||||
// const { rows } = await selectRecord(this.baseId);
|
||||
// //数据
|
||||
// // option.series[0].data = rows.map((item) => ({
|
||||
// // name: item.queryCity,
|
||||
// // value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
|
||||
// // }));
|
||||
// //查询次数
|
||||
// let i = 956;
|
||||
// rows.forEach((item) => {
|
||||
// i += item.queryCount;
|
||||
// });
|
||||
// option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
|
||||
option.title.subtext = `我们的产品走过了18个城市，被客户查询了73812次`;
|
||||
// this.$echarts.registerMap('china', { geoJSON: chinaMap });
|
||||
// myChart.on('click', (params) => {
|
||||
// if (params.name.includes('广东')) {
|
||||
// this.$emit('dataType', '2');
|
||||
// } else if (params.name.includes('香港')) {
|
||||
// this.$emit('dataType', '1');
|
||||
// } else {
|
||||
// this.$emit('dataType', '0');
|
||||
// }
|
||||
// });
|
||||
console.log('option', option);
|
||||
setOptions(option);
|
||||
}
|
||||
</script>
|
||||
},
|
||||
});
|
||||
|
||||
let currentMap = reactive({});
|
||||
|
||||
const mapClick = (data) => {
|
||||
// if (props.markerData.length && props.markerData.length > 0) {
|
||||
// if (data.seriesType == 'effectScatter') {
|
||||
// isShow.value = true;
|
||||
// currentMap = data;
|
||||
// emit('mapclick', currentMap);
|
||||
// }
|
||||
// } else {
|
||||
// isShow.value = true;
|
||||
// currentMap = data;
|
||||
// emit('mapclick', currentMap);
|
||||
// }
|
||||
};
|
||||
const handleClose = () => {
|
||||
isShow.value = false;
|
||||
};
|
||||
|
||||
const emit = defineEmits(['mapclick']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
._container {
|
||||
padding: 40px;
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep() {
|
||||
.el-dialog {
|
||||
background: url(iconUrl) no-repeat left top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 8px !important;
|
||||
min-height: 200px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100%;
|
||||
padding: 16px;
|
||||
margin-top: 15%;
|
||||
}
|
||||
.el-dialog__header {
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
padding-left: 48px;
|
||||
.el-dialog__title,
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-dialog__headerbtn {
|
||||
top: 8px !important;
|
||||
}
|
||||
}
|
||||
.map-dialog-my-header {
|
||||
margin-top: 4px;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
h4 {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-center-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid red;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 90%;
|
||||
.map-img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
object-fit: contain;
|
||||
transform: translateX(-50%);
|
||||
max-width: 1000px;
|
||||
max-height: 1000px;
|
||||
}
|
||||
.map-pos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap />
|
||||
<traceMap></traceMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
@ -55,7 +55,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import centerMap from './components/centerMap.vue';
|
||||
import traceMap from './components/traceMap.vue';
|
||||
import codeNumCharts from './components/codeNumCharts.vue';
|
||||
import mainPartCharts from './components/mainPartCharts.vue';
|
||||
import principalTypeCharts from './components/principalTypeCharts.vue';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user