配置Charts地图
This commit is contained in:
@@ -1,217 +1,162 @@
|
||||
<!-- 地图组件 -->
|
||||
<template>
|
||||
<div class="bars_w" :id="id"></div>
|
||||
<div class="bars_w" ref="chartMap" id="chartMap"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, onMounted, defineEmits } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, ref, nextTick, onMounted, defineEmits } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
// import cqMap from '../../views/ECharts/zg.json'
|
||||
// import 'echarts/map/js/china.js'
|
||||
|
||||
import chinaJson from '@/assets/map/zh.json'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
datas: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
// cqMap: {
|
||||
// // type: String,
|
||||
// // required: true
|
||||
// }
|
||||
})
|
||||
const myCharts = ref()
|
||||
const emit = defineEmits(['getRegionByRegionId'])
|
||||
|
||||
onMounted(() => {
|
||||
GetEchar()
|
||||
})
|
||||
const convertData = function (data) {
|
||||
var res = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name]
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
})
|
||||
datas: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
})
|
||||
|
||||
const GetEchar = () => {
|
||||
nextTick(() => {
|
||||
let chartDom = document.getElementById(props.id)
|
||||
const myCharts = ref()
|
||||
|
||||
const mapJson = ref()
|
||||
|
||||
const fetchConfig = async (name: string) => {
|
||||
const res = await import(`../../assets/map/${name}.json`)
|
||||
return res.default
|
||||
// GetEchar(res.default)
|
||||
}
|
||||
// fetchConfig()
|
||||
|
||||
const emit = defineEmits(['getRegionByRegionId'])
|
||||
onMounted(() => {
|
||||
GetEchar()
|
||||
})
|
||||
|
||||
const GetEchar = async () => {
|
||||
let chartDom = document.getElementById('chartMap')
|
||||
myCharts.value = echarts.init(chartDom)
|
||||
|
||||
axios.get(`./zg.json`).then((res) => {
|
||||
echarts.registerMap('china', res.data)
|
||||
|
||||
let option = {
|
||||
backgroundColor: '#001540',
|
||||
echarts.registerMap('china', await fetchConfig('中国')) //注册可用的地图
|
||||
var option = {
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'china',
|
||||
roam: true,
|
||||
top: 0,
|
||||
left: 0,
|
||||
zoom: 1,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
//地图？
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 0,
|
||||
aspectScale: 0.75, //长宽比
|
||||
showLegendSymbol: false, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
zoom: 1,
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
animation: false
|
||||
},
|
||||
//地图点的动画效果
|
||||
{
|
||||
// name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
color: 'rgba(0,0,0,0.7)'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
myCharts.value.setOption(option)
|
||||
})
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
myCharts.value.resize()
|
||||
})
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(51, 69, 129, .8)', //地图背景色
|
||||
borderColor: '#999999',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#ccc',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
regions: [
|
||||
{
|
||||
name: '南海诸岛',
|
||||
itemStyle: {
|
||||
// 隐藏地图
|
||||
normal: {
|
||||
opacity: 0 // 为 0 时不绘制该图形
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false // 隐藏文字
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
myCharts.value.setOption(option)
|
||||
window.addEventListener('resize', resizeHandler)
|
||||
|
||||
//设置默认选中高亮部分
|
||||
let index = 11
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
})
|
||||
|
||||
// 点击事件
|
||||
myCharts.value.on('click', (e) => {
|
||||
emit('getRegionByRegionId', e.data)
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: 0
|
||||
})
|
||||
if (e.dataIndex != index) {
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
})
|
||||
}
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: e.dataIndex
|
||||
})
|
||||
index = e.dataIndex
|
||||
})
|
||||
// 当鼠标离开时
|
||||
myCharts.value.on('mouseout', function (e) {
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// 点击事件
|
||||
myCharts.value.on('click', e => {
|
||||
emit('getRegionByRegionId', e.data)
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: 0
|
||||
})
|
||||
if (e.dataIndex != index) {
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
})
|
||||
}
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: e.dataIndex
|
||||
})
|
||||
index = e.dataIndex
|
||||
})
|
||||
// 当鼠标离开时
|
||||
myCharts.value.on('mouseout', function (e) {
|
||||
myCharts.value.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
})
|
||||
})
|
||||
}
|
||||
const resizeHandler = () => {
|
||||
myCharts.value?.resize()
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeHandler)
|
||||
myCharts.value?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bars_w {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user