From 951183b47bcb0ee39d0201b0b5b8f231f72ce033 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Tue, 25 Jun 2024 16:07:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=88=9D=E6=AD=A5=E6=B7=BB=E5=8A=A0K?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/Candlestick/index.vue     | 240 ++++++++
 .../BasicComponents/Candlestick/setting.vue   | 570 ++++++++++++++++++
 .../Candlestick/settingConfig.js              | 145 +++++
 data-room-ui/packages/G2Plots/plotList.js     |   4 +-
 .../G2Plots/桑基图/基础桑基图.js      |   4 +-
 data-room-ui/packages/Render/RenderCard2.vue  |   6 +-
 .../bigScreenIcon/svg/34candlestick.svg       |   1 +
 7 files changed, 965 insertions(+), 5 deletions(-)
 create mode 100644 data-room-ui/packages/BasicComponents/Candlestick/index.vue
 create mode 100644 data-room-ui/packages/BasicComponents/Candlestick/setting.vue
 create mode 100644 data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js
 create mode 100644 data-room-ui/packages/assets/images/bigScreenIcon/svg/34candlestick.svg

diff --git a/data-room-ui/packages/BasicComponents/Candlestick/index.vue b/data-room-ui/packages/BasicComponents/Candlestick/index.vue
new file mode 100644
index 00000000..e16adb86
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/Candlestick/index.vue
@@ -0,0 +1,240 @@
+<template>
+  <div
+    class="bs-design-wrap bs-bar"
+    style="width: 100%; height: 100%"
+  >
+    <div
+      :id="`chart${config.code}`"
+      style="width: 100%; height: 100%"
+    />
+  </div>
+</template>
+<script>
+import 'insert-css'
+import * as echarts from 'echarts'
+import commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+
+export default {
+  name: 'MapCharts',
+  mixins: [paramsMixins, commonMixins, linkageMixins],
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      currentDeep: 0,
+      mapList: [],
+      charts: null,
+      hasData: false,
+      level: '',
+      option: {}
+    }
+  },
+  computed: {
+    Data () {
+      return JSON.parse(JSON.stringify(this.config))
+    }
+  },
+  watch: {
+    Data: {
+      handler (newVal, oldVal) {
+        if (newVal.w !== oldVal.w || newVal.h !== oldVal.h) {
+          this.$nextTick(() => {
+            this.charts.resize()
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.chartInit()
+  },
+  beforeDestroy () {
+    this.charts?.clear()
+  },
+  methods: {
+    chartInit () {
+      const config = this.config
+      // key和code相等，说明是一进来刷新，调用list接口
+      if (this.config.code === this.config.key || this.isPreview) {
+        // 改变数据
+        this.changeDataByCode(config).then((res) => {
+          // 改变样式
+          // config = this.changeStyle(res)
+          this.newChart(config)
+        }).catch(() => {
+        })
+      } else {
+        // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
+        this.changeData(config).then((res) => {
+          // 初始化图表
+          this.newChart(res)
+        })
+      }
+    },
+    /**
+     * 数据格式化
+     * 该方法继承自commonMixins
+     * @param {*} config
+     * @param {Array} data
+     */
+    dataFormatting (config, data) {
+      const dataList = []
+      data?.data?.forEach(item => {
+        dataList.push({
+          name: item[config.customize.name],
+          value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]],
+          // 原始数据
+          originData: item
+        })
+      })
+      config.option = {
+        ...config.option,
+        data: dataList
+      }
+      return config
+    },
+    /**
+     * 返回上一级
+     * @param {*} config
+     */
+    async backToPreviousLevel (config) {
+      this.currentDeep--
+      const map = this.mapList[this.currentDeep]
+      // 移除mapList中的最后一个元素
+      this.mapList.pop()
+      const mapData = JSON.parse(map.geoJson)
+      this.option.geo.map = map.name
+      // this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
+      echarts.registerMap(map.name, mapData)
+      this.charts.setOption(this.option, true)
+    },
+    /**
+     * 修改地图数据
+     * @param {Array} data
+     */
+    changeMapData (data) {
+      this.option.series[0].data = data
+      this.charts.setOption(this.option)
+    },
+    /**
+     * 初始化地图
+     * 该方法继承自commonMixins
+     * @param {*} config
+     */
+    async newChart (config) {
+      this.charts = echarts.init(
+        document.getElementById(`chart${this.config.code}`)
+      )
+      // 处理option，将配置项转换为echarts的option
+      this.handleOption(config)
+      this.charts.setOption(this.option)
+      // 注册点击事件
+      this.registerClickEvent(config)
+    },
+    /**
+     * 处理配置项option
+     * @param {*} config
+     */
+    handleOption (config) {
+      this.option = {
+        xAxis: {
+          data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
+        },
+        yAxis: {},
+        series: [
+          {
+            type: 'candlestick',
+            data: [
+              [20, 34, 10, 38],
+              [40, 35, 30, 50],
+              [31, 38, 33, 44],
+              [38, 15, 5, 42]
+            ]
+          }
+        ]
+      }
+    },
+
+    /**
+     * 注册点击事件
+     * @param config 地图组件配置项
+     */
+    registerClickEvent (config) {
+      this.charts.on('click', async (params) => {
+        const data = params?.data?.originData
+        if (data) {
+          this.linkage({ ...data, clickAreaName: params.name })
+        } else {
+          this.linkage({ clickAreaName: params.name })
+        }
+        if (params.name == '') return
+        if (!config.customize.down) {
+          return
+        }
+        // 到达允许下钻的层数，则不再下钻
+        if (this.currentDeep >= config.customize.downLevel) return
+        const downMapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
+        const downMap = await this.$dataRoomAxios.get(decodeURI(downMapUrl), {}, false)
+        // 地图不可用
+        if (downMap.available !== 1) {
+          this.$message({
+            message: '未找到该地图配置',
+            type: 'warning'
+          })
+          return
+        }
+        let geoJsonObj
+        try {
+          geoJsonObj = JSON.parse(downMap.geoJson)
+        } catch (error) {
+          this.$message({
+            message: params.name + '地图数据格式错误',
+            type: 'warning'
+          })
+          return
+        }
+        this.currentDeep++
+        this.mapList.push(downMap)
+        // this.changeData({...config, customize: {...config.customize, scope: params.name}})
+        this.option.geo.map = params.name
+        echarts.registerMap(params.name, geoJsonObj)
+        this.charts.setOption(this.option, true)
+      })
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/echartStyle';
+
+.light-theme {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.auto-theme {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.bs-design-wrap {
+  position: relative;
+
+  .button {
+    position: absolute;
+    z-index: 999;
+  }
+}
+</style>
diff --git a/data-room-ui/packages/BasicComponents/Candlestick/setting.vue b/data-room-ui/packages/BasicComponents/Candlestick/setting.vue
new file mode 100644
index 00000000..39e67ad0
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/Candlestick/setting.vue
@@ -0,0 +1,570 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <SettingTitle>标题</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.title"
+            placeholder="请输入标题"
+            clearable
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting :config="config" />
+      </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+              :bigTitle='config.title'
+            />
+          </div>
+      <SettingTitle>旋转</SettingTitle>
+          <div class="lc-field-body">
+            <RotateSetting
+              :config="config"
+            />
+          </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="是否显示地名"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.mapName"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.mapName"
+          label="地名字体颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+          v-model="config.customize.mapNameColor"
+          :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.mapName"
+          label="地名字体大小"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.mapNameSize"
+            class="bs-el-input-number"
+            placeholder="请输入字体大小"
+            :min="0"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.mapName"
+          label="地名字体权重"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.mapNameWeight"
+            class="bs-el-input-number"
+            placeholder="请输入字体权重"
+            :min="100"
+            :step="100"
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="地图级别"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.level"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+            @change="changeLevel()"
+          >
+            <el-option
+              v-for="level in levelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="地图"
+          label-width="100px"
+        >
+          <el-cascader
+            ref="cascade"
+            v-model="config.customize.mapId"
+            popper-class="bs-el-cascader"
+            :options="mapTree"
+            :props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
+            @change="mapSelect">
+            <template slot-scope="{ node, data }">
+              <span style="float: left">{{ data.name }}</span>
+              <span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> 未配置 </span>
+            </template>
+          </el-cascader>
+
+        </el-form-item>
+        <el-form-item
+          label="是否开启下钻"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.down"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.down"
+          label="允许下钻层级"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.downLevel"
+            popper-class="bs-el-select"
+            class="bs-el-select">
+            <el-option
+              v-for="level in downLevelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="比例"
+          label-width="100px"
+        >
+          <el-slider
+            v-model="config.customize.zoom"
+            class="bs-el-slider-dark"
+            :step="0.1"
+            :min="0.1"
+            :max="5"
+          ></el-slider>
+        </el-form-item>
+        <el-form-item
+          label="中心点横向偏移"
+          label-width="100px"
+        >
+          <el-slider
+            class="bs-el-slider-dark"
+            v-model="config.customize.center1"
+            :step="1"
+            :min="1"
+            :max="100"
+          ></el-slider>
+        </el-form-item>
+        <el-form-item
+          label="中心点纵向偏移"
+          label-width="100px"
+        >
+          <el-slider
+            class="bs-el-slider-dark"
+            v-model="config.customize.center2"
+            :step="1"
+            :min="1"
+            :max="100"
+          ></el-slider>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.down"
+          label="头部字体颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.fontGraphicColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.down"
+          label="头部字体大小"
+          label-width="100px"
+        >
+           <el-input-number
+            v-model="config.customize.fontSize"
+            placeholder="请输入字体大小"
+            controls-position="right"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图背景色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.backgroundColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图分割线颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.mapLineColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图高亮颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.emphasisColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="值渲染模式"
+          label-width="100px"
+        >
+          <el-radio-group
+            v-model="config.customize.scatter"
+            class="bs-el-radio-group"
+          >
+            <el-radio :label="true">
+              打点
+            </el-radio>
+            <el-radio :label="false">
+              色块
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </div>
+      <SettingTitle v-if="config.customize.scatter" >打点模式</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="地图分割块颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.areaColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="点颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.scatterBackgroundColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="点形状"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.scatterSymbol"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+            @change="changeLevel()"
+          >
+            <el-option
+              v-for="symbol in symbolList"
+              :key="symbol.value"
+              :label="symbol.label"
+              :value="symbol.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="显示点文字"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.showScatterValue"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="点文字颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.scatterColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.scatter"
+          label="点尺寸"
+          label-width="100px"
+        >
+          <el-slider
+            v-model="config.customize.scatterSize"
+            class="bs-el-slider-dark"
+            :step="1"
+            :min="1"
+            :max="100"
+          ></el-slider>
+        </el-form-item>
+      </div>
+      <SettingTitle v-if="!config.customize.scatter">色块模式</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          v-if="!config.customize.scatter"
+          label="悬浮框背景色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.tooltipBackgroundColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="!config.customize.scatter"
+          label="悬浮框边框色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.borderColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="!config.customize.scatter"
+          label="悬浮框数值标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.tooltipTitle"
+            placeholder="请输入数值标题"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="!config.customize.scatter"
+          label="启用手动筛选"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.visual"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="!config.customize.scatter"
+          label="色块数值范围"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.range[0]"
+            placeholder="请输入最小值"
+            controls-position="right"
+            :step="1"
+          />
+          -
+          <el-input-number
+            v-model="config.customize.range[1]"
+            controls-position="right"
+            placeholder="请输入最大值"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="!config.customize.scatter"
+          label="色块配色方案"
+          label-width="100px"
+        >
+          <color-select
+            v-model="config.customize.rangeColor"
+            @update="updateColorScheme"
+          />
+          <div
+            style="
+                display: flex;
+                align-items: center;
+                height: 42px;
+                flex-wrap: wrap;
+              "
+          >
+            <el-color-picker
+              v-for="(colorItem, index) in colors"
+              :key="index"
+              v-model="config.customize.rangeColor[index]"
+              show-alpha
+              popper-class="bs-el-color-picker"
+              class="start-color bs-el-color-picker"
+            />
+            <span
+              class="el-icon-circle-plus-outline"
+              style="color: #007aff; font-size: 20px"
+              @click="addColor"
+            />
+            <span
+              v-if="colors.length > 2"
+              class="el-icon-remove-outline"
+              style="color: #ea0b30; font-size: 20px"
+              @click="delColor"
+            />
+          </div>
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
+import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorSelect,
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  mixins: [chartSettingMixins],
+  props: {},
+  data () {
+    return {
+      colors: [],
+      mapList: [],
+      predefineThemeColors: predefineColors,
+      mapTree: [],
+      currentMap: {},
+      levelList: [
+        {value: '0', label: '世界'},
+        {value: '1', label: '国家'},
+        {value: '2', label: '省份'},
+        {value: '3', label: '城市'},
+        {value: '4', label: '区县'}
+      ],
+      symbolList: [
+        {value: 'circle', label: '圆形'},
+        {value: 'rect', label: '矩形'},
+        {value: 'roundRect', label: '圆角矩形'},
+        {value: 'triangle', label: '三角形'},
+        {value: 'diamond', label: '菱形'},
+        {value: 'pin', label: '水滴'},
+        {value: 'arrow', label: '箭头'}
+      ],
+      // 旧版本地图等级，该数据用于兼容旧版本
+      oldLevelMap: {
+        'world' : '0',
+        'country' : '1',
+        'province' : '2',
+      },
+      downLevelList: [
+        {value: 1, label: '下钻一层'},
+        {value: 2, label: '下钻两层'},
+        {value: 3, label: '下钻三层'},
+        {value: 4, label: '下钻四层'},
+        {value: 5, label: '下钻五层'}
+      ],
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+    this.getMapTree()
+    this.colors = this.config.customize.rangeColor
+  },
+  methods: {
+    getMapTree() {
+      const levelConst = ['0', '1', '2', '3', '4']
+      if (!levelConst.includes(this.config.customize.level)) {
+        this.config.customize.level = this.oldLevelMap[this.config.customize.level] || '0'
+      }
+      this.$dataRoomAxios.get(`/bigScreen/map/tree/${this.config.customize.level}`).then((res) => {
+        this.mapTree = res
+      })
+    },
+    mapSelect (mapId) {
+      let mapData = this.$refs['cascade'].getCheckedNodes()[0].data
+      this.currentMap = mapData
+    },
+    changeMap(val){
+      this.config.customize.scope=val.slice(0,-5)
+    },
+    changeLevel () {
+      this.getMapTree()
+    },
+    delColor () {
+      if (this.colors.length <= 2) return
+      this.colors.pop()
+      this.config.customize.rangeColor.pop()
+    },
+    addColor () {
+      this.colors.push('#fff')
+    },
+    updateColorScheme (colors) {
+      this.colors = [...colors]
+      this.config.customize.rangeColor = [...colors]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/settingWrap.scss';
+@import '../../assets/style/bsTheme.scss';
+// 筛选条件的按钮样式
+.add-filter-box {
+  position: relative;
+  .add-filter {
+    margin-left: 90px;
+    margin-bottom: 10px;
+  }
+  .add-filter-btn {
+    position: absolute;
+    top: 0;
+  }
+}
+.lc-field-body {
+  padding: 12px 16px;
+}
+::v-deep .bs-el-slider-dark {
+
+  .el-slider__runway {
+    background-color: var(--bs-el-background-1) !important;
+  }
+}
+</style>
diff --git a/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js b/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js
new file mode 100644
index 00000000..0eba99fe
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js
@@ -0,0 +1,145 @@
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const settingConfig = {
+  padding: [30, 30, 50, 80],
+  legend: false,
+  isGroup: true,
+  data: [],
+  color: '',
+  theme: 'dark',
+  displayOption: {
+    ...displayOption,
+    params: {
+      enable: true
+    },
+    headerField: {
+      enable: false
+    },
+    mapField: {
+      enable: true
+    },
+    metricField: {
+      // 指标
+      label: '维度',
+      enable: false,
+      multiple: false // 是否多选
+    },
+    dimensionField: {
+      // 表格列
+      label: '展示字段', // 维度/查询字段
+      enable: false,
+      multiple: false // 是否多选
+    }
+  }
+}
+const customConfig = {
+  type: 'candlestick',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    mapId: '667',
+    // 缩放尺寸
+    zoom: 1,
+    center1: 50,
+    center2: 50,
+    // 是否显示文字
+    mapName: true,
+    // 文字颜色
+    mapNameColor: '#fff',
+    // 文字大小
+    mapNameSize: 8,
+    // 文字权重
+    mapNameWeight: 500,
+    // 地图背景色
+    backgroundColor: 'rgb(0,0,0,0)',
+    // 是否打点
+    scatter: true,
+    // 悬浮框背景色
+    tooltipBackgroundColor: '#0C121C',
+    // 悬浮框边框色
+    borderColor: 'rgba(0, 0, 0, 0.16)',
+    // 悬浮框数值标题
+    tooltipTitle: 'GDP',
+    // 点颜色
+    scatterBackgroundColor: 'rgba(255,0,0,.7)',
+    // 显示点文字
+    showScatterValue: true,
+    // 点文字颜色
+    scatterColor: '#fff',
+    // 点形状
+    scatterSymbol: 'circle',
+    // 点大小
+    scatterSize: 40,
+    // 分割线颜色
+    mapLineColor: 'rgba(53, 86, 165, 1)',
+    fontGraphicColor: '#fff',
+    fontSize: '30',
+    // 是否开启下钻
+    down: true,
+    // 允许下钻的层级
+    downLevel: 1,
+    // 地图级别
+    level: '2',
+    // 范围
+    scope: '中国',
+    // 地图区域颜色
+    areaColor: 'rgba(31, 50, 121, 1)',
+    // 地图区域悬浮颜色
+    emphasisColor: '#389BB7',
+    // 是否开启筛选
+    visual: false,
+    // 筛选范围
+    range: [0, 6000],
+    // 从上到下的颜色
+    rangeColor: ['#007aff', '#A5CC82'],
+    // 地图数据
+    dataMap: '中华人民共和国.json',
+    // 展示字段
+    value: '',
+    // 横坐标
+    xaxis: '',
+    // 纵坐标
+    yaxis: '',
+    // 名称
+    name: ''
+
+  }
+}
+
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}
+
+export const candlestickData = {
+  name: 'K线图',
+  title: 'K线图',
+  icon: Icon.getNameList()[34],
+  border: { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [0, 0, 0, 0] },
+  className:
+    'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
+  w: 800,
+  h: 700,
+  x: 0,
+  y: 0,
+  type: 'candlestick',
+  option: {
+    ...cloneDeep(settingConfig)
+  },
+  setting: undefined, // 右侧面板自定义配置
+  dataHandler: {}, // 数据自定义处理js脚本
+  ...cloneDeep(dataConfig)
+}
diff --git a/data-room-ui/packages/G2Plots/plotList.js b/data-room-ui/packages/G2Plots/plotList.js
index 410979ef..a4c1cf14 100644
--- a/data-room-ui/packages/G2Plots/plotList.js
+++ b/data-room-ui/packages/G2Plots/plotList.js
@@ -6,6 +6,7 @@
 import { dataConfig, settingConfig } from '../PlotRender/settingConfig'
 import { mapData } from 'data-room-ui/BasicComponents/Map/settingConfig'
 import { FlyMapData } from 'data-room-ui/BasicComponents/FlyMap/settingConfig'
+import { candlestickData } from 'data-room-ui/BasicComponents/Candlestick/settingConfig'
 // import _ from 'lodash'
 import cloneDeep from 'lodash/cloneDeep'
 import sortList from './plotListSort'
@@ -96,5 +97,6 @@ export function getCustomPlots () {
   return list
 }
 
-const plots = [...plotList, ...customPlots, mapData, FlyMapData]
+const plots = [...plotList, ...customPlots, candlestickData, mapData, FlyMapData]
+console.log('plotList', plots)
 export default plots
diff --git a/data-room-ui/packages/G2Plots/桑基图/基础桑基图.js b/data-room-ui/packages/G2Plots/桑基图/基础桑基图.js
index 0262b90f..1eae0fc4 100644
--- a/data-room-ui/packages/G2Plots/桑基图/基础桑基图.js
+++ b/data-room-ui/packages/G2Plots/桑基图/基础桑基图.js
@@ -68,7 +68,7 @@ const setting = [
     optionField: 'nodeStyle.fill',
     value: '#E5E6EB10',
     tabName: 'custom',
-    groupName: 'grid'
+    groupName: 'graph'
   },
   {
     label: '节点边框颜色',
@@ -77,7 +77,7 @@ const setting = [
     optionField: 'nodeStyle.stroke',
     value: '#E5E6EB10',
     tabName: 'custom',
-    groupName: 'grid'
+    groupName: 'graph'
   }
   // X轴 xAxis
 ]
diff --git a/data-room-ui/packages/Render/RenderCard2.vue b/data-room-ui/packages/Render/RenderCard2.vue
index fc3ec297..c2ae137d 100644
--- a/data-room-ui/packages/Render/RenderCard2.vue
+++ b/data-room-ui/packages/Render/RenderCard2.vue
@@ -26,8 +26,9 @@ import CustomComponent from '../PlotRender/index.vue'
 import Svgs from '../Svgs/index.vue'
 import EchartsComponent from '../EchartsRender/index.vue'
 import RemoteComponent from 'data-room-ui/RemoteComponents/index.vue'
-import Map  from 'data-room-ui/BasicComponents/Map/index.vue'
+import Map from 'data-room-ui/BasicComponents/Map/index.vue'
 import FlyMap from 'data-room-ui/BasicComponents/FlyMap/index.vue'
+import candlestick from 'data-room-ui/BasicComponents/Candlestick/index.vue'
 const components = {}
 for (const key in pcComponent) {
   if (Object.hasOwnProperty.call(pcComponent, key)) {
@@ -43,6 +44,7 @@ export default {
     Svgs,
     Map,
     FlyMap,
+    candlestick,
     RemoteComponent,
     EchartsComponent
   },
@@ -76,7 +78,7 @@ export default {
     // 切换主题时针对远程组件触发样式修改的方法
     styleHandler (config) {
       this.$emit('styleHandler', config)
-    },
+    }
     // // 打开右侧面板
     // openRightPanel () {
     //   this.$emit('openRightPanel', this.currentChart)
diff --git a/data-room-ui/packages/assets/images/bigScreenIcon/svg/34candlestick.svg b/data-room-ui/packages/assets/images/bigScreenIcon/svg/34candlestick.svg
new file mode 100644
index 00000000..8da511d0
--- /dev/null
+++ b/data-room-ui/packages/assets/images/bigScreenIcon/svg/34candlestick.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719302688460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3407" xmlns:xlink="http://www.w3.org/1999/xlink" width="260" height="260"><path d="M102.333 885.293V98.152h-37v830.067H959.34v-42.926z" fill="#819292" p-id="3408"></path><path d="M208.913 757.492h9.25v-69.875h69.952V506.578l-69.952-0.542v-70.488h-9.25v70.416l-69.951-0.542v182.195h69.951z" fill="#D73949" p-id="3409"></path><path d="M417.493 565.852h9.25V432.927h69.952V320.595l-69.952-0.337V276.6h-9.25v43.614l-69.952-0.337v113.05h69.952z" fill="#0CA294" p-id="3410"></path><path d="M621.456 820.044h9.25V636.698h72.727V367.185l-72.727-0.839V311.66h-9.25v54.579l-67.176-0.775v271.234h67.176z" fill="#35A0D6" p-id="3411"></path><path d="M830.97 852.241h9.25v-64.819h69.951V659.667l-69.951-0.382V505.422h-9.25v153.812l-69.952-0.383v128.571h69.952z" fill="#D97B24" p-id="3412"></path></svg>
\ No newline at end of file