This commit is contained in:
parent
7753949535
commit
94aa9bf1c5
13
src/api.js
13
src/api.js
|
|
@ -59,3 +59,16 @@ export function landListApi(params) {
|
|||
export function productListApi(params) {
|
||||
return instacne.get('/api/dataview.land/productList', { params })
|
||||
}
|
||||
|
||||
export function areaPlantTypeCountApi(params) {
|
||||
return instacne.get('/api/dataview.land/areaPlantTypeCount', { params })
|
||||
}
|
||||
export function monitorInfoApi(params) {
|
||||
return instacne.get('/api/dataview.land/monitorInfo', { params })
|
||||
}
|
||||
|
||||
export function deviceCountLandApi(params) {
|
||||
return instacne.get('/api/dataview.land/deviceCount', { params })
|
||||
}
|
||||
|
||||
// /api/dataview.land/deviceCount?areaCode=510521&streetCode=510521100&land_id=18
|
||||
|
|
@ -2,11 +2,8 @@
|
|||
<div>
|
||||
|
||||
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
|
||||
<!-- <img src="/static/index/lx.png" class="img4" alt=""> -->
|
||||
</div>
|
||||
<!-- <div style="width: 45vw;height: 50vh;" id="myChart"></div> -->
|
||||
|
||||
<!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
|
@ -41,29 +38,22 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
import "echarts-gl"
|
||||
|
||||
import geoJson from "/static/jsonData/xuantan.js"
|
||||
import {useRouter} from "vue-router"
|
||||
|
||||
|
||||
const router=useRouter()
|
||||
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
||||
const lx="https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
|
||||
|
||||
import geoJson from "/static/jsonData/luxian_geo.js"
|
||||
import { useRouter } from "vue-router"
|
||||
const router = useRouter()
|
||||
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
||||
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
|
||||
const pointerFn = () => {
|
||||
|
||||
// console.log()
|
||||
let list = []
|
||||
geoJson.center.forEach((item, index) => {
|
||||
list.push({
|
||||
coord: item,
|
||||
symbol: index==geoJson.center.length-1?('image://'+lx): ('image://' + icon),// 自定义图片路径
|
||||
symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
|
||||
symbolSize: [100, 30], // 图片大小
|
||||
symbolOffset: ['50%', '-50%'],
|
||||
value: geoJson.features[index]?.properties.name||'泸县',
|
||||
value: geoJson.features[index]?.properties.name || '泸县',
|
||||
animation: true,
|
||||
label: {
|
||||
show: true,
|
||||
|
|
@ -74,230 +64,226 @@ const pointerFn = () => {
|
|||
})
|
||||
return list
|
||||
}
|
||||
// pointerFn()
|
||||
onMounted(() => {
|
||||
var mapName = 'lz';
|
||||
const myChart = document.getElementById("chart2")
|
||||
/*获取地图数据*/
|
||||
let option = {
|
||||
geo: [
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
label:{
|
||||
emphasis:{
|
||||
show:false
|
||||
}
|
||||
},
|
||||
show: true,
|
||||
map: mapName,
|
||||
zoom: 1.2,
|
||||
aspectScale: 1,
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'transparent',
|
||||
var mapName = 'lz';
|
||||
const myChart = document.getElementById("chart2")
|
||||
/*获取地图数据*/
|
||||
let option = {
|
||||
geo: [
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
show: true,
|
||||
map: mapName,
|
||||
zoom: 1.2,
|
||||
aspectScale: 1,
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'transparent',
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
|
||||
areaColor: {
|
||||
type: 'radial', // linear 线性渐变 radial径向渐变
|
||||
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
|
||||
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
|
||||
r: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: '#A46759' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.1, color: '#A46759' // 0% 处的颜色
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
offset: 1, color: '#FFB821' // 100% 处的颜色
|
||||
}],
|
||||
|
||||
}
|
||||
|
||||
|
||||
// borderWidth: 0
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "52%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -2,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "53%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.4)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -4,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "54%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 5,
|
||||
// borderColor: "rgba(11, 43, 97,0.8)",
|
||||
borderColor: "rgba(5,9,57,0.8)",
|
||||
shadowColor: "rgba(29, 111, 165,0.8)",
|
||||
shadowOffsetY: 15,
|
||||
shadowBlur: 10,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '资产数',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
rippleEffect: {
|
||||
period: 4, //动画时间，值越小速度越快
|
||||
brushType: 'fill', //波纹绘制方式 stroke, fill
|
||||
scale: 12, //波纹圆环最大限制，值越大波纹越大
|
||||
number: 2,
|
||||
},
|
||||
|
||||
// 发散点的大小
|
||||
symbolSize: function (val) {
|
||||
return 4
|
||||
// return val[2] / 10;
|
||||
},
|
||||
markPoint: {
|
||||
data: pointerFn()
|
||||
},
|
||||
|
||||
data: (() => {
|
||||
let data = {
|
||||
资产数: geoJson.center
|
||||
|
||||
}
|
||||
let finalData = []
|
||||
Object.keys(data).map((i, index) => {
|
||||
let child = data[i].map((row, index) => ({
|
||||
value: row,
|
||||
itemStyle: {
|
||||
color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
|
||||
},
|
||||
emphasis: {
|
||||
}))
|
||||
|
||||
areaColor: {
|
||||
type: 'radial', // linear 线性渐变 radial径向渐变
|
||||
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
|
||||
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
|
||||
r: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: '#A46759' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.1, color: '#A46759' // 0% 处的颜色
|
||||
},
|
||||
finalData = [...finalData, ...child]
|
||||
})
|
||||
return finalData
|
||||
})(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
document.getElementById("chart2").removeAttribute('_echarts_instance_');
|
||||
|
||||
{
|
||||
offset: 1, color: '#FFB821' // 100% 处的颜色
|
||||
}],
|
||||
echarts.registerMap(mapName, geoJson)
|
||||
const bg = echarts.init(myChart)
|
||||
bg.setOption(option);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// borderWidth: 0
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "52%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -2,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "53%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.4)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -4,
|
||||
aspectScale: 1,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "54%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 5,
|
||||
// borderColor: "rgba(11, 43, 97,0.8)",
|
||||
borderColor: "rgba(5,9,57,0.8)",
|
||||
shadowColor: "rgba(29, 111, 165,0.8)",
|
||||
shadowOffsetY: 15,
|
||||
shadowBlur: 10,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '资产数',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
rippleEffect: {
|
||||
period: 4, //动画时间，值越小速度越快
|
||||
brushType: 'fill', //波纹绘制方式 stroke, fill
|
||||
scale: 12, //波纹圆环最大限制，值越大波纹越大
|
||||
number: 2,
|
||||
},
|
||||
|
||||
// 发散点的大小
|
||||
symbolSize: function (val) {
|
||||
return 4
|
||||
// return val[2] / 10;
|
||||
},
|
||||
markPoint: {
|
||||
data:pointerFn()
|
||||
},
|
||||
|
||||
data: (() => {
|
||||
let data = {
|
||||
资产数: geoJson.center
|
||||
|
||||
}
|
||||
let finalData = []
|
||||
Object.keys(data).map((i, index) => {
|
||||
let child = data[i].map((row,index) => ({
|
||||
value: row,
|
||||
itemStyle: {
|
||||
color:index==geoJson.center.length-1?'#FEB821':'#F0733A',
|
||||
},
|
||||
}))
|
||||
|
||||
finalData = [...finalData, ...child]
|
||||
})
|
||||
return finalData
|
||||
})(),
|
||||
},
|
||||
],
|
||||
};
|
||||
echarts.registerMap(mapName, geoJson)
|
||||
const bg = echarts.init(myChart)
|
||||
bg.setOption(option);
|
||||
|
||||
bg.on('click', function (params) {
|
||||
mapClick()
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const mapClick=()=>{
|
||||
router.push("/detail")
|
||||
}
|
||||
bg.on('click', function (params) {
|
||||
|
||||
router.push("/detail?town="+params.name||params.value)
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -1,20 +1,46 @@
|
|||
<template>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<span>种植总面积：</span>
|
||||
<span>种植总面积： </span>
|
||||
<div>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num " v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="">种植种类：</div>
|
||||
<div>
|
||||
<div class="lands">
|
||||
<div class="land" v-for="(item, index) in 33" :key="index">地块</div>
|
||||
<div class="land" v-for="(item, index) in plantData.plantKindList" :key="index">{{ item.kind }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {areaPlantTypeCountApi} from "@/api.js"
|
||||
import {ref,reactive} from "vue"
|
||||
|
||||
let plantData=reactive({
|
||||
totalArea:0,
|
||||
plantKindList:[]
|
||||
|
||||
|
||||
})
|
||||
// api/dataview.land/areaPlantTypeCount?areaCode=510521&streetCode=510521100
|
||||
areaPlantTypeCountApi(
|
||||
{
|
||||
areaCode:510521,
|
||||
streetCode:510521100,
|
||||
land_id:12
|
||||
}
|
||||
).then(res=>{
|
||||
for (let key in res.data){
|
||||
plantData[key]=res.data[key]
|
||||
}
|
||||
plantData.totalArea=plantData.totalArea.toString()
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.area-num {
|
||||
margin-right: 10px;
|
||||
|
|
@ -32,11 +58,12 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
// justify-content: space-between;
|
||||
font-size: 14px;
|
||||
overflow-y: auto;
|
||||
margin-top: 1vh;
|
||||
height: 15vh;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.land {
|
||||
width: 5vw;
|
||||
|
|
@ -47,6 +74,8 @@
|
|||
color: white;
|
||||
text-align: center;
|
||||
line-height: 3vh;
|
||||
margin-right: 10px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,20 @@
|
|||
|
||||
|
||||
<script setup>
|
||||
import {reactive} from "vue"
|
||||
import { reactive } from "vue"
|
||||
import { monitorInfoApi } from "@/api.js"
|
||||
|
||||
monitorInfoApi(
|
||||
{
|
||||
areaCode: 510521,
|
||||
streetCode: 510521100,
|
||||
land_id: 18
|
||||
}
|
||||
|
||||
).then(res => {
|
||||
console.log(res.data)
|
||||
})
|
||||
// /api/dataview.land/monitorInfo?areaCode=510521&streetCode=510521100&land_id=18
|
||||
|
||||
|
||||
const MoistureData = reactive([
|
||||
|
|
|
|||
|
|
@ -33,7 +33,16 @@
|
|||
import {ref,reactive,onMounted} from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import options from "@/view/option.js"
|
||||
|
||||
import {deviceCountLandApi} from "@/api.js"
|
||||
deviceCountLandApi(
|
||||
{
|
||||
areaCode:510521,
|
||||
streetCode:510521100,
|
||||
land_id:18
|
||||
}
|
||||
).then(res=>{
|
||||
console.log(res.data)
|
||||
})
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
|
|
|
|||
|
|
@ -1,437 +1,308 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="width: 45vw;height: 50vh;" id="farmerchart"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: 45vw;height: 50vh;" id="chart2">
|
||||
|
||||
|
||||
</div>
|
||||
<!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
|
||||
</template>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateY(360deg);
|
||||
100% {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.img4 {
|
||||
top: 19.5vh;
|
||||
left: 33.3vw;
|
||||
height: 44vh;
|
||||
width: 33.6vw;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#farmerchart {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import "echarts-gl"
|
||||
import geoJson from "/static/jsonData/luxian_geo.js"
|
||||
import { useRoute } from "vue-router"
|
||||
const deepCopy=(obj)=> {
|
||||
if (typeof obj !== 'object' || obj === null) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
let copy = Array.isArray(obj) ? [] : {};
|
||||
|
||||
for (let key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
copy[key] = deepCopy(obj[key]);
|
||||
}
|
||||
}
|
||||
|
||||
.img4 {
|
||||
width: 45VW;
|
||||
height: 50vh;
|
||||
transform-origin: center center;
|
||||
// transform: rotateX(45deg);
|
||||
// animation: spin 2s linear infinite;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
import axios from "axios";
|
||||
import * as echarts from 'echarts';
|
||||
import "echarts-gl"
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
|
||||
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
|
||||
.then(function (response) {
|
||||
let geoJson = response.data
|
||||
const dot = document.getElementById('img')
|
||||
var mapName = 'lz';
|
||||
var geoCoordMap = {
|
||||
};
|
||||
|
||||
let data = [
|
||||
|
||||
{
|
||||
name: "成都市",
|
||||
value: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
image: document.getElementById("img"),
|
||||
repeat: 'no-repeat'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "眉山市",
|
||||
value: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
image: document.getElementById("img"),
|
||||
repeat: 'no-repeat'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "雅安市",
|
||||
value: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
image: document.getElementById("img"),
|
||||
repeat: 'no-repeat'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
const myChart = document.getElementById("chart2")
|
||||
/*获取地图数据*/
|
||||
var mapFeatures = geoJson.features;
|
||||
mapFeatures.forEach(function (v) {
|
||||
// 地区名称
|
||||
var name = v.properties.name;
|
||||
// 地区经纬度
|
||||
geoCoordMap[name] = v.properties.cp;
|
||||
});
|
||||
// console.log(dot)
|
||||
let option = {
|
||||
visualMap: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: true,
|
||||
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontFamily: "等线",
|
||||
// fontSize: 18,
|
||||
// },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'none',
|
||||
formatter: function (params) {
|
||||
if (typeof params.value[2] == 'undefined') {
|
||||
var toolTiphtml = '';
|
||||
for (var i = 0; i < toolTipData.length; i++) {
|
||||
if (params.name == toolTipData[i].name) {
|
||||
toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
|
||||
}
|
||||
}
|
||||
console.log(toolTiphtml);
|
||||
// console.log(convertData(data))
|
||||
return toolTiphtml;
|
||||
} else {
|
||||
var toolTiphtml = '';
|
||||
for (var i = 0; i < toolTipData.length; i++) {
|
||||
if (params.name == toolTipData[i].name) {
|
||||
toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
|
||||
}
|
||||
}
|
||||
console.log(toolTiphtml);
|
||||
|
||||
return toolTiphtml;
|
||||
}
|
||||
},
|
||||
backgroundColor: "#fff",
|
||||
borderColor: "#333",
|
||||
padding: [5, 10],
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
fontSize: "16"
|
||||
}
|
||||
},
|
||||
geo: [
|
||||
{
|
||||
layoutSize: '100%',//大小
|
||||
show: true,
|
||||
map: mapName,
|
||||
backgroundColor: {
|
||||
color: {
|
||||
image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
|
||||
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
|
||||
}
|
||||
},
|
||||
roam: false,
|
||||
zoom: 1.2,
|
||||
layoutCenter: ["50%", "50%"],
|
||||
aspectScale: 1,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: {
|
||||
type: "linear",
|
||||
x: 1200,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: "rgba(3,27,78,0.75)", // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: "rgba(58,149,253,0.75)", // 50% 处的颜色
|
||||
},],
|
||||
global: true, // 缺省为 false
|
||||
},
|
||||
borderColor: "#D2F2FC",
|
||||
borderWidth: 2,
|
||||
shadowColor: "#8cd3ef",
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 120,
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
// {
|
||||
// type: "map",
|
||||
// map: mapName,
|
||||
// zlevel: -1,
|
||||
// aspectScale: 1,
|
||||
// zoom: 1.2,
|
||||
// layoutCenter: ["50%", "51%"],
|
||||
// layoutSize: "100%",
|
||||
// roam: false,
|
||||
// silent: true,
|
||||
// regions: [
|
||||
// {
|
||||
// name: "南海诸岛",
|
||||
// itemStyle: {
|
||||
// // 隐藏地图
|
||||
// normal: {
|
||||
// opacity: 0, // 为 0 时不绘制该图形
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// show: false // 隐藏文字
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 1,
|
||||
// borderColor: "rgba(17, 149, 216,0.6)",
|
||||
// borderColor: "#5AD0E0",
|
||||
// shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
// shadowOffsetY: 5,
|
||||
// shadowBlur: 15,
|
||||
// areaColor: "rgba(5,21,35,0.1)",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "map",
|
||||
// map: mapName,
|
||||
// zlevel: -2,
|
||||
// aspectScale: 1,
|
||||
// zoom: 1.2,
|
||||
// layoutCenter: ["50%", "52%"],
|
||||
// layoutSize: "100%",
|
||||
// roam: false,
|
||||
// silent: true,
|
||||
// regions: [
|
||||
// {
|
||||
// name: "南海诸岛",
|
||||
// itemStyle: {
|
||||
// // 隐藏地图
|
||||
// normal: {
|
||||
// opacity: 0, // 为 0 时不绘制该图形
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// show: false // 隐藏文字
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 1,
|
||||
// // borderColor: "rgba(57, 132, 188,0.4)",
|
||||
// borderColor: "#1C75C8",
|
||||
// shadowColor: "rgba(65, 214, 255,1)",
|
||||
// shadowOffsetY: 5,
|
||||
// shadowBlur: 15,
|
||||
// areaColor: "transpercent",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// {
|
||||
// type: "map",
|
||||
// map: mapName,
|
||||
// zlevel: -3,
|
||||
// aspectScale: 1,
|
||||
// zoom: 1.2,
|
||||
// layoutCenter: ["50%", "53%"],
|
||||
// layoutSize: "101%",
|
||||
// roam: false,
|
||||
// silent: true,
|
||||
// regions: [
|
||||
// {
|
||||
// name: "南海诸岛",
|
||||
// itemStyle: {
|
||||
// // 隐藏地图
|
||||
// normal: {
|
||||
// opacity: 0, // 为 0 时不绘制该图形
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// show: false // 隐藏文字
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 1,
|
||||
// // borderColor: "rgba(11, 43, 97,0.8)",
|
||||
// borderColor: "rgba(58,149,253,0.4)",
|
||||
// shadowColor: "rgba(58,149,253,1)",
|
||||
// shadowOffsetY: 15,
|
||||
// shadowBlur: 10,
|
||||
// areaColor: "transpercent",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "map",
|
||||
// map: mapName,
|
||||
// zlevel: -4,
|
||||
// aspectScale: 1,
|
||||
// zoom: 1.2,
|
||||
// layoutCenter: ["50%", "54%"],
|
||||
// layoutSize: "103%",
|
||||
// roam: false,
|
||||
// silent: true,
|
||||
// regions: [
|
||||
// {
|
||||
// name: "南海诸岛",
|
||||
// itemStyle: {
|
||||
// // 隐藏地图
|
||||
// normal: {
|
||||
// opacity: 0, // 为 0 时不绘制该图形
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// show: false // 隐藏文字
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 5,
|
||||
// // borderColor: "rgba(11, 43, 97,0.8)",
|
||||
// borderColor: "rgba(5,9,57,0.8)",
|
||||
// shadowColor: "rgba(29, 111, 165,0.8)",
|
||||
// shadowOffsetY: 15,
|
||||
// shadowBlur: 10,
|
||||
// areaColor: "rgba(5,21,35,0.1)",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
map: mapName,
|
||||
geoIndex: 0,
|
||||
aspectScale: 1, //长宽比
|
||||
zoom: 0.65,
|
||||
showLegendSymbol: true,
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "120%"
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
// show: false,
|
||||
},
|
||||
},
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// areaColor: {
|
||||
// type: "linear",
|
||||
// x: 1200,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 0,
|
||||
// colorStops: [{
|
||||
// offset: 0,
|
||||
// color: "rgba(3,27,78,0.75)", // 0% 处的颜色
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: "rgba(58,149,253,0.75)", // 50% 处的颜色
|
||||
// },],
|
||||
// global: true, // 缺省为 false
|
||||
// },
|
||||
// borderColor: "#fff",
|
||||
// borderWidth: 0.2,
|
||||
// },
|
||||
// },
|
||||
layoutCenter: ["50%", "50%"],
|
||||
layoutSize: "180%",
|
||||
animation: true,
|
||||
markPoint: {
|
||||
symbol: "none"
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
|
||||
echarts.registerMap(mapName, geoJson)
|
||||
const bg = echarts.init(myChart)
|
||||
bg.setOption(option);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
return copy;
|
||||
}
|
||||
|
||||
const townJson=deepCopy(geoJson)
|
||||
const route = useRoute()
|
||||
townJson.features = townJson.features.filter((item) => {
|
||||
return item.properties.name == route.query.town
|
||||
})
|
||||
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
||||
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
|
||||
|
||||
const pointerFn = () => {
|
||||
return
|
||||
let list = []
|
||||
geoJson.center.forEach((item, index) => {
|
||||
list.push({
|
||||
coord: item,
|
||||
symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
|
||||
symbolSize: [100, 30], // 图片大小
|
||||
symbolOffset: ['50%', '-50%'],
|
||||
value: geoJson.features[index]?.properties.name || '泸县',
|
||||
animation: true,
|
||||
label: {
|
||||
show: true,
|
||||
color: 'white',
|
||||
fontSize: 14,
|
||||
},
|
||||
},)
|
||||
})
|
||||
return list
|
||||
}
|
||||
onMounted(() => {
|
||||
var mapName = 'lz';
|
||||
const myChart = document.getElementById("farmerchart")
|
||||
/*获取地图数据*/
|
||||
let option = {
|
||||
geo: [
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
aspectScale: 1,
|
||||
zoom: 1,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "80%",
|
||||
roam: false,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
show: true,
|
||||
map: mapName,
|
||||
zoom: 1,
|
||||
aspectScale: 1,
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'transparent',
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
|
||||
areaColor: {
|
||||
type: 'radial', // linear 线性渐变 radial径向渐变
|
||||
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
|
||||
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
|
||||
r: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: '#A46759' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.1, color: '#A46759' // 0% 处的颜色
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
offset: 1, color: '#FFB821' // 100% 处的颜色
|
||||
}],
|
||||
|
||||
}
|
||||
|
||||
|
||||
// borderWidth: 0
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 1,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "81%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 1,
|
||||
layoutCenter: ["50%", "52%"],
|
||||
layoutSize: "82%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -2,
|
||||
aspectScale: 1,
|
||||
zoom: 1,
|
||||
layoutCenter: ["50%", "53%"],
|
||||
layoutSize: "83%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.4)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapName,
|
||||
zlevel: -4,
|
||||
aspectScale: 1,
|
||||
zoom: 1,
|
||||
layoutCenter: ["50%", "54%"],
|
||||
layoutSize: "84%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 5,
|
||||
// borderColor: "rgba(11, 43, 97,0.8)",
|
||||
borderColor: "rgba(5,9,57,0.8)",
|
||||
shadowColor: "rgba(29, 111, 165,0.8)",
|
||||
shadowOffsetY: 15,
|
||||
shadowBlur: 10,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '资产数',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
rippleEffect: {
|
||||
period: 4, //动画时间，值越小速度越快
|
||||
brushType: 'fill', //波纹绘制方式 stroke, fill
|
||||
scale: 12, //波纹圆环最大限制，值越大波纹越大
|
||||
number: 2,
|
||||
},
|
||||
|
||||
// 发散点的大小
|
||||
symbolSize: function (val) {
|
||||
return 4
|
||||
// return val[2] / 10;
|
||||
},
|
||||
markPoint: {
|
||||
data: pointerFn()
|
||||
},
|
||||
|
||||
data: (() => {
|
||||
return
|
||||
let data = {
|
||||
资产数: geoJson.center
|
||||
|
||||
}
|
||||
let finalData = []
|
||||
Object.keys(data).map((i, index) => {
|
||||
let child = data[i].map((row, index) => ({
|
||||
value: row,
|
||||
itemStyle: {
|
||||
color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
|
||||
},
|
||||
}))
|
||||
|
||||
finalData = [...finalData, ...child]
|
||||
})
|
||||
return finalData
|
||||
})(),
|
||||
},
|
||||
],
|
||||
};
|
||||
document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
|
||||
|
||||
echarts.registerMap(mapName, townJson)
|
||||
const bg = echarts.init(myChart)
|
||||
bg.setOption(option);
|
||||
|
||||
bg.on('click', function (params) {
|
||||
// mapClick()
|
||||
console.log(params.name)
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
#chart2{
|
||||
transform: rotateX(20deg);
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c">
|
||||
<div class="top">
|
||||
<div class="center">
|
||||
<div class="top-c">
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<div class=" c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
|
||||
<div class=" c-top-tits"><span class="color-font">同谭政地块</span> </div>
|
||||
|
|
@ -84,11 +84,11 @@ const router=useRouter()
|
|||
}
|
||||
}
|
||||
|
||||
.c {
|
||||
.center {
|
||||
width: 49vw;
|
||||
height: 93vh;
|
||||
|
||||
.top {
|
||||
.top-c {
|
||||
margin-top: 1vh;
|
||||
width: 49vw;
|
||||
height: 61vh;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue