更换地图
parent
24ed8702a8
commit
2303abb053
File diff suppressed because one or more lines are too long
|
|
@ -3,10 +3,10 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import chinaMap from '@/assets/json/china.json'
|
import mapJson from '@/assets/json/fujian.json';
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
echarts.registerMap('china', { geoJSON: chinaMap })
|
echarts.registerMap('js', mapJson)
|
||||||
getCharts();
|
getCharts();
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
@ -17,201 +17,43 @@ const getCharts = () => {
|
||||||
// 手动移除该属性
|
// 手动移除该属性
|
||||||
dom.removeAttribute('_echarts_instance_')
|
dom.removeAttribute('_echarts_instance_')
|
||||||
var myChart = echarts.init(dom);
|
var myChart = echarts.init(dom);
|
||||||
var outname = ['南海诸岛', '北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门']
|
|
||||||
var outvalue = [80, 524, 113, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 94, 31, 104, 36, 1052, 33, 347, 9, 157, 22, 4, 18, 5, 6398, 41, 210, 484, 404, 22, 43, 25, 225]
|
|
||||||
var outdata = []
|
|
||||||
var scatter = [[110.81, 33.40, 99], [116.55, 40.01, 77], [113.11, 28.40, 34], [106.44, 29.50, 112], [112.85, 38.95, 6], [82.78, 43.27, 50]]
|
|
||||||
var lineToLf = [
|
|
||||||
{
|
|
||||||
name: '11',
|
|
||||||
coords: [[110.81, 33.40], [116.55, 40.01]],
|
|
||||||
lineStyle: { color: '#c1bb1f' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '22',
|
|
||||||
coords: [[113.11, 28.40], [116.55, 40.01]],
|
|
||||||
lineStyle: { color: '#f9b207' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '33',
|
|
||||||
coords: [[106.44, 29.50], [116.55, 40.01]],
|
|
||||||
lineStyle: { color: '#3eef1d' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '44',
|
|
||||||
coords: [[112.85, 38.95], [116.55, 40.01]],
|
|
||||||
lineStyle: { color: '#3eef1d' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '55',
|
|
||||||
coords: [[82.78, 43.27], [116.55, 40.01]],
|
|
||||||
lineStyle: { color: '#3eef1d' }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
|
|
||||||
for (var i = 0; i < outname.length; i++) {
|
|
||||||
outdata.push({
|
|
||||||
name: outname[i],
|
|
||||||
value: outvalue[i]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
var option = {
|
var option = {
|
||||||
tooltip: {
|
// backgroundColor: '#020933',
|
||||||
show: true,
|
geo: [{
|
||||||
formatter: function (params) {
|
map: 'js',
|
||||||
return ' ' + params.name + ' ' + params.value + '人 '
|
roam: true, //是否允许缩放
|
||||||
}
|
zoom: 1.1, //默认显示级别
|
||||||
},
|
scaleLimit: {
|
||||||
|
min: 0.5,
|
||||||
visualMap: {
|
max: 3
|
||||||
type: 'continuous',
|
}, //缩放级别
|
||||||
text: ['', ''],
|
itemStyle: {
|
||||||
showLabel: true,
|
normal: {
|
||||||
left: '50',
|
areaColor: '#254287',
|
||||||
min: 0,
|
borderColor: '#3fdaff',
|
||||||
max: 50,
|
borderWidth: 2,
|
||||||
seriesIndex: [0],
|
shadowColor: 'rgba(63, 218, 255, 0.5)',
|
||||||
inRange: {
|
shadowBlur: 30
|
||||||
color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096']
|
|
||||||
},
|
|
||||||
|
|
||||||
outOfRange: {
|
|
||||||
color: ['#999999']
|
|
||||||
},
|
|
||||||
splitNumber: 0
|
|
||||||
},
|
|
||||||
geo: {
|
|
||||||
map: 'china',
|
|
||||||
show: true,
|
|
||||||
roam: false,
|
|
||||||
label: {
|
|
||||||
emphasis: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
}
|
|
||||||
// itemStyle: {
|
|
||||||
// normal: {
|
|
||||||
// borderColor: 'rgba(0,63,140,0.2)',
|
|
||||||
// shadowColor: 'rgba(0,63,140,0.2)',
|
|
||||||
// shadowOffsetY: 20,
|
|
||||||
// shadowBlur: 30
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'map',
|
|
||||||
map: 'china',
|
|
||||||
aspectScale: 0.75,
|
|
||||||
zoom:1.2,
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
areaColor: '#254287',
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
areaColor: '#FFAE00'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
itemStyle: {
|
areaColor: '#2B91B7',
|
||||||
areaColor: null,
|
|
||||||
borderWidth: 3,
|
|
||||||
shadowColor: 'rgba(0,0,0,.2)',
|
|
||||||
shadowOffsetX: 5,
|
|
||||||
shadowOffsetY: 5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
animation: false,
|
|
||||||
data: outdata
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '散点',
|
|
||||||
type: 'effectScatter',
|
|
||||||
coordinateSystem: 'geo',
|
|
||||||
showEffectOn: 'render', // 加载完毕显示特效
|
|
||||||
top: 10,
|
|
||||||
bottom: 10,
|
|
||||||
zlevel: 2,
|
|
||||||
|
|
||||||
rippleEffect: {
|
|
||||||
number: 5, // 波纹数量
|
|
||||||
period: 4, // 动画周期 数值越大，波动越慢
|
|
||||||
scale: 3.5, // 动画中波纹的最大缩放比例
|
|
||||||
brushType: 'stroke'
|
|
||||||
},
|
|
||||||
data: scatter.map((it) => {
|
|
||||||
return {
|
|
||||||
name: 'cccccccc', value: it,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#f9b207', // 如果想颜色不一样 就换成这个，并且 在上面color数组中修改，添加想要的颜色，--colorF()
|
|
||||||
areaColor: '#f9b207'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
symbolSize: function (val) {
|
|
||||||
return val[2] / 10
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 地图线的动画效果
|
label: {
|
||||||
{
|
show: true,
|
||||||
type: 'lines',
|
color: '#ffffff',
|
||||||
zlevel: 2,
|
emphasis: {
|
||||||
symbol: ['none', 'arrow'],
|
color: '#020933',
|
||||||
// 自定义图标
|
}
|
||||||
effect: {
|
},
|
||||||
show: true,
|
tooltip: {
|
||||||
period: 6,
|
show: false
|
||||||
trailLength: 0,
|
}
|
||||||
symbol: planePath,
|
}],
|
||||||
symbolSize: 15
|
series: []
|
||||||
},
|
};
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'a6c84c',
|
|
||||||
width: 1,
|
|
||||||
opacity: 0.6,
|
|
||||||
curveness: 0.2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 默认图标
|
|
||||||
// effect: {
|
|
||||||
// show: true,
|
|
||||||
// period: 4, // 箭头指向速度，值越小速度越快
|
|
||||||
// trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
|
|
||||||
// symbol: 'arrow', // 箭头图标
|
|
||||||
// symbolSize: 3, // 图标大小
|
|
||||||
// },
|
|
||||||
// lineStyle: {
|
|
||||||
// normal: {
|
|
||||||
// color: '#f9b207',
|
|
||||||
// width: 0.1, // 尾迹线条宽度
|
|
||||||
// opacity: 0.5, // 尾迹线条透明度
|
|
||||||
// curveness: 0.3 // 尾迹线条曲直度
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
data: lineToLf,
|
|
||||||
|
|
||||||
z: 3
|
myChart.setOption(option);
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue