!77 feat: 折线图和柱状图配置label选项

Merge pull request !77 from jiangcheng/dev
2025-02-24 16:22:57 +08:00 · 2022-10-12 13:35:36 +00:00 · 2022-10-12 13:35:36 +00:00 · 1435789a6c
commit 1435789a6c
parent 7c5fa7610d cfe9efd4dd
14 changed files with 344 additions and 147 deletions
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'

 export const includes = ['legend', 'xAxis', 'yAxis']
-
 export const seriesItem = {
  type: 'bar',
-  barWidth: null,
+  barWidth: 15,
+  label:{
+    show: true,
+    position: 'top',
+    color: "#fff",
+    fontSize: 12,
+  },
  itemStyle: {
    color: null,
-    borderRadius: 0
+    borderRadius: 2
  }
 }
-
 export const option = {
  tooltip: {
    show: true,
--- a/src/packages/components/Charts/Bars/BarCommon/config.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/config.vue
@ -1,24 +1,13 @@
 <template>
-   <!-- Echarts 全局设置 --> 
+  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem
-    v-for="(item, index) in seriesList"
-    :key="index"
-    :name="`柱状图-${index + 1}`"
-    :expanded="true"
-  >
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
    <SettingItemBox name="图形">
      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.itemStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
      </SettingItem>
      <SettingItem>
-        <n-button size="small" @click="item.itemStyle.color = null">
-          恢复默认
-        </n-button>
+        <n-button size="small" @click="item.itemStyle.color = null"> 恢复默认 </n-button>
      </SettingItem>
      <SettingItem name="宽度">
        <n-input-number
@ -30,24 +19,40 @@
        ></n-input-number>
      </SettingItem>
      <SettingItem name="圆角">
-        <n-input-number
-          v-model:value="item.itemStyle.borderRadius"
-          :min="0"
-          size="small"
-        ></n-input-number>
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
      </SettingItem>
    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
  </CollapseItem>
 </template>

 <script setup lang="ts">
 import { PropType, computed } from 'vue'
-import {
-  GlobalSetting,
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'

 const props = defineProps({
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'

 export const includes = ['legend', 'xAxis', 'yAxis']
-
 export const seriesItem = {
  type: 'bar',
  barWidth: null,
+  label: {
+    show: true,
+    position: 'right',
+    color: '#fff',
+    fontSize: 12
+  },
  itemStyle: {
    color: null,
    borderRadius: 0
  }
 }
-
 export const option = {
  tooltip: {
    show: true,
@ -29,7 +33,7 @@ export const option = {
  },
  xAxis: {
    show: true,
-    type: 'value',
+    type: 'value'
  },
  yAxis: {
    show: true,
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
@ -26,6 +26,39 @@
       ></n-input-number>
      </SettingItem>
    </SettingItemBox>
+        <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="item.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
  </CollapseItem>
 </template>

--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@ -5,16 +5,23 @@ import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import dataJson from './data.json'

 export const includes = ['legend', 'xAxis', 'yAxis']
-
 export const seriesItem = {
  type: 'line',
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  symbolSize: 5,   //设定实心点的大小
+  itemStyle: {
+    color: null,
+    borderRadius: 0
+  },
  lineStyle: {
    type: 'solid',
    width: 3,
-    itemStyle: {
-      color: null,
-      borderRadius: 0
-    }
+    color: null,
  }
 }

--- a/src/packages/components/Charts/Lines/LineCommon/config.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/config.vue
@ -1,13 +1,11 @@
 <template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem
-    v-for="(item, index) in seriesList"
-    :key="index"
-    :name="`折线图-${index + 1}`"
-    :expanded="true"
-  >
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
    <SettingItemBox name="线条">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.lineStyle.color"></n-color-picker>
+      </setting-item>
      <SettingItem name="宽度">
        <n-input-number
          v-model:value="item.lineStyle.width"
@ -15,16 +13,48 @@
          :max="100"
          size="small"
          placeholder="自动计算"
-       ></n-input-number>
+        ></n-input-number>
      </SettingItem>
      <SettingItem name="类型">
-        <n-select
-          v-model:value="item.lineStyle.type"
-          size="small"
-          :options="lineConf.lineStyle.type"
-       ></n-select>
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
      </SettingItem>
    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
  </CollapseItem>
 </template>

@ -32,12 +62,7 @@
 import { PropType, computed } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import {
-  GlobalSetting,
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'

 const props = defineProps({
  optionData: {
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
@ -20,7 +20,7 @@ const options = {
  },
  xAxis: {
    show: true,
-    type: 'category'
+    type: 'category',
  },
  yAxis: {
    show: true,
@ -31,6 +31,13 @@ const options = {
    {
      type: 'line',
      smooth: false,
+      symbolSize: 5,   //设定实心点的大小
+      label:{
+        show: true,
+        position: 'top',
+        color: "#fff",
+        fontSize: 12,
+      },
      lineStyle: {
        type: 'solid',
        width: 3
@ -52,7 +59,8 @@ const options = {
  ]
 }

-export default class Config extends PublicConfigClass implements CreateComponentType {
+export default class Config extends PublicConfigClass
+  implements CreateComponentType {
  public key: string = LineGradientSingleConfig.key
  public chartConfig = LineGradientSingleConfig
  // 图表配置项
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
@ -1,12 +1,7 @@
 <template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem
-    v-for="(item, index) in seriesList"
-    :key="index"
-    name="单折线面积图"
-    :expanded="true"
-  >
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
    <SettingItemBox name="线条">
      <SettingItem name="宽度">
        <n-input-number
@ -18,13 +13,45 @@
        ></n-input-number>
      </SettingItem>
      <SettingItem name="类型">
-        <n-select
-          v-model:value="item.lineStyle.type"
-          size="small"
-          :options="lineConf.lineStyle.type"
-        ></n-select>
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
      </SettingItem>
    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
  </CollapseItem>
 </template>

@ -32,18 +59,13 @@
 import { PropType, computed } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import {
-  GlobalSetting,
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'

 const props = defineProps({
  optionData: {
    type: Object as PropType<GlobalThemeJsonType>,
    required: true
-  },
+  }
 })

 const seriesList = computed(() => {
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@ -1,5 +1,10 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart 
+    ref="vChartRef" 
+    :theme="themeColor" 
+    :option="option.value" 
+    :manual-update="isPreview()" 
+    autoresize>
  </v-chart>
 </template>

@ -32,7 +37,14 @@ const props = defineProps({
  }
 })

-use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+])
 const chartEditStore = useChartEditStore()

 const option = reactive({
@ -40,41 +52,32 @@ const option = reactive({
 })

 // 渐变色处理
-watch(
-  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
-  (newColor: keyof typeof chartColorsSearch) => {
-    if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-      props.chartConfig.option.series.forEach((value: any, index: number) => {
-        value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: themeColor[3]
-          },
-          {
-            offset: 1,
-            color: 'rgba(0,0,0, 0)'
-          }
-        ])
-      })
-    }
-    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-    props.chartConfig.option = option.value
-  },
-  {
-    immediate: true
+watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+  if (!isPreview()) {
+    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+    props.chartConfig.option.series.forEach((value: any, index: number) => {
+      value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: themeColor[3]
+        },
+        {
+          offset: 1,
+          color: 'rgba(0,0,0, 0)'
+        }
+      ])
+    })
  }
-)
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  props.chartConfig.option = option.value
+}, {
+  immediate: true
+})

-watch(
-  () => props.chartConfig.option.dataset,
-  () => {
-    option.value = props.chartConfig.option
-  },
-  {
-    deep: false
-  }
-)
+
+watch(() => props.chartConfig.option.dataset, () => {
+  option.value = props.chartConfig.option
+})

 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
--- a/src/packages/components/Charts/Lines/LineGradients/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradients/config.ts
@ -31,6 +31,13 @@ const option = {
    {
      type: 'line',
      smooth: false,
+      symbolSize: 5,   //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
      lineStyle: {
        width: 3,
        type: 'solid'
@ -52,6 +59,12 @@ const option = {
    {
      type: 'line',
      smooth: false,
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
      lineStyle: {
        width: 3,
        type: 'solid'
--- a/src/packages/components/Charts/Lines/LineGradients/config.vue
+++ b/src/packages/components/Charts/Lines/LineGradients/config.vue
@ -25,6 +25,50 @@
        ></n-select>
      </SettingItem>
    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="item.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
  </CollapseItem>
 </template>

--- a/src/packages/components/Charts/Lines/LineGradients/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradients/index.vue
@ -1,76 +1,93 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option.value"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>

 <script setup lang="ts">
-import { reactive, watch, PropType } from 'vue'
-import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart } from 'echarts/charts'
-import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { reactive, watch, PropType } from "vue";
+import VChart from "vue-echarts";
+import { use, graphic } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import config, { includes } from "./config";
+import { mergeTheme } from "@/packages/public/chart";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { chartColorsSearch, defaultTheme } from "@/settings/chartThemes/index";
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+} from "echarts/components";
+import { useChartDataFetch } from "@/hooks";
+import { isPreview } from "@/utils";

 const props = defineProps({
  themeSetting: {
    type: Object,
-    required: true
+    required: true,
  },
  themeColor: {
    type: Object,
-    required: true
+    required: true,
  },
  chartConfig: {
    type: Object as PropType<config>,
-    required: true
-  }
-})
+    required: true,
+  },
+});

-use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-const chartEditStore = useChartEditStore()
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+]);
+const chartEditStore = useChartEditStore();

 const option = reactive({
-  value: {}
-})
+  value: {},
+});

 // 渐变色处理
 watch(
  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
  (newColor: keyof typeof chartColorsSearch) => {
    if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme];
      props.chartConfig.option.series.forEach((value: any, index: number) => {
        value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
-            color: themeColor[3 + index]
+            color: themeColor[3 + index],
          },
          {
            offset: 1,
-            color: 'rgba(0,0,0, 0)'
-          }
-        ])
-      })
+            color: "rgba(0,0,0, 0)",
+          },
+        ]);
+      });
    }
-    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-    props.chartConfig.option = option.value
+    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes);
+    props.chartConfig.option = option.value;
  },
  {
-    immediate: true
+    immediate: true,
  }
-)
+);

 watch(
  () => props.chartConfig.option.dataset,
  () => {
-    option.value = props.chartConfig.option
+    option.value = props.chartConfig.option;
  }
-)
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+);
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
 </script>
--- a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
@ -29,6 +29,7 @@ export const option = {
  series: [
    {
      type: 'line',
+      symbolSize: 5,   //设定实心点的大小
      lineStyle: {
        type: 'solid',
        width: 3,
--- a/src/packages/components/Charts/Lines/LineLinearSingle/config.vue
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.vue
@ -39,6 +39,17 @@
       ></n-select>
      </SettingItem>
    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
    <SettingItemBox name="阴影" :alone="true">
      <SettingItem name="颜色">
        <n-color-picker