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

添加

Browse Source
This commit is contained in:
GGJ
2023-12-26 14:15:05 +08:00
parent 5fc82743ef
commit 0c95c1183b
11 changed files with 555 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -13,6 +13,7 @@
"@vueuse/core": "^10.7.0",
"axios": "^1.6.2",
"crypto-js": "^4.2.0",
"echarts": "^5.4.3",
"element-plus": "^2.4.4",
"lodash-es": "^4.17.21",
"mitt": "^3.0.1",

27
pnpm-lock.yaml generated
View File

@@ -17,6 +17,12 @@ dependencies:
crypto-js:
specifier: ^4.2.0
version: 4.2.0
default-passive-events:
specifier: ^2.0.0
version: 2.0.0
echarts:
specifier: ^5.4.3
version: 5.4.3
element-plus:
specifier: ^2.4.4
version: 2.4.4(vue@3.3.13)
@@ -734,11 +740,22 @@ packages:
resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==, tarball: https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz}
dev: true
/default-passive-events@2.0.0:
resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==, tarball: https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz}
dev: false
/delayed-stream@1.0.0:
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==, tarball: https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz}
engines: {node: '>=0.4.0'}
dev: false
/echarts@5.4.3:
resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz}
dependencies:
tslib: 2.3.0
zrender: 5.4.4
dev: false
/element-plus@2.4.4(vue@3.3.13):
resolution: {integrity: sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz}
peerDependencies:
@@ -1074,6 +1091,10 @@ packages:
is-number: 7.0.0
dev: true
/tslib@2.3.0:
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz}
dev: false
/typescript@5.3.3:
resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==, tarball: https://registry.npmmirror.com/typescript/-/typescript-5.3.3.tgz}
engines: {node: '>=14.17'}
@@ -1181,3 +1202,9 @@ packages:
/yallist@4.0.0:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==, tarball: https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz}
dev: true
/zrender@5.4.4:
resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==, tarball: https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz}
dependencies:
tslib: 2.3.0
dev: false

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

@@ -0,0 +1,88 @@
<template>
<div ref="chartRef" class="my-chart" />
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import echarts from './echarts'
import 'echarts/lib/component/dataZoom'
const props = defineProps(['options'])
const chartRef = ref<HTMLDivElement>()
let chart: echarts.ECharts | null = null
const resizeHandler = () => {
chart?.resize()
}
const initChart = () => {
chart = echarts.init(chartRef.value as HTMLDivElement)
chart.setOption({
tooltip: {
showContent: true,
trigger: 'axis',
backgroundColor: 'rgba(8,36,68,.7)',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
color: '#ffff',
textStyle: {
color: '#ffff'
}
},
grid: {
top: '30px',
left: '40px',
right: '40px',
bottom: '40px',
containLabel: true
},
dataZoom: [
{
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100
},
{
start: 0,
height: 13,
bottom: '20px',
end: 100
}
],
color: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
],
...props.options
})
}
onMounted(() => {
setTimeout(() => {
initChart()
}, 20)
window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
chart?.dispose()
})
</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 class="bars_w" :id="id"></div>
</template>
<script setup>
import { 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 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)
})
}
}
return res
}
const GetEchar = () => {
nextTick(() => {
let chartDom = document.getElementById(props.id)
myCharts.value = echarts.init(chartDom)
axios.get(`./zg.json`).then((res) => {
echarts.registerMap('china', res.data)
let option = {
backgroundColor: '#001540',
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'
}
}
},
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
}
},
itemStyle: {
normal: {
shadowBlur: 10
}
},
zlevel: 1
}
]
}
myCharts.value.setOption(option)
})
window.addEventListener('resize', function () {
myCharts.value.resize()
})
//设置默认选中高亮部分
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
})
})
})
}
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
</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

4
src/layouts/admin/components/aside.vue
View File

@@ -27,8 +27,8 @@ const menuWidth = computed(() => config.menuWidth())
<style scoped lang="scss">
.layout-aside-Default {
background: var(--ba-bg-color-overlay);
margin: 16px 0 16px 16px;
height: calc(100vh - 32px);
margin: 10px 0 10px 10px;
height: calc(100vh - 20px);
box-shadow: var(--el-box-shadow-light);
border-radius: var(--el-border-radius-base);
overflow: hidden;

4
src/layouts/admin/components/navBar/default.vue
View File

@@ -16,8 +16,8 @@ const config = useConfig()
<style lang="scss" scoped>
.nav-bar {
display: flex;
height: 50px;
margin: 20px var(--ba-main-space) 0 var(--ba-main-space);
height: 40px;
margin: 10px var(--ba-main-space) 0 var(--ba-main-space);
:deep(.nav-tabs) {
display: flex;
height: 100%;

2
src/styles/var.scss
View File

@@ -2,7 +2,7 @@
@use 'mixins' as *;
// 后台主体窗口左右间距
$main-space: 16px;
$main-space: 10px;
$primary-light: #3f6ad8;
// --ba-background

2
src/utils/layout.ts
View File

@@ -10,7 +10,7 @@ import { useConfig } from '@/stores/config'
export function mainHeight(extra = 0): CSSProperties {
let height = extra
const adminLayoutMainExtraHeight: anyObj = {
Default: 70,
Default: 60,
Classic: 50,
Streamline: 60
}

115
src/views/dashboard/components/echart.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div>
<my-echart class="bars_w" :options="scatterOptions" />
<div class="">
<my-echart class="bars_w" :options="scatterOptions" />
<my-echart class="bars_w" :options="scatterOptions" />
</div>
</div>
</template>
<script setup lang="ts">
import MyEchart from '@/components/echarts/MyEchart.vue'
import { reactive, ref } from 'vue'
const scatterOptions = reactive({
title: {
text: '散点图',
// top: 'center',
left: 'center'
},
toolbox: {
feature: {
dataView: {
title: '数据视图',
readOnly: false
},
saveAsImage: {
title: '保存为图片',
name: '散点图'
} //图片下载功能
}
},
xAxis: {
scale: true
},
yAxis: {
scale: true
},
series: [
{
type: 'effectScatter',
symbolSize: 20,
data: [
[172.7, 105.2],
[153.4, 42]
]
},
{
type: 'scatter',
// prettier-ignore
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
]
}
]
})
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
</style>

21
src/views/dashboard/index.vue
View File

@@ -1,8 +1,21 @@
<template>
123123
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="图形" name="1">
<Echart />
</el-tab-pane>
<el-tab-pane label="表格" name="2">Config</el-tab-pane>
</el-tabs>
</template>
<script lang='ts' setup>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const activeName = ref('1')
import Echart from '@/views/dashboard/components/echart.vue'
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
</style>