初始化

frontend/packages/BasicComponents/Candlestick/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <div
+    :id="config.code + 'wrap'"
+    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'
+import cloneDeep from 'lodash/cloneDeep'
+
+export default {
+  name: 'Candlestick',
+  mixins: [paramsMixins, commonMixins, linkageMixins],
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      currentDeep: 0,
+      mapList: [],
+      charts: null,
+      hasData: false,
+      level: '',
+      option: {},
+      xData: [],
+      yData: []
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  mounted () {
+    this.chartInit()
+    // 监听窗口或者父盒子大小变化
+    this.chartResize()
+  },
+  beforeDestroy () {
+    this.charts?.clear()
+  },
+  methods: {
+    chartResize () {
+      window.addEventListener('resize', () => {
+        if (this.charts) {
+          this.charts.resize()
+        }
+      })
+      const dom = document.getElementById(`${this.config.code}wrap`)
+      if (dom) {
+        this.resizeObserver = new ResizeObserver(() => {
+          if (this.charts) {
+            this.charts.resize()
+          }
+        })
+        this.resizeObserver.observe(dom)
+      }
+    },
+    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(config)
+        })
+      }
+    },
+    /**
+     * 数据格式化
+     * 该方法继承自commonMixins
+     * @param {*} config
+     * @param {Array} data
+     */
+    dataFormatting (config, _data) {
+      const data = _data?.data
+      if (data && data.length) {
+        this.xData = data.map(item => item[config.dataSource.xfield])
+        this.yData = data.map(item => [item[config.dataSource.openField], item[config.dataSource.closeField], item[config.dataSource.lowField], item[config.dataSource.highField]])
+      } else {
+        this.xData = ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
+        this.yData = [
+          [20, 34, 10, 38],
+          [40, 35, 30, 50],
+          [31, 38, 33, 44],
+          [38, 15, 5, 42]
+        ]
+      }
+      return config
+    },
+    // 更新图表数据
+    updateChartData (config) {
+      this.handleOption(config)
+      this.charts.setOption(this.option)
+    },
+    changeStyle (config) {
+      this.handleOption(config)
+      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)
+    },
+    /**
+     * 处理配置项option
+     * @param {*} config
+     */
+    handleOption (config) {
+      this.option = {
+        xAxis:
+          {
+            show: true,
+            name: config.customize.xAxis.name,
+            nameGap: config.customize.xAxis.nameGap,
+            data: this.xData,
+            nameTextStyle: {
+              color: config.customize.xAxis.nameColor,
+              fontSize: config.customize.xAxis.nameSize
+            },
+            nameLocation: config.customize.xAxis.position,
+            // 坐标轴刻度设置
+            axisTick: {
+              show: true,
+              alignWithLabel: true,
+              lineStyle: {
+                width: config.customize.xAxis.tickWidth,
+                color: config.customize.xAxis.tickColor
+              }
+            },
+            // 是否显示坐标轴的轴线
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: config.customize.xAxis.lineColor,
+                width: config.customize.xAxis.lineWidth
+              }
+            },
+            // 坐标轴刻度标签
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: config.customize.xAxis.labelSize,
+                color: config.customize.xAxis.labelColor
+              },
+              margin: 30
+            }
+          },
+        yAxis: {
+          name: config.customize.yAxis.name,
+          nameGap: config.customize.yAxis.nameGap,
+          nameTextStyle: {
+            color: config.customize.yAxis.nameColor,
+            fontSize: config.customize.yAxis.nameSize
+          },
+          nameLocation: config.customize.yAxis.position,
+          show: true,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              fontSize: config.customize.yAxis.labelSize,
+              color: config.customize.yAxis.labelColor
+            },
+            margin: 10
+          },
+          axisTick: {
+            show: true,
+            length: 1,
+            lineStyle: {
+              width: config.customize.yAxis.tickWidth,
+              color: config.customize.yAxis.tickColor
+            }
+          },
+          // 分隔线
+          splitLine: {
+            show: config.customize.gridShow, // yAxis.show配置为true时，该配置才有效
+            lineStyle: {
+              color: config.customize.gridColor,
+              width: config.customize.gridWidth
+            }
+          },
+          // y轴轴线是否显示
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: config.customize.yAxis.lineColor,
+              width: config.customize.yAxis.lineWidth
+            }
+
+          }
+        },
+        tooltip: {
+          // 显示提示框
+          show: true,
+          trigger: 'item',
+          backgroundColor: 'rgba(50,50,50,0.7)',
+          borderColor: '#333',
+          borderWidth: 1,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+            fontWeight: 'normal'
+          },
+
+          axisPointer: {
+            type: 'line'
+          }
+        },
+        grid: {
+          left: config.customize.left || 50,
+          right: config.customize.right || 20,
+          bottom: config.customize.bottom || 60,
+          top: config.customize.top || 20
+        },
+        series: [
+          {
+            type: 'candlestick',
+            label: {
+              show: true,
+              position: 'inside',
+              color: '#fff',
+              fontSize: 12
+            },
+            itemStyle: {
+              color: config.customize.highColor,
+              color0: config.customize.lowColor
+            },
+            data: this.yData
+          }
+        ]
+      }
+    }
+
+  }
+}
+</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>

frontend/packages/BasicComponents/Candlestick/setting.vue

@@ -0,0 +1,491 @@
+<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"
+          :big-title="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"
+        >
+          <ColorPicker
+            v-model="config.customize.highColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="下降色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.lowColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>
+        网格线
+      </SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+
+          label="网格线"
+          label-width="100px"
+        >
+          <el-switch
+            v-model="config.customize.gridShow"
+            class="bs-el-switch"
+          />
+        </el-form-item>
+        <el-form-item
+          label="宽度"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.gridWidth"
+            class="bs-el-input-number"
+          />
+        </el-form-item>
+        <el-form-item
+          label="颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.gridColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>
+        x轴
+      </SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+
+          label="标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.xAxis.name"
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="标题位置"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.xAxis.position"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+            placeholder="请选择位置"
+          >
+            <el-option
+              v-for="item in axisPositionList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          label="标题间距"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.xAxis.nameGap"
+            class="bs-el-input-number"
+            placeholder="请输入标题间距"
+            :min="0"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="标题字体大小"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.xAxis.nameSize"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="标题颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.xAxis.nameColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="标签字体大小"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.xAxis.labelSize"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="标签颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.xAxis.labelColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="轴线宽度"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.xAxis.lineWidth"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="轴线颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.xAxis.lineColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="刻度线宽度"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.xAxis.tickWidth"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="刻度线颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.xAxis.tickColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>
+        y轴
+      </SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+
+          label="标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.yAxis.name"
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="标题位置"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.yAxis.position"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+            placeholder="请选择位置"
+          >
+            <el-option
+              v-for="item in axisPositionList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="标题间距"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.yAxis.nameGap"
+            class="bs-el-input-number"
+            placeholder="请输入标题间距"
+            :min="0"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="标题字体大小"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.yAxis.nameSize"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="标题颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.yAxis.nameColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="标签字体大小"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.yAxis.labelSize"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="标签颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.yAxis.labelColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          label="轴线宽度"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.yAxis.lineWidth"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="轴线颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.yAxis.lineColor"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="刻度线宽度"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.yAxis.tickWidth"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体大小"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+
+          label="刻度线颜色"
+          label-width="100px"
+        >
+          <el-color-picker
+            v-model="config.customize.yAxis.tickColor"
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>
+        边距
+      </SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item label="上边距">
+          <el-input-number
+            v-model="config.customize.top"
+            class="bs-el-input-number"
+          />
+        </el-form-item>
+        <el-form-item label="下边距">
+          <el-input-number
+            v-model="config.customize.bottom"
+            class="bs-el-input-number"
+          />
+        </el-form-item>
+        <el-form-item label="左边距">
+          <el-input-number
+            v-model="config.customize.left"
+            class="bs-el-input-number"
+          />
+        </el-form-item>
+        <el-form-item label="右边距">
+          <el-input-number
+            v-model="config.customize.right"
+            class="bs-el-input-number"
+          />
+        </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: {
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  mixins: [chartSettingMixins],
+  props: {},
+  data () {
+    return {
+      colors: [],
+      mapList: [],
+      predefineThemeColors: predefineColors,
+      mapTree: [],
+      currentMap: {},
+      axisPositionList: [
+        {
+          label: '左',
+          value: 'start'
+        },
+        {
+          label: '中',
+          value: 'center'
+        },
+        {
+          label: '右',
+          value: 'end'
+        }]
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+    this.colors = this.config.customize.rangeColor
+  },
+  methods: {
+    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>

frontend/packages/BasicComponents/Candlestick/settingConfig.js

@@ -0,0 +1,108 @@
+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: [0, 30, 50, 80],
+  legend: false,
+  isGroup: true,
+  data: [],
+  color: '',
+  theme: 'dark',
+  displayOption: {
+    ...displayOption,
+    params: {
+      enable: true
+    },
+    headerField: {
+      enable: 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: {
+    // 自定义样式
+    highColor: '#c23531',
+    lowColor: '#314656',
+    gridShow: true,
+    gridColor: '#314656',
+    gridWidth: 1,
+    left: 50,
+    right: 20,
+    top: 20,
+    bottom: 60,
+    xAxis: {
+      name: '',
+      nameGap: 30,
+      nameColor: '#fff',
+      nameSize: 16,
+      position: 'end',
+      tickWidth: 1,
+      tickColor: '#fff',
+      labelColor: '#fff',
+      labelSize: 12,
+      lineColor: '#fff',
+      lineWidth: 1
+    },
+    yAxis: {
+      name: '',
+      nameGap: 10,
+      nameColor: '#fff',
+      nameSize: 16,
+      position: 'end',
+      tickWidth: 1,
+      tickColor: '#fff',
+      labelColor: '#fff',
+      labelSize: 12,
+      lineColor: '#fff',
+      lineWidth: 1
+    }
+  }
+}
+
+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.ScreenCandlestickChart',
+  w: 450,
+  h: 320,
+  x: 0,
+  y: 0,
+  type: 'candlestick',
+  option: {
+    ...cloneDeep(settingConfig)
+  },
+  setting: undefined, // 右侧面板自定义配置
+  dataHandler: {}, // 数据自定义处理js脚本
+  ...cloneDeep(dataConfig),
+  dataSource: {
+    ...cloneDeep(dataConfig.dataSource),
+    xfield: '',
+    openField: '',
+    closeField: '',
+    lowField: '',
+    highField: ''
+  }
+}