!193 新增组合图

Merge pull request !193 from 阿飞/dev3

src/packages/components/Charts/COMBINATIONS/BarLine/config.ts

@@ -0,0 +1,76 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { BarLineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 柱状折线组合图 分别定义series
+// 写死name可以定义legend显示的名称
+export const barSeriesItem = {
+    type: 'bar',
+    barWidth: 15,
+    label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+    },
+    itemStyle: {
+        color: null,
+        borderRadius: 2
+    }
+}
+
+export const lineSeriesItem = {
+    type: 'line',
+    symbol: "circle",
+    label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+    },
+    symbolSize: 5, //设定实心点的大小
+    itemStyle: {
+        color: '#FFE47A',
+        borderWidth: 1
+    },
+    lineStyle: {
+        type: 'solid',
+        width: 3,
+        color: null
+    }
+}
+
+export const option = {
+    tooltip: {
+        show: true,
+        trigger: 'axis',
+        axisPointer: {
+            show: true,
+            type: 'shadow'
+        }
+    },
+    legend: {
+        data:null
+    },
+    xAxis: {
+        show: true,
+        type: 'category'
+    },
+    yAxis: {
+        show: true,
+        type: 'value'
+    },
+    dataset: { ...dataJson },
+    series: [barSeriesItem, lineSeriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = BarLineConfig.key
+    public chartConfig = cloneDeep(BarLineConfig)
+    // 图表配置项
+    public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/COMBINATIONS/BarLine/config.vue

@@ -0,0 +1,89 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`${item.type=='bar' ? '柱状图' : '折线图'}`" :expanded="true">
+    <SettingItemBox name="图形" v-if="item.type=='bar'">
+      <SettingItem name="宽度">
+        <n-input-number
+            v-model:value="item.barWidth"
+            :min="1"
+            :max="100"
+            size="small"
+            placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="线条" v-if="item.type=='line'">
+      <SettingItem name="宽度">
+        <n-input-number
+            v-model:value="item.lineStyle.width"
+            :min="1"
+            :max="100"
+            size="small"
+            placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点" v-if="item.type=='line'">
+      <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="tip颜色">
+        <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 { lineConf } from '@/packages/chartConfiguration/echarts'
+import { GlobalThemeJsonType } from '@/settings/chartThemes'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  console.log(props.optionData);
+  return props.optionData.series
+})
+</script>

src/packages/components/Charts/COMBINATIONS/BarLine/data.json

@@ -0,0 +1,40 @@
+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "1月",
+      "data1": 104,
+      "data2": 30
+    },
+    {
+      "product": "2月",
+      "data1": 56,
+      "data2": 56
+    },
+    {
+      "product": "3月",
+      "data1": 136,
+      "data2": 36
+    },
+    {
+      "product": "4月",
+      "data1": 86,
+      "data2": 6
+    },
+    {
+      "product": "5月",
+      "data1": 98,
+      "data2": 10
+    },
+    {
+      "product": "6月",
+      "data1": 86,
+      "data2": 70
+    },
+    {
+      "product": "7月",
+      "data1": 77,
+      "data2": 57
+    }
+  ]
+}

src/packages/components/Charts/COMBINATIONS/BarLine/index.ts

@@ -0,0 +1,16 @@
+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const BarLineConfig: ConfigType = {
+    key: 'BarLine',
+    chartKey: 'VBarLine',
+    conKey: 'VCBarLine',
+    title: '柱状加折线图',
+    category: ChatCategoryEnum.COMBINATIONS,
+    categoryName: ChatCategoryEnumName.COMBINATION,
+    package: PackagesCategoryEnum.CHARTS,
+    chartFrame: ChartFrameEnum.ECHARTS,
+    image: 'bar_x.png'
+}

src/packages/components/Charts/COMBINATIONS/BarLine/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
+           autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, watch, PropType, nextTick} from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+//引入柱状图 折线图
+import { BarChart, LineChart } from 'echarts/charts'
+import config, { includes, barSeriesItem, lineSeriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+watch(
+    () => props.chartConfig.option.dataset,
+    (newData, oldData) => {
+      if (newData.dimensions.length !== oldData.dimensions.length) {
+        const seriesArr = []
+        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+          seriesArr.push(barSeriesItem, lineSeriesItem)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    },
+    {
+      deep: false
+    }
+)
+
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

src/packages/components/Charts/COMBINATIONS/index.ts

@@ -0,0 +1,3 @@
+import { BarLineConfig } from './BarLine/index'
+
+export default [BarLineConfig]

src/packages/components/Charts/index.d.ts

@@ -5,6 +5,7 @@ export enum ChatCategoryEnum {
   LINE = 'Lines',
   SCATTER = 'Scatters',
   MAP = 'Maps',
+  COMBINATIONS = 'COMBINATIONS',
   MORE = 'Mores'
 }
 
@@ -14,5 +15,6 @@ export enum ChatCategoryEnumName {
   LINE = '折线图',
   SCATTER = '散点图',
   MAP = '地图',
+  COMBINATION = '组合图',
   MORE = '更多'
 }

src/packages/components/Charts/index.ts

@@ -3,6 +3,7 @@ import Pies from './Pies'
 import Lines from './Lines'
 import Scatters from './Scatters'
 import Mores from './Mores'
+import COMBINATIONS from "./COMBINATIONS";
 import Maps from './Maps'
 
-export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores]
+export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps,...COMBINATIONS, ...Mores]