Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并代码

Browse Source
This commit is contained in:
仲么了
2023-12-29 16:32:36 +08:00
parent de3e42282e 4014c7ea70
commit 0ed9c950ee
3 changed files with 203 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/echarts/MyEchart.vue
View File

@@ -11,7 +11,7 @@ const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options'])
let chart: echarts.ECharts | null = null
const resizeHandler = () => {
chart?.resize()
chart?.resize()
}
const initChart = () => {
chart?.dispose()
@@ -19,15 +19,14 @@ const initChart = () => {
chart = echarts.init(chartRef.value as HTMLDivElement)
chart.setOption({
title: {
...props.options.title,
left: 'center',
textStyle: {
color: '#000',
fontSize: 18
}
},
...props.options.title
},
tooltip: {
...(props.options.tooltip || null),
trigger: 'axis',
axisPointer: {
@@ -44,10 +43,10 @@ const initChart = () => {
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0
borderWidth: 0,
...(props.options.tooltip || null)
},
legend: {
...(props.options.xAxis.legend || null),
right: 20,
top: 0,
itemGap: 10,
@@ -57,7 +56,8 @@ const initChart = () => {
padding: [2, 0, 0, 0] //[上、右、下、左]
},
itemWidth: 15,
itemHeight: 10
itemHeight: 10,
...(props.options.legend || null)
},
grid: {
@@ -65,12 +65,10 @@ const initChart = () => {
left: '10px',
right: '40px',
bottom: '40px',
containLabel: true
},
xAxis: [
{
...(props.options.xAxis || null),
type: 'category',
axisTick: { show: false },
axisLine: {
@@ -84,12 +82,13 @@ const initChart = () => {
color: '#000',
fontSize: '12'
}
}
},
...(props.options.xAxis || null)
}
],
yAxis: [
{
...(props.options.yAxis || null),
type: 'value',
nameTextStyle: {
@@ -113,7 +112,8 @@ const initChart = () => {
type: 'dashed',
opacity: 0.5
}
}
},
...(props.options.yAxis || null),
}
],
dataZoom: [

144
src/components/echarts/MyEchartMap.vue
View File

@@ -1,25 +1,18 @@
<!-- 地图组件 -->
<template>
<div class="bars_w" ref="chartMap" id="chartMap"></div>
<div style="position: relative">
<div class="bars_w" ref="chartMap" id="chartMap"></div>
<span @click="circle" v-show="showCircle" class="iconfont icon-back" style="color: #003078"></span>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, ref, nextTick, onMounted, defineEmits } from 'vue'
import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
import * as echarts from 'echarts'
import chinaJson from '@/assets/map/zh.json'
import axios from 'axios'
const props = defineProps({
datas: {
type: Array,
required: true
}
})
const props = defineProps(['options'])
const myCharts = ref()
const mapJson = ref()
const showCircle = ref(false)
const fetchConfig = async (name: string) => {
const res = await import(`../../assets/map/${name}.json`)
@@ -29,19 +22,63 @@ const fetchConfig = async (name: string) => {
// fetchConfig()
const emit = defineEmits(['getRegionByRegionId'])
onMounted(() => {
GetEchar('中国')
})
onMounted(() => {})
const GetEchar = async (name:string) => {
const GetEchar = async (name: string) => {
let chartDom = document.getElementById('chartMap')
myCharts.value?.resize()
myCharts.value = echarts.init(chartDom)
echarts.registerMap('china', await fetchConfig(name)) //注册可用的地图
var option = {
let option = {
title: {
left: 'center',
top: '3%',
...props.options.title
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
...(props.options.tooltip || null)
},
legend: {
orient: 'vertical',
left: 26,
bottom: 40,
itemWidth: 16,
itemHeight: 16,
...(props.options.legend || null)
},
color: [
...(props.options.color || ''),
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
],
geo: {
map: 'china',
zoom: 1,
roam: true,
label: {
normal: {
@@ -100,53 +137,29 @@ const GetEchar = async (name:string) => {
}
}
]
}
},
...props.options.options
}
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 => {
console.log('🚀 ~ file: MyEchartMap.vue:139 ~ GetEchar ~ e:', e.name)
GetEchar(e.name)
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.off('click')
myCharts.value.on('click', (e: any) => {
if (name == '中国' && e.componentIndex == 0) {
GetEchar(e.name)
showCircle.value = true
}
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
})
emit('getRegionByRegionId', e)
})
}
// 返回
const circle = () => {
GetEchar('中国')
showCircle.value = false
}
const resizeHandler = () => {
myCharts.value?.resize()
}
@@ -154,6 +167,13 @@ onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
myCharts.value?.dispose()
})
watch(
() => props.options,
(newVal, oldVal) => {
GetEchar('中国')
}
)
</script>
<style lang="scss" scoped>
@@ -161,4 +181,12 @@ onBeforeUnmount(() => {
width: 100%;
height: 100%;
}
.iconfont {
cursor: pointer;
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
font-size: 20px;
}
</style>