From d1eef46af7c9b21a8d8f4cc6696a60419872a0e2 Mon Sep 17 00:00:00 2001 From: tanhao <2424726204@qq.com> Date: Thu, 25 May 2023 11:52:10 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20echarts=E5=85=AC=E5=85=B1=E5=9B=BE?= =?UTF-8?q?=E4=BE=8B=E6=96=B0=E5=A2=9E=E8=AF=A6=E7=BB=86=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Pages/ChartItemSetting/GlobalSetting.vue | 43 +++++++++++- .../chartConfiguration/echarts/index.ts | 3 +- .../chartConfiguration/echarts/legend.ts | 70 +++++++++++++++++++ src/settings/chartThemes/global.theme.json | 12 +++- 4 files changed, 123 insertions(+), 5 deletions(-) create mode 100644 src/packages/chartConfiguration/echarts/legend.ts diff --git a/src/components/Pages/ChartItemSetting/GlobalSetting.vue b/src/components/Pages/ChartItemSetting/GlobalSetting.vue index a416e69c..81f9d3d7 100644 --- a/src/components/Pages/ChartItemSetting/GlobalSetting.vue +++ b/src/components/Pages/ChartItemSetting/GlobalSetting.vue @@ -257,9 +257,36 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -309,9 +336,9 @@ diff --git a/src/packages/chartConfiguration/echarts/index.ts b/src/packages/chartConfiguration/echarts/index.ts index 29fa8f02..a8604e33 100644 --- a/src/packages/chartConfiguration/echarts/index.ts +++ b/src/packages/chartConfiguration/echarts/index.ts @@ -1,3 +1,4 @@ export * from './axis' export * from './line' -export * from './label' \ No newline at end of file +export * from './label' +export * from './legend' \ No newline at end of file diff --git a/src/packages/chartConfiguration/echarts/legend.ts b/src/packages/chartConfiguration/echarts/legend.ts new file mode 100644 index 00000000..c243431d --- /dev/null +++ b/src/packages/chartConfiguration/echarts/legend.ts @@ -0,0 +1,70 @@ +export const legendConfig = { + // X轴位置 + lengendX: [ + { + label: '靠左', + value: 'left' + }, + { + label: '居中', + value: 'center' + }, + { + label: '靠右', + value: 'right' + } + ], + // y轴位置 + lengendY: [ + { + label: '靠上', + value: 'top' + }, + { + label: '居中', + value: 'center' + }, + { + label: '靠下', + value: 'bottom' + } + ], + // 排列方向 + orient: [ + { + label: '水平', + value: 'horizontal' + }, + { + label: '垂直', + value: 'vertical' + } + ], + // 形状 + shape: [ + { + label: '圆形', + value: 'circle' + }, + { + label: '方形', + value: 'rect' + }, + { + label: '圆角方形', + value: 'roundRect' + }, + { + label: '三角形', + value: 'triangle' + }, + { + label: '钢笔形', + value: 'pin' + }, + { + label: '箭头形', + value: 'arrow' + } + ] +} diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json index 1c099af8..0fd24712 100644 --- a/src/settings/chartThemes/global.theme.json +++ b/src/settings/chartThemes/global.theme.json @@ -86,8 +86,18 @@ }, "legend": { "show": true, - "top": "5%", + "type": "scroll", + "x": "center", + "y": "top", + "icon": "circle", + "orient": "horizontal", "textStyle": { + "color": "#B9B8CE", + "fontSize": 18 + }, + "itemHeight": 15, + "itemWidth": 15, + "pageTextStyle": { "color": "#B9B8CE" } }, From 6e9db7aa793a15ffe3edefde3ca7160bcb11ab57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Wed, 24 May 2023 12:58:20 +0000 Subject: [PATCH 2/2] =?UTF-8?q?!159=20=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8D=AB=E6=98=9F=E5=9C=B0=E5=9B=BE=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=20Merge=20pull=20request=20!159=20from=20tanhao/feat-?= =?UTF-8?q?map-theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/components/Charts/Maps/MapAmap/config.ts | 3 ++- .../components/Charts/Maps/MapAmap/config.vue | 4 ++++ src/packages/components/Charts/Maps/MapAmap/index.vue | 11 +++++++++-- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/packages/components/Charts/Maps/MapAmap/config.ts b/src/packages/components/Charts/Maps/MapAmap/config.ts index 97bf903c..a7ba4ac9 100644 --- a/src/packages/components/Charts/Maps/MapAmap/config.ts +++ b/src/packages/components/Charts/Maps/MapAmap/config.ts @@ -16,7 +16,8 @@ export enum ThemeEnum { MACARON = 'macaron', BLUE = 'blue', DARKBLUE = 'darkblue', - WINE = 'wine' + WINE = 'wine', + WEIXIN = 'tileLayer' } export enum LangEnum { diff --git a/src/packages/components/Charts/Maps/MapAmap/config.vue b/src/packages/components/Charts/Maps/MapAmap/config.vue index be3864bc..8d8936b5 100644 --- a/src/packages/components/Charts/Maps/MapAmap/config.vue +++ b/src/packages/components/Charts/Maps/MapAmap/config.vue @@ -134,6 +134,10 @@ const themeOptions = [ { value: ThemeEnum.WINE, label: '酱籽' + }, + { + value: ThemeEnum.WEIXIN, + label: '卫星' } ] diff --git a/src/packages/components/Charts/Maps/MapAmap/index.vue b/src/packages/components/Charts/Maps/MapAmap/index.vue index 741013cb..6e678634 100644 --- a/src/packages/components/Charts/Maps/MapAmap/index.vue +++ b/src/packages/components/Charts/Maps/MapAmap/index.vue @@ -8,7 +8,7 @@ import AMapLoader from '@amap/amap-jsapi-loader' import { CreateComponentType } from '@/packages/index.d' import { useChartDataFetch } from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { MarkerEnum } from './config' +import { MarkerEnum, ThemeEnum } from './config' import { isArray } from '@/utils' const props = defineProps({ @@ -51,7 +51,6 @@ const initMap = (newData: any) => { resizeEnable: true, zoom: amapZindex.value, // 地图显示的缩放级别 center: [amapLon.value, amapLat.value], - mapStyle: `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`, //自定义地图的显示样式 lang: lang.value, features: features.value, pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度 @@ -60,6 +59,14 @@ const initMap = (newData: any) => { willReadFrequently: true }) dataHandle(props.chartConfig.option.dataset) + let satellite = new AMap.TileLayer.Satellite() + let roadNet = new AMap.TileLayer.RoadNet() + if (newData.amapStyleKey === ThemeEnum.WEIXIN) { + mapIns.add([satellite, roadNet]) + } else { + mapIns.remove([satellite, roadNet]) + mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`) + } }) .catch(e => {}) }