kevinMao
/
canteen_system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图

This commit is contained in:
TimSpan 2025-05-15 14:48:37 +08:00
parent 63e68c3934
commit 36403c0355
9 changed files with 817 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/common/echart/map/fujian.js Normal file
View File

File diff suppressed because one or more lines are too long

452
src/common/echart/style/theme.ts Normal file
View File

@ -0,0 +1,452 @@
export const theme = {
color: ["#2d8cf0", "#19be6b", "#ff9900", "#E46CBB", "#9A66E4", "#ed3f14"],
backgroundColor: "rgba(0,0,0,0)",
textStyle: {},
title: {
textStyle: {
color: "#516b91",
},
subtextStyle: {
color: "#93b7e3",
},
},
line: {
itemStyle: {
normal: {
borderWidth: "2",
},
},
lineStyle: {
normal: {
width: "2",
},
},
symbolSize: "6",
symbol: "emptyCircle",
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: "2",
},
},
lineStyle: {
normal: {
width: "2",
},
},
symbolSize: "6",
symbol: "emptyCircle",
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: "#ccc",
},
emphasis: {
barBorderWidth: 0,
barBorderColor: "#ccc",
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
emphasis: {
borderWidth: 0,
borderColor: "#ccc",
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
emphasis: {
borderWidth: 0,
borderColor: "#ccc",
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
emphasis: {
borderWidth: 0,
borderColor: "#ccc",
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
emphasis: {
borderWidth: 0,
borderColor: "#ccc",
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
emphasis: {
borderWidth: 0,
borderColor: "#ccc",
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
emphasis: {
borderWidth: 0,
borderColor: "#ccc",
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
emphasis: {
borderWidth: 0,
borderColor: "#ccc",
},
},
},
candlestick: {
itemStyle: {
normal: {
color: "#edafda",
color0: "transparent",
borderColor: "#d680bc",
borderColor0: "#8fd3e8",
borderWidth: "2",
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: "#ccc",
},
},
lineStyle: {
normal: {
width: 1,
color: "#aaa",
},
},
symbolSize: "6",
symbol: "emptyCircle",
smooth: true,
color: ["#2d8cf0", "#19be6b", "#f5ae4a", "#9189d5", "#56cae2", "#cbb0e3"],
label: {
normal: {
textStyle: {
color: "#eee",
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: "#f3f3f3",
borderColor: "#516b91",
borderWidth: 0.5,
},
emphasis: {
areaColor: "rgba(165,231,240,1)",
borderColor: "#516b91",
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: "#000",
},
},
emphasis: {
textStyle: {
color: "rgb(81,107,145)",
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: "#f3f3f3",
borderColor: "#516b91",
borderWidth: 0.5,
},
emphasis: {
areaColor: "rgba(165,231,240,1)",
borderColor: "#516b91",
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: "#000",
},
},
emphasis: {
textStyle: {
color: "rgb(81,107,145)",
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#cccccc",
},
},
axisTick: {
show: false,
lineStyle: {
color: "#333",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
lineStyle: {
color: ["#eeeeee"],
},
},
splitArea: {
show: false,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#cccccc",
},
},
axisTick: {
show: false,
lineStyle: {
color: "#333",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
lineStyle: {
color: ["#eeeeee"],
},
},
splitArea: {
show: false,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#cccccc",
},
},
axisTick: {
show: false,
lineStyle: {
color: "#333",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#999999",
},
},
splitLine: {
show: true,
lineStyle: {
color: ["#eeeeee"],
},
},
splitArea: {
show: false,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#cccccc",
},
},
axisTick: {
show: false,
lineStyle: {
color: "#333",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#999999",
},
},
splitLine: {
show: true,
lineStyle: {
color: ["#eeeeee"],
},
},
splitArea: {
show: false,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: "#999",
},
emphasis: {
borderColor: "#666",
},
},
},
legend: {
textStyle: {
color: "#fff",
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: "#ccc",
width: 1,
},
crossStyle: {
color: "#ccc",
width: 1,
},
},
},
timeline: {
lineStyle: {
color: "#8fd3e8",
width: 1,
},
itemStyle: {
normal: {
color: "#8fd3e8",
borderWidth: 1,
},
emphasis: {
color: "#8fd3e8",
},
},
controlStyle: {
normal: {
color: "#8fd3e8",
borderColor: "#8fd3e8",
borderWidth: 0.5,
},
emphasis: {
color: "#8fd3e8",
borderColor: "#8fd3e8",
borderWidth: 0.5,
},
},
checkpointStyle: {
color: "#8fd3e8",
borderColor: "rgba(138,124,168,0.37)",
},
label: {
normal: {
textStyle: {
color: "#8fd3e8",
},
},
emphasis: {
textStyle: {
color: "#8fd3e8",
},
},
},
},
visualMap: {
color: ["#516b91", "#59c4e6", "#a5e7f0"],
},
dataZoom: {
backgroundColor: "rgba(0,0,0,0)",
dataBackgroundColor: "rgba(255,255,255,0.3)",
fillerColor: "rgba(167,183,204,0.4)",
handleColor: "#a7b7cc",
handleSize: "100%",
textStyle: {
color: "#333",
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: "#eee",
},
},
emphasis: {
textStyle: {
color: "#eee",
},
},
},
},
};

11
src/components/componentInstall.ts Normal file
View File

@ -0,0 +1,11 @@
import type { DefineComponent } from "vue";
const component = Object.create(null);
/* eslint-disable */
import Echart from "./echartCanvas/index";
component.install = function (vue: DefineComponent) {
// ECharts 图表渲染
vue.component("echart", Echart);
};
export default component;

104
src/components/echartCanvas/index.tsx Normal file
View File

@ -0,0 +1,104 @@
import {
defineComponent,
onMounted,
ref,
watch,
onBeforeUnmount,
reactive,
} from "vue";
// import "../../common/echart/map/fujian.js";
import { theme } from "../../common/echart/style/theme.ts"; // 引入默认主题
import * as echarts from "echarts";
// 定义类型
const PropsType = {
// 图表唯一 id
id: String,
// 图表类名
className: {
type: String,
default: "chart",
},
// 图表宽度
width: {
type: String,
require: true,
},
// 图表高度
height: {
type: String,
require: true,
},
// 图表数据项
options: {
type: Object,
default: () => ({}),
},
} as const;
export default defineComponent({
name: "Echarts",
props: PropsType,
setup(props, { expose }) {
const chartRef = ref<HTMLElement>();
const charts = {
chart: null,
};
/**
* 初始化echart
* @param data 数据项
* @param clearCaching 是否清除缓存
*/
const initChart = (data?: any, clearCaching = false) => {
if (data || props.options) {
charts.chart.setOption(data || props.options, clearCaching);
}
};
// 生命周期
onMounted(() => {
// 定义实例
echarts.registerTheme("myTheme", theme); // 覆盖默认主题
charts.chart = echarts.init(chartRef.value, "myTheme");
initChart();
});
onBeforeUnmount(() => {
charts.chart.dispose();
charts.chart = null;
});
// 监听改变
watch(
() => props.options,
(val) => {
val && initChart(val);
},
{
deep: true,
}
);
// 对外暴露接口
expose({
chartRef,
initChart,
});
return () => {
const { id, className, height, width } = props;
return (
<div
ref={chartRef}
id={id as string}
class={className as string}
style={{
height: height as string,
width: width as string,
}}
/>
);
};
},
});

5
src/main.ts
View File

@ -6,10 +6,13 @@ import router from "./router";
import "./assets/scss/common.scss";
import "./assets/main.scss";
// import "./assets/scss/_variables.scss";
import './assets/scss/style.scss';
import "./assets/scss/style.scss";
import PublicComponent from "@/components/componentInstall";
// @ts-ignore
import DataVVue3 from "@kjgl77/datav-vue3";
const app = createApp(App);
app.use(PublicComponent);
app.use(router);
app.use(pinia);
app.use(DataVVue3);

168
src/views/overviewLargeScreen/components/centerLeft2/chart/draw.tsx
View File

@ -1,19 +1,31 @@
import { defineComponent, watch, shallowReactive, nextTick, ref, onUnmounted } from 'vue';
import {
defineComponent,
watch,
shallowReactive,
nextTick,
ref,
onUnmounted,
} from "vue";
// 声明类型
const PropsType = {
cdata: {
type: Array,
require: true
}
} as const
require: true,
},
} as const;
// 定义主体
export default defineComponent({
props: PropsType,
setup(props) {
// 配置项
let options = shallowReactive({showLegendSymbol:null,tooltip:null,geo:null,series:null})
let options = shallowReactive({
showLegendSymbol: null,
tooltip: null,
geo: null,
series: null,
});
// 设置点的位置(经纬度)
const geoCoordMap = {
厦门市: [118.11022, 24.490474, 20],
@ -25,36 +37,36 @@ export default defineComponent({
三明市: [117.435001, 26.465444, 20],
南平市: [118.178459, 27.535627, 20],
宁德市: [119.527082, 27.15924, 20],
}
};
const seriesData = [
{
name: '厦门市',
name: "厦门市",
},
{
name: '福州市',
name: "福州市",
},
{
name: '泉州市',
name: "泉州市",
},
{
name: '漳州市',
name: "漳州市",
},
{
name: '龙岩市',
name: "龙岩市",
},
{
name: '莆田市',
name: "莆田市",
},
{
name: '三明市',
name: "三明市",
},
{
name: '南平市',
name: "南平市",
},
{
name: '宁德市',
name: "宁德市",
},
]
];
const convertData = function (data) {
const scatterData = [];
for (let i = 0; i < data.length; i++) {
@ -67,7 +79,7 @@ export default defineComponent({
}
}
return scatterData;
}
};
// 监听
watch(
() => props.cdata,
@ -75,12 +87,12 @@ export default defineComponent({
options = {
showLegendSymbol: true,
tooltip: {
trigger: 'item',
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: point => {
position: (point) => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
@ -91,127 +103,127 @@ export default defineComponent({
}
*/
},
// 如果需要根据不同的数据展示深浅不一的颜色，则把这里打开
// visualMap: {
// min: 0,
// max: 10,
// show: false,
// seriesIndex: 0,
// // 颜色
// inRange: {
// color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
// },
// },
// 底部背景
geo: [{
geo: [
{
show: true,
aspectScale: 0.85, //长宽比
zoom: 1.16,
top: '10%',
left: '17%',
map: '福建',
top: "10%",
left: "17%",
map: "福建",
roam: false,
itemStyle: {
normal: {
borderColor: '#7ad5ff7f',
borderColor: "#7ad5ff7f",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: 'rgba(5,21,35,0.1)'
}
}
}],
areaColor: "rgba(5,21,35,0.1)",
},
},
},
],
series: [
{
name: '相关指数',
type: 'map',
name: "相关指数",
type: "map",
aspectScale: 0.85, //长宽比
zoom: 1.16, //缩放
mapType: '福建', // 自定义扩展图表类型
top: '9%',
left: '16%',
mapType: "福建", // 自定义扩展图表类型
top: "9%",
left: "16%",
itemStyle: {
normal: {
// 背景渐变色
areaColor: {
type: 'linear-gradient',
type: "linear-gradient",
x: 0,
y: 300,
x2: 0,
y2: 0,
colorStops: [{
colorStops: [
{
offset: 0,
color: 'RGBA(19,96,187,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(7,193,223,1)' // 50% 处的颜色
}],
global: true // 缺省为 false
color: "RGBA(19,96,187,1)", // 0% 处的颜色
},
borderColor: '#4ECEE6',
{
offset: 1,
color: "RGBA(7,193,223,1)", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},
borderColor: "#4ECEE6",
borderWidth: 1,
},
emphasis: {
areaColor: '#4f7fff',
borderColor: 'rgba(0,242,252,.6)',
areaColor: "#4f7fff",
borderColor: "rgba(0,242,252,.6)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: '#00f2fc',
shadowColor: "#00f2fc",
},
},
label: {
formatter: params => `${params.name}`,
formatter: (params) => `${params.name}`,
show: true,
position: 'insideRight',
position: "insideRight",
textStyle: {
fontSize: 14,
color: '#efefef',
color: "#efefef",
},
emphasis: {
textStyle: {
color: '#fff',
color: "#fff",
},
},
},
data: val,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
type: "effectScatter",
coordinateSystem: "geo",
symbolSize: 7,
effectType: 'ripple',
effectType: "ripple",
legendHoverLink: false,
showEffectOn: 'render',
showEffectOn: "render",
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'stroke',
brushType: "stroke",
},
zlevel: 1,
itemStyle: {
normal: {
color: '#99FBFE',
color: "#99FBFE",
shadowBlur: 5,
shadowColor: '#fff',
shadowColor: "#fff",
},
},
data: convertData(seriesData),
},
],
}
};
},
{
immediate: true,
deep: true
deep: true,
}
)
);
return () => {
const height = "360px"
const width = "330px"
const height = "360px";
const width = "330px";
return <div>
<echart options={options} height={height} width={width} />
return (
<div>
<echart
options={options}
height={height}
width={width}
/>
</div>
}
}
})
);
};
},
});

40
src/views/overviewLargeScreen/components/centerLeft2/chart/index.tsx
View File

@ -1,58 +1,60 @@
import { defineComponent, reactive } from 'vue'
import Draw from './draw'
import { defineComponent, reactive } from "vue";
import Draw from "./draw";
export default defineComponent({
components: {
Draw
Draw,
},
setup() {
const cdata = reactive([
{
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
name: '福州市',
name: "福州市",
value: 10,
elseData: {
// 这里放置地图 tooltip 里想显示的数据
}
},
},
{
name: '厦门市',
name: "厦门市",
value: 9,
},
{
name: '漳州市',
name: "漳州市",
value: 8,
},
{
name: '泉州市',
name: "泉州市",
value: 7,
},
{
name: '三明市',
name: "三明市",
value: 6,
},
{
name: '莆田市',
name: "莆田市",
value: 5,
},
{
name: '南平市',
name: "南平市",
value: 4,
},
{
name: '龙岩市',
name: "龙岩市",
value: 3,
},
{
name: '宁德市',
name: "宁德市",
value: 2,
}
])
},
]);
return () => {
return <div>
return (
<div>
<Draw cdata={cdata} />
</div>
}
}
})
);
};
},
});

76
src/views/overviewLargeScreen/components/centerLeft2/index.vue
View File

@ -6,19 +6,89 @@
<i class="iconfont icon-layer-group" />
</span>
<div class="d-flex">
<span class="fs-xl text mx-2" style="font-size: 12px">地图数据</span>
<span
class="fs-xl text mx-2"
style="font-size: 12px"
>
地图数据
</span>
<dv-decoration-1 class="dv-dec-1" />
</div>
</div>
<div class="d-flex jc-center">
<chart />
<div
ref="chartRef"
style="width: 300px; height: 400px"
></div>
<!-- <echart
options={options}
height={height}
width={width}
/> -->
<!-- <chart /> -->
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Chart from "./chart/index";
import * as echarts from "echarts";
// import Chart from "./chart/index";
import axios from "axios";
const chartRef = ref(null);
onMounted(async () => {
const chart = echarts.init(chartRef.value);
// 载入湖南省地图 GeoJSON
const mapJson = await axios.get(
"https://geo.datav.aliyun.com/areas_v3/bound/430000_full.json"
);
echarts.registerMap("hunan", mapJson.data);
const option = {
title: {
text: "",
left: "center",
},
tooltip: {
trigger: "item",
formatter: "{b}",
},
visualMap: {
min: 0,
max: 100,
left: "left",
top: "bottom",
text: ["高", "低"],
calculable: true,
},
series: [
{
name: "湖南省",
type: "map",
map: "hunan",
roam: true, // 支持缩放和平移
label: {
show: true,
},
data: [
// 示例数据（你可以从后端获取或自己定义）
{ name: "长沙市", value: 88 },
{ name: "株洲市", value: 66 },
{ name: "湘潭市", value: 77 },
{ name: "岳阳市", value: 44 },
],
},
],
};
chart.setOption(option);
// 窗口大小变化时自适应
window.addEventListener("resize", () => chart.resize());
});
</script>
<style lang="scss" scoped>

4
src/views/overviewLargeScreen/index.vue
View File

@ -69,7 +69,7 @@
</div>
<div>
<dv-border-box-12>
<!-- <CenterLeft2 /> -->
<CenterLeft2 />
</dv-border-box-12>
</div>
<!-- 中间 -->
@ -117,7 +117,7 @@
import CenterRight1 from "./components/centerRight1/index.vue";
import Center from "./components/center/index.vue";
// 未修改的组件
// import CenterLeft2 from "./components/centerLeft2/index.vue";
import CenterLeft2 from "./components/centerLeft2/index.vue";