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 @@ <n-switch v-model:value="legend.show" size="small"></n-switch> </template> <setting-item-box name="图例文字"> - <setting-item> + <setting-item name="颜色"> <n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker> </setting-item> + <setting-item name="大小"> + <n-input-number v-model:value="legend.textStyle.fontSize" :min="1" size="small"></n-input-number> + </setting-item> + </setting-item-box> + <setting-item-box name="图例位置"> + <setting-item name="x轴"> + <n-select v-model:value="legend.x" size="small" :options="legendConfig.lengendX" /> + </setting-item> + <setting-item name="y轴"> + <n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" /> + </setting-item> + </setting-item-box> + <setting-item-box name="图例信息"> + <setting-item name="方向"> + <n-select v-model:value="legend.orient" size="small" :options="legendConfig.orient" /> + </setting-item> + <setting-item name="形状"> + <n-select v-model:value="legend.icon" size="small" :options="legendConfig.shape" /> + </setting-item> + </setting-item-box> + <setting-item-box name="图例大小"> + <setting-item name="宽"> + <n-input-number v-model:value="legend.itemWidth" :min="1" size="small"></n-input-number> + </setting-item> + <setting-item name="高"> + <n-input-number v-model:value="legend.itemHeight" :min="1" size="small"></n-input-number> + </setting-item> </setting-item-box> </collapse-item> @@ -309,9 +336,9 @@ </template> <script setup lang="ts"> -import { PropType, computed } from 'vue' +import { PropType, computed, watch } from 'vue' import { GlobalThemeJsonType } from '@/settings/chartThemes/index' -import { axisConfig } from '@/packages/chartConfiguration/echarts/index' +import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index' import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting' import { icon } from '@/plugins' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -360,4 +387,14 @@ const grid = computed(() => { const visualMap = computed(() => { return props.optionData.visualMap }) + +// 监听legend color颜色改变type = scroll的颜色 +watch(() => legend.value && legend.value.textStyle.color, (newVal) => { + if (legend.value && newVal) { + legend.value.pageTextStyle.color = newVal + } +}, { + immediate: true, + deep: true, +}) </script> 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" } },