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