feat: 升级vchart版本，新增横向柱状图，新增配置项，修复配制不生效bug

package.json

@@ -21,7 +21,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",
     "@types/lodash": "^4.14.184",
-    "@visactor/vchart": "^1.12.12",
+    "@visactor/vchart": "^2.0.0",
     "@visactor/vchart-theme": "^1.12.2",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
@@ -77,7 +77,7 @@
     "mockjs": "^1.1.0",
     "plop": "^3.0.5",
     "prettier": "^2.6.2",
-    "sass": "~1.49.11",
+    "sass": "1.49.11",
     "sass-loader": "^12.6.0",
     "typescript": "4.6.3",
     "vite": "4.3.6",

src/components/Pages/VChartItemSetting/Axis.vue

@@ -3,6 +3,17 @@
     <template #header>
       <n-switch v-model:value="axis.visible" size="small"></n-switch>
     </template>
+    <setting-item-box name="单位">
+      <setting-item name="可见性">
+        <n-space>
+          <n-switch v-model:value="axis.unit.visible" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <setting-item name="内容">
+        <n-input v-model:value="axis.unit.text" size="small"></n-input>
+      </setting-item>
+      <FontStyle :style="toRefs(axis.unit.style)"></FontStyle>
+    </setting-item-box>
     <setting-item-box name="轴标签">
       <setting-item name="可见性">
         <n-space>
@@ -12,7 +23,7 @@
       <setting-item name="角度">
         <n-input-number v-model:value="axis.label.style.angle" :min="0" :max="360" size="small" />
       </setting-item>
-      <FontStyle :style="axis.label.style"></FontStyle>
+      <FontStyle :style="toRefs(axis.label.style)"></FontStyle>
     </setting-item-box>
     <setting-item-box name="轴标题">
       <setting-item name="可见性">
@@ -20,10 +31,16 @@
           <n-switch v-model:value="axis.title.visible" size="small"></n-switch>
         </n-space>
       </setting-item>
-      <setting-item name="标题内容">
+      <setting-item name="内容">
         <n-input v-model:value="axis.title.style.text" size="small"></n-input>
       </setting-item>
-      <FontStyle :style="axis.title.style"></FontStyle>
+      <setting-item name="位置">
+        <n-select v-model:value="axis.title.position" :options="legendsConfig.position" size="small" />
+      </setting-item>
+      <setting-item name="角度">
+        <n-input-number v-model:value="axis.title.angle" :min="0" :max="360" size="small" />
+      </setting-item>
+      <FontStyle :style="toRefs(axis.title.style)"></FontStyle>
     </setting-item-box>
     <setting-item-box name="轴线">
       <setting-item name="可见性">
@@ -45,7 +62,11 @@
           <n-switch v-model:value="axis.grid.visible" size="small"></n-switch>
         </n-space>
       </setting-item>
-      <setting-item name=""> </setting-item>
+      <setting-item name="开启虚线">
+        <n-space>
+          <n-switch v-model:value="isLineDashRef" size="small" @update:value="changeLineDash"></n-switch>
+        </n-space>
+      </setting-item>
       <setting-item name="粗细">
         <n-input-number v-model:value="axis.grid.style.lineWidth" :min="0" size="small" />
       </setting-item>
@@ -57,15 +78,33 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, toRefs } from 'vue'
 import FontStyle from './common/FontStyle.vue'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { legendsConfig } from '@/packages/chartConfiguration/vcharts/index'
 
-defineProps({
+const props = defineProps({
   axis: {
     type: Object as PropType<vChartGlobalThemeJsonType>,
     required: true
   }
 })
+
+// 判断是否是虚线
+const isDash = (data: undefined | Array<number>) => {
+  if (!data || data.length === 0 || data[0] === 0) return false
+  return true
+}
+
+// 虚线
+const isLineDashRef = ref(isDash(props.axis.grid.style.lineDash))
+
+const changeLineDash = (data: boolean) => {
+  if (data) {
+    props.axis.grid.style.lineDash = [4, 4] // 设置为虚线
+  } else {
+    props.axis.grid.style.lineDash = [0] // 设置为实线
+  }
+}
 </script>

src/components/Pages/VChartItemSetting/Legends.vue

@@ -15,7 +15,7 @@
           </setting-item>
         </setting-item-box>
         <setting-item-box name="项配置">
-          <FontStyle :style="legendItem.item.label.style"></FontStyle>
+          <FontStyle :style="toRefs(legendItem.item.label.style)"></FontStyle>
         </setting-item-box>
       </collapse-item>
     </div>
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { legendsConfig } from '@/packages/chartConfiguration/vcharts/index'
 import FontStyle from './common/FontStyle.vue'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'

src/components/Pages/VChartItemSetting/Tooltip.vue

@@ -20,20 +20,20 @@
         </setting-item>
       </setting-item-box>
       <setting-item-box name="标题">
-        <FontStyle :style="optionData.tooltip.style.titleLabel"></FontStyle>
+        <FontStyle :style="toRefs(optionData.tooltip.style.titleLabel)"></FontStyle>
       </setting-item-box>
       <setting-item-box name="名称">
-        <FontStyle :style="optionData.tooltip.style.keyLabel"></FontStyle>
+        <FontStyle :style="toRefs(optionData.tooltip.style.keyLabel)"></FontStyle>
       </setting-item-box>
       <setting-item-box name="值">
-        <FontStyle :style="optionData.tooltip.style.valueLabel"></FontStyle>
+        <FontStyle :style="toRefs(optionData.tooltip.style.valueLabel)"></FontStyle>
       </setting-item-box>
     </collapse-item>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, toRefs } from 'vue'
 import FontStyle from './common/FontStyle.vue'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'

src/components/Pages/VChartItemSetting/common/FontStyle.vue

@@ -1,25 +1,32 @@
 <template>
   <!-- todo 补充常用配置项 -->
-  <!-- <div v-if="style"> -->
+  <template v-if="style">
-  <!-- <setting-item-box v-if="style" name=""> -->
     <setting-item name="颜色">
-    <n-color-picker v-model:value="style.fill" size="small" />
+      <n-color-picker v-model:value="style.fill.value" size="small" />
     </setting-item>
     <setting-item name="大小">
-    <n-input-number v-model:value="style.fontSize" :min="1" size="small" />
+      <n-input-number v-model:value="style.fontSize.value" :min="1" size="small" />
     </setting-item>
     <setting-item name="字体">
-    <n-select v-model:value="style.fontFamily" :options="fontStyleConfig.fontFamily" size="small" />
+      <n-select v-model:value="style.fontFamily.value" :options="fontStyleConfig.fontFamily" size="small" />
     </setting-item>
     <setting-item name="字重">
-    <n-select v-model:value="style.fontSize" :options="fontStyleConfig.fontWeight" size="small" />
+      <n-select v-model:value="style.fontWeight.value" :options="fontStyleConfig.fontWeight" size="small" />
     </setting-item>
-  <!-- </setting-item-box> -->
+    <setting-item v-if="style?.dx" name="X轴偏移">
-  <!-- </div> -->
+      <n-input-number v-model:value="style.dx.value" size="small" />
+    </setting-item>
+    <setting-item v-if="style?.dy" name="Y轴偏移">
+      <n-input-number v-model:value="style.dy.value" size="small" />
+    </setting-item>
+    <setting-item v-if="style?.angle" name="旋转">
+      <n-input-number v-model:value="style.angle.value" :min="0" :max="360" size="small" />
+    </setting-item>
+  </template>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { fontStyleConfig } from '@/packages/chartConfiguration/vcharts/index'
 import { FontType } from '@/settings/vchartThemes/index'
 import { SettingItem } from '@/components/Pages/ChartItemSetting'

src/components/Pages/VChartItemSetting/common/Padding.vue

@@ -0,0 +1,84 @@
+<template>
+  <setting-item name="间距">
+    <n-input v-model:value="paddingArray" size="small" @update:value="updateHandle"/>
+  </setting-item>
+</template>
+
+<script setup lang="ts">
+import type { ICartesianTitle } from '@visactor/vchart/esm/component/axis'
+import { forEach, isNumber } from 'lodash'
+import { SettingItem } from '@/components/Pages/ChartItemSetting'
+import { PropType, ref } from 'vue'
+
+const props = defineProps({
+  axis: {
+    type: Object as PropType<ICartesianTitle>,
+    required: true
+  }
+})
+
+// 解析间距
+const paddingInit = (padding: ICartesianTitle['padding']) => {
+  const arr = [0, 0, 0, 0]
+  if (!padding) {
+    return arr
+  }
+  if (isNumber(padding)) {
+    arr.forEach((item, index) => {
+      arr[index] = padding
+    })
+  } else if (Array.isArray(padding)) {
+    if (padding.length === 1) {
+      arr.forEach((item, index) => {
+        arr[index] = padding[0]
+      })
+    } else if (padding.length === 2) {
+      arr[0] = padding[0]
+      arr[1] = padding[1]
+      arr[2] = padding[0]
+      arr[3] = padding[1]
+    } else if (padding.length === 3) {
+      arr[0] = padding[0]
+      arr[1] = padding[1]
+      arr[2] = padding[2]
+      arr[3] = padding[1]
+    } else if (padding.length === 4) {
+      arr[0] = padding[0]
+      arr[1] = padding[1]
+      arr[2] = padding[2]
+      arr[3] = padding[3]
+    }
+  }
+
+  // 转成字符串，逗号分隔
+  return arr.map(item => item.toString()).join(',')
+}
+
+// 间距处理
+const paddingArray = ref(paddingInit(props.axis.padding))
+
+// 字符串转成数组
+const paddingArrayToNumber = (padding: string) => {
+  const arr = padding.split(',').map(item => parseFloat(item.trim()))
+  if (arr.length === 1) {
+    return [arr[0], arr[0], arr[0], arr[0]]
+  } else if (arr.length === 2) {
+    return [arr[0], arr[1], arr[0], arr[1]]
+  } else if (arr.length === 3) {
+    return [arr[0], arr[1], arr[2], arr[1]]
+  } else if (arr.length === 4) {
+    return arr
+  }
+  return [0, 0, 0, 0]
+}
+
+const updateHandle = (value: string) => {
+  const padding = paddingArrayToNumber(value)
+  forEach(padding, (item, index) => {
+    if (isNaN(item)) {
+      padding[index] = 0
+    }
+  })
+  props.axis.padding = padding
+}
+</script>

src/packages/components/VChart/Bars/VChartBarCommon/config.ts

@@ -3,9 +3,9 @@ import { VChartBarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
 import data from './data.json'
-import cloneDeep from 'lodash/cloneDeep'
 import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
-import { IBarOption } from '../../index.d'
+import { ChatCategoryEnum, IBarOption } from '../../index.d'
+import { merge, cloneDeep } from 'lodash'
 
 export const includes = ['legends', 'tooltip']
 export const option: IBarOption & { dataset?: any } = {
@@ -17,10 +17,17 @@ export const option: IBarOption & { dataset?: any } = {
   yField: ['value'],
   seriesField: 'type',
   // 业务配置（后续会被转换为图表spec)
-  category: VChartBarCommonConfig.category,
+  category: VChartBarCommonConfig.category as ChatCategoryEnum.BAR,
   xAxis: {
     name: 'x轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 10,
+          dy: 0
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       visible: false
@@ -28,12 +35,18 @@ export const option: IBarOption & { dataset?: any } = {
   },
   yAxis: {
     name: 'y轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 0,
+          dy: -10
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       style: {
-        ...axisThemeJson.grid.style,
+        ...axisThemeJson.grid.style
-        lineDash: [3, 3]
       }
     }
   }

src/packages/components/VChart/Bars/VChartBarCrossrange/config.ts

@@ -0,0 +1,61 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartBarCrossrangeConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { ChatCategoryEnum, IBarOption } from '../../index.d'
+import { merge, cloneDeep } from 'lodash'
+
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
+  type: 'bar',
+  dataset: data,
+  stack: true,
+  xField: ['value'],
+  yField: ['year', 'type'],
+  seriesField: 'type',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarCrossrangeConfig.category as ChatCategoryEnum.BAR,
+  direction: 'horizontal',
+  xAxis: {
+    name: 'x轴',
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 10,
+          dy: 0
+        }
+      }
+    }) as any),
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 0,
+          dy: -10
+        }
+      }
+    }) as any),
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style
+      }
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartBarCrossrangeConfig.key
+  public chartConfig = cloneDeep(VChartBarCrossrangeConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Bars/VChartBarCrossrange/config.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Bars/VChartBarCrossrange/data.json

@@ -0,0 +1,25 @@
+{
+  "values": [
+    { "type": "Autocracies", "year": "1930", "value": 129 },
+    { "type": "Autocracies", "year": "1940", "value": 133 },
+    { "type": "Autocracies", "year": "1950", "value": 130 },
+    { "type": "Autocracies", "year": "1960", "value": 126 },
+    { "type": "Autocracies", "year": "1970", "value": 117 },
+    { "type": "Autocracies", "year": "1980", "value": 114 },
+    { "type": "Autocracies", "year": "1990", "value": 111 },
+    { "type": "Autocracies", "year": "2000", "value": 89 },
+    { "type": "Autocracies", "year": "2010", "value": 80 },
+    { "type": "Autocracies", "year": "2018", "value": 80 },
+
+    { "type": "Democracies", "year": "1930", "value": 22 },
+    { "type": "Democracies", "year": "1940", "value": 13 },
+    { "type": "Democracies", "year": "1950", "value": 25 },
+    { "type": "Democracies", "year": "1960", "value": 29 },
+    { "type": "Democracies", "year": "1970", "value": 38 },
+    { "type": "Democracies", "year": "1980", "value": 41 },
+    { "type": "Democracies", "year": "1990", "value": 57 },
+    { "type": "Democracies", "year": "2000", "value": 87 },
+    { "type": "Democracies", "year": "2010", "value": 98 },
+    { "type": "Democracies", "year": "2018", "value": 99 }
+  ]
+}

src/packages/components/VChart/Bars/VChartBarCrossrange/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartBarCrossrangeConfig: ConfigType = {
+  key: 'VChartBarCrossrange',
+  chartKey: 'VVChartBarCrossrange',
+  conKey: 'VCVChartBarCrossrange',
+  title: 'VChart并列柱状图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_bar_y.png'
+}

src/packages/components/VChart/Bars/VChartBarCrossrange/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

src/packages/components/VChart/Bars/VChartBarStack/config.ts

@@ -3,9 +3,9 @@ import { VChartBarStackConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
 import data from './data.json'
-import cloneDeep from 'lodash/cloneDeep'
 import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
-import { IBarOption } from '../../index.d'
+import { ChatCategoryEnum, IBarOption } from '../../index.d'
+import { merge, cloneDeep } from 'lodash'
 
 export const includes = ['legends', 'tooltip']
 export const option: IBarOption & { dataset?: any } = {
@@ -17,10 +17,17 @@ export const option: IBarOption & { dataset?: any } = {
   seriesField: 'year',
   stack: true,
   // 业务配置（后续会被转换为图表spec)
-  category: VChartBarStackConfig.category,
+  category: VChartBarStackConfig.category as ChatCategoryEnum.BAR,
   xAxis: {
     name: 'x轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 10,
+          dy: 0
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       visible: false
@@ -28,12 +35,18 @@ export const option: IBarOption & { dataset?: any } = {
   },
   yAxis: {
     name: 'y轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 0,
+          dy: -10
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       style: {
-        ...axisThemeJson.grid.style,
+        ...axisThemeJson.grid.style
-        lineDash: [3, 3]
       }
     }
   }

src/packages/components/VChart/Bars/index.ts

@@ -1,4 +1,5 @@
 import { VChartBarCommonConfig } from './VChartBarCommon/index'
+import { VChartBarCrossrangeConfig } from './VChartBarCrossrange/index'
 import { VChartBarStackConfig } from './VChartBarStack/index'
 
-export default [VChartBarCommonConfig, VChartBarStackConfig]
+export default [VChartBarCommonConfig, VChartBarCrossrangeConfig, VChartBarStackConfig]

src/settings/vchartThemes/axis.theme.json

@@ -1,5 +1,19 @@
 {
   "visible": true,
+  "unit": {
+    "visible": true,
+    "text": "",
+    "style": {
+      "text": "",
+      "fontSize": 12,
+      "fill": "#B9B8CE",
+      "fontFamily": "SimSun",
+      "fontWeight": "normal",
+      "angle": 0,
+      "dx": 0,
+      "dy": 0
+    }
+  },
   "label": {
     "visible": true,
     "style": {
@@ -7,17 +21,25 @@
       "fill": "#B9B8CE",
       "fontFamily": "SimSun",
       "fontWeight": "normal",
-      "angle": 0
+      "angle": 0,
+      "dx": 0,
+      "dy": 0
     }
   },
   "title": {
     "visible": true,
+    "position": "middle",
+    "angle": 0,
+    "padding": [],
     "style": {
       "text": "",
       "fontSize": 12,
       "fill": "#B9B8CE",
       "fontFamily": "SimSun",
-      "fontWeight": "normal"
+      "fontWeight": "normal",
+      "angle": 0,
+      "dx": 0,
+      "dy": 0
     }
   },
   "domainLine": {

src/settings/vchartThemes/index.ts

@@ -6,6 +6,9 @@ export type FontType = {
   fontFamily: string
   fontWeight: string
   fill: string
+  dy?: number
+  dx?: number
+  angle?: number
   [T: string]: any
 }
 export interface vChartGlobalThemeJsonType extends Partial<ThemeJsonType> {