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

first

Browse Source
This commit is contained in:
仲么了
2024-02-19 13:44:32 +08:00
commit 361cbb713d
238 changed files with 202544 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/components/echarts/MyEchart.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<div ref="chartRef" class="my-chart" />
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
// import echarts from './echarts'
import * as echarts from 'echarts' // 全引入
import 'echarts/lib/component/dataZoom'
const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options'])
let chart: echarts.ECharts | any = null
const resizeHandler = () => {
chart.getZr().painter.getViewportRoot().style.display = 'none'
requestAnimationFrame(() => {
chart.resize()
chart.getZr().painter.getViewportRoot().style.display = ''
})
}
const initChart = () => {
chart?.dispose()
chart = echarts.init(chartRef.value as HTMLDivElement)
chart.setOption({
title: {
left: 'center',
textStyle: {
color: '#000',
fontSize: 18
},
...(props.options.title || null)
},
tooltip: {
trigger: 'axis',
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)',
borderWidth: 0,
...(props.options.tooltip || null)
},
legend: {
right: 20,
top: 0,
itemGap: 10,
itemStyle: {},
textStyle: {
fontSize: 12,
padding: [2, 0, 0, 0] //[上、右、下、左]
},
itemWidth: 15,
itemHeight: 10,
...(props.options.legend || null)
},
grid: {
top: '50px',
left: '10px',
right: '60px',
bottom: '40px',
containLabel: true
},
xAxis: handlerXAxis(),
yAxis: handlerYAxis(),
dataZoom: [
{
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100,
...(props.options.dataZoom || null)
},
{
start: 0,
height: 13,
bottom: '20px',
end: 100,
...(props.options.dataZoom || null)
}
],
color: [
...(props.options.color || ''),
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
],
...props.options.options
})
}
const handlerYAxis = () => {
let temp = {
type: 'value',
nameTextStyle: {
color: '#000'
},
minInterval: 1,
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
axisLabel: {
color: '#000',
fontSize: 14
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#000'],
type: 'dashed',
opacity: 0.5
}
}
}
// props.options.xAxis 是数组还是对象
if (Array.isArray(props.options.yAxis)) {
return props.options.yAxis.map((item: any) => {
return {
...item,
...temp
}
})
} else {
return {
...temp,
...props.options.yAxis
}
}
}
const handlerXAxis = () => {
let temp = {
type: 'category',
axisTick: { show: false },
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
textStyle: {
fontFamily: 'dinproRegular',
color: '#000',
fontSize: '12'
}
}
}
// props.options.xAxis 是数组还是对象
if (Array.isArray(props.options.xAxis)) {
return props.options.xAxis.map((item: any) => {
return {
...item,
...temp
}
})
} else {
return {
...temp,
...props.options.xAxis
}
}
}
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
defineExpose({ initChart })
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
chart?.dispose()
})
watch(
() => props.options,
(newVal, oldVal) => {
initChart()
}
)
</script>
<style lang="scss" scoped>
.my-chart {
height: 100%;
width: 100%;
}
</style>

217
src/components/echarts/MyEchartMap.vue Normal file
View File

@@ -0,0 +1,217 @@
<!-- 地图组件 -->
<template>
<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, watch, onMounted, defineEmits } from 'vue'
import * as echarts from 'echarts4'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const props = defineProps(['options'])
const myCharts = ref()
const showCircle = ref(false)
const fetchConfig = async (name: string) => {
const res = await import(`../../assets/map/${name}.json`)
return res.default
// GetEchar(res.default)
}
// fetchConfig()
const emit = defineEmits(['getRegionByRegion', 'eliminate'])
onMounted(() => {})
const GetEchar = async (name: string) => {
let chartDom = document.getElementById('chartMap')
myCharts.value?.dispose()
myCharts.value = echarts.init(chartDom)
name == '中国' ? (showCircle.value = false) : (showCircle.value = true)
echarts.registerMap(name, await fetchConfig(name)) //注册可用的地图
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: name,
zoom: 1.2,
// top: 0,
// bottom: 0,
roam: true,
label: {
normal: {
show: true,
fontSize: '14',
color: 'rgba(0,0,0,0.7)'
}
},
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 // 隐藏文字
// }
// }
// ]
},
...props.options.options
}
if (props.options.visualMap) {
option.visualMap = props.options.visualMap
}
myCharts.value.setOption(option)
window.addEventListener('resize', resizeHandler)
// 点击事件
myCharts.value.off('click')
myCharts.value.on('click', (e: any) => {
if (name == '中国' && e.componentIndex == 0) {
MapReturn(e.name)
// console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~ MapReturn(e.name):', MapReturn(e.name))
}
})
}
const MapReturn = (name: string) => {
let area = dictData.state.area?.[0]?.children ?? []
let list = {}
let flag = true
for (let i = 0; i < area.length; i++) {
if (area[i].name == name) {
list = area[i]
flag = false
emit('getRegionByRegion', list)
break
}
}
if (flag) {
emit('eliminate', name)
}
}
// 返回
const circle = () => {
emit('getRegionByRegion', dictData.state.area[0])
showCircle.value = false
}
const resizeHandler = () => {
myCharts.value?.resize()
}
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
myCharts.value?.dispose()
})
defineExpose({ GetEchar })
watch(
() => props.options,
(newVal, oldVal) => {
// GetEchar('中国')
}
)
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 100%;
}
.iconfont {
cursor: pointer;
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
font-size: 20px;
}
</style>

84
src/components/echarts/echarts.ts Normal file
View File

@@ -0,0 +1,84 @@
import * as echarts from 'echarts/core'
//引入需要的图表，需要什么就加什么
import {
BarChart,
LineChart,
PieChart,
ScatterChart,
EffectScatterChart,
RadarChart,
GaugeChart
} from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
ToolboxComponent,
// 数据集组件
DatasetComponent,
// 内置数据转换器组件 (filter, sort)
TransformComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
import type {
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineSeriesOption
} from 'echarts/charts'
import type {
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponentOption,
GridComponentOption,
LegendComponentOption,
ToolboxComponentOption,
DatasetComponentOption
} from 'echarts/components'
import type { ComposeOption } from 'echarts/core'
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
| LegendComponentOption
| ToolboxComponentOption
>
// 注册必须的组件,上面引入的都需要在此注册
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
LegendComponent,
ToolboxComponent,
TransformComponent,
BarChart,
LineChart,
PieChart,
ScatterChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
EffectScatterChart,
RadarChart,
GaugeChart
])
// 导出
export default echarts

1544
src/components/echarts/rmsboxi.vue Normal file
View File

File diff suppressed because it is too large Load Diff

1153
src/components/echarts/shushiboxi.vue Normal file
View File

File diff suppressed because it is too large Load Diff