diff --git a/data-room-ui/packages/BasicComponents/Candlestick/index.vue b/data-room-ui/packages/BasicComponents/Candlestick/index.vue index 45cf3222..4bfcadc9 100644 --- a/data-room-ui/packages/BasicComponents/Candlestick/index.vue +++ b/data-room-ui/packages/BasicComponents/Candlestick/index.vue @@ -15,6 +15,7 @@ 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', @@ -91,7 +92,6 @@ export default { * @param {Array} data */ dataFormatting (config, _data) { - console.log('dataFormatting', _data) const data = _data?.data if (data && data.length) { this.xData = data.map(item => item[config.dataSource.x]) @@ -112,6 +112,10 @@ export default { this.handleOption(config) this.charts.setOption(this.option) }, + changeStyle (config) { + this.handleOption(config) + this.charts.setOption(this.option) + }, /** * 初始化地图 * 该方法继承自commonMixins @@ -131,13 +135,118 @@ export default { */ handleOption (config) { this.option = { - xAxis: { - data: this.xData + xAxis: [ + { + show: true, + name: config.customize.xAxis.name, + nameGap: 30, + 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: 10, + 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: 'axis', + backgroundColor: 'rgba(50,50,50,0.7)', + borderColor: '#333', + borderWidth: 1, + textStyle: { + color: '#fff', + fontSize: 12, + fontWeight: 'normal' + }, + + axisPointer: { + type: 'cross' + } }, - yAxis: {}, series: [ { type: 'candlestick', + label: { + show: true, + position: 'inside', + color: '#fff', + fontSize: 12 + }, + itemStyle: { + color: config.customize.highColor, + color0: config.customize.lowColor + }, data: this.yData } ] diff --git a/data-room-ui/packages/BasicComponents/Candlestick/setting.vue b/data-room-ui/packages/BasicComponents/Candlestick/setting.vue index 39e67ad0..36e1aca4 100644 --- a/data-room-ui/packages/BasicComponents/Candlestick/setting.vue +++ b/data-room-ui/packages/BasicComponents/Candlestick/setting.vue @@ -24,57 +24,45 @@ <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> + <SettingTitle v-if="config.border"> + 边框 + </SettingTitle> <div class="lc-field-body"> - <el-form-item - label="是否显示地名" + <BorderSetting + v-if="config.border" label-width="100px" - > - <el-switch - v-model="config.customize.mapName" - class="bs-el-switch" - active-color="#007aff" - /> - </el-form-item> + :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 - v-if="config.customize.mapName" - label="地名字体颜色" + label="上升色" label-width="100px" > <ColorPicker - v-model="config.customize.mapNameColor" - :predefine-colors="predefineThemeColors" + v-model="config.customize.highColor" + :predefine-colors="predefineThemeColors" /> </el-form-item> <el-form-item - v-if="config.customize.mapName" - label="地名字体大小" + label="下降色" label-width="100px" > - <el-input-number - v-model="config.customize.mapNameSize" - class="bs-el-input-number" - placeholder="请输入字体大小" - :min="0" + <ColorPicker + v-model="config.customize.lowColor" + :predefine-colors="predefineThemeColors" /> </el-form-item> <el-form-item - v-if="config.customize.mapName" + label="地名字体权重" label-width="100px" > @@ -86,348 +74,277 @@ :step="100" /> </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="宽度" 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-input-number + v-model="config.customize.gridWidth" + class="bs-el-input-number" + /> </el-form-item> <el-form-item - label="地图" + 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> - + <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="标题" label-width="100px" > - <el-switch - v-model="config.customize.down" - class="bs-el-switch" - active-color="#007aff" + <el-input + v-model="config.customize.xAxis.name" /> </el-form-item> <el-form-item - v-if="config.customize.down" - label="允许下钻层级" + + label="标题位置" label-width="100px" > <el-select - v-model="config.customize.downLevel" + v-model="config.customize.xAxis.position" popper-class="bs-el-select" - class="bs-el-select"> + class="bs-el-select" + placeholder="请选择位置" + > <el-option - v-for="level in downLevelList" - :key="level.value" - :label="level.label" - :value="level.value" + 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-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="标题字体大小" label-width="100px" > - <el-slider - class="bs-el-slider-dark" - v-model="config.customize.center2" - :step="1" - :min="1" - :max="100" - ></el-slider> + <el-input-number + v-model="config.customize.xAxis.nameSize" + class="bs-el-input-number" + placeholder="请输入标题字体大小" + clearable + /> </el-form-item> <el-form-item - v-if="config.customize.down" - label="头部字体颜色" + + label="标题颜色" label-width="100px" > <ColorPicker - v-model="config.customize.fontGraphicColor" + v-model="config.customize.xAxis.nameColor" :predefine-colors="predefineThemeColors" /> </el-form-item> + <el-form-item - v-if="config.customize.down" - label="头部字体大小" + label="标签字体大小" label-width="100px" > - <el-input-number - v-model="config.customize.fontSize" - placeholder="请输入字体大小" - controls-position="right" - :step="1" + <el-input-number + v-model="config.customize.xAxis.labelSize" + class="bs-el-input-number" + placeholder="请输入标题字体大小" + clearable /> </el-form-item> <el-form-item - label="地图背景色" + + label="标签颜色" label-width="100px" > <ColorPicker - v-model="config.customize.backgroundColor" + v-model="config.customize.xAxis.labelColor" :predefine-colors="predefineThemeColors" /> </el-form-item> <el-form-item - label="地图分割线颜色" + label="轴线宽度" label-width="100px" > - <ColorPicker - v-model="config.customize.mapLineColor" - :predefine-colors="predefineThemeColors" + <el-input-number + v-model="config.customize.xAxis.lineWidth" + class="bs-el-input-number" + placeholder="请输入标题字体大小" + clearable /> </el-form-item> <el-form-item - label="地图高亮颜色" + + label="轴线颜色" label-width="100px" > <ColorPicker - v-model="config.customize.emphasisColor" + v-model="config.customize.xAxis.lineColor" :predefine-colors="predefineThemeColors" /> </el-form-item> + <el-form-item - label="值渲染模式" + 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-input-number + v-model="config.customize.xAxis.tickWidth" + class="bs-el-input-number" + placeholder="请输入标题字体大小" + clearable + /> </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="刻度线颜色" label-width="100px" > <ColorPicker - v-model="config.customize.areaColor" + v-model="config.customize.xAxis.tickColor" :predefine-colors="predefineThemeColors" /> </el-form-item> + </div> + <SettingTitle> + y轴 + </SettingTitle> + <div class="lc-field-body"> <el-form-item - v-if="config.customize.scatter" - label="点颜色" + + label="标题" label-width="100px" > - <ColorPicker - v-model="config.customize.scatterBackgroundColor" - :predefine-colors="predefineThemeColors" + <el-input + v-model="config.customize.yAxis.name" /> </el-form-item> <el-form-item - v-if="config.customize.scatter" - label="点形状" + + label="标题位置" label-width="100px" > <el-select - v-model="config.customize.scatterSymbol" + v-model="config.customize.yAxis.position" popper-class="bs-el-select" class="bs-el-select" - @change="changeLevel()" + placeholder="请选择位置" > <el-option - v-for="symbol in symbolList" - :key="symbol.value" - :label="symbol.label" - :value="symbol.value" + v-for="item in axisPositionList" + :key="item.value" + :label="item.label" + :value="item.value" /> </el-select> </el-form-item> + <el-form-item - v-if="config.customize.scatter" - label="显示点文字" + label="标题字体大小" label-width="100px" > - <el-switch - v-model="config.customize.showScatterValue" - class="bs-el-switch" - active-color="#007aff" + <el-input-number + v-model="config.customize.yAxis.nameSize" + class="bs-el-input-number" + placeholder="请输入标题字体大小" + clearable /> </el-form-item> <el-form-item - v-if="config.customize.scatter" - label="点文字颜色" + + label="标题颜色" label-width="100px" > <ColorPicker - v-model="config.customize.scatterColor" + v-model="config.customize.yAxis.nameColor" :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="标签字体大小" label-width="100px" > - <ColorPicker - v-model="config.customize.tooltipBackgroundColor" - :predefine-colors="predefineThemeColors" + <el-input-number + v-model="config.customize.yAxis.labelSize" + class="bs-el-input-number" + placeholder="请输入标题字体大小" + clearable /> </el-form-item> <el-form-item - v-if="!config.customize.scatter" - label="悬浮框边框色" + + label="标签颜色" label-width="100px" > <ColorPicker - v-model="config.customize.borderColor" + v-model="config.customize.yAxis.labelColor" :predefine-colors="predefineThemeColors" /> </el-form-item> <el-form-item - v-if="!config.customize.scatter" - label="悬浮框数值标题" + label="轴线宽度" label-width="100px" > - <el-input - v-model="config.customize.tooltipTitle" - placeholder="请输入数值标题" + <el-input-number + v-model="config.customize.yAxis.lineWidth" + class="bs-el-input-number" + placeholder="请输入标题字体大小" clearable /> </el-form-item> <el-form-item - v-if="!config.customize.scatter" - label="启用手动筛选" + + label="轴线颜色" label-width="100px" > - <el-switch - v-model="config.customize.visual" - class="bs-el-switch" - active-color="#007aff" + <ColorPicker + v-model="config.customize.yAxis.lineColor" + :predefine-colors="predefineThemeColors" /> </el-form-item> + <el-form-item - v-if="!config.customize.scatter" - label="色块数值范围" + 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" + v-model="config.customize.yAxis.tickWidth" + class="bs-el-input-number" + placeholder="请输入标题字体大小" + clearable /> </el-form-item> <el-form-item - v-if="!config.customize.scatter" - label="色块配色方案" + + label="刻度线颜色" label-width="100px" > - <color-select - v-model="config.customize.rangeColor" - @update="updateColorScheme" + <el-color-picker + v-model="config.customize.yAxis.tickColor" /> - <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> @@ -441,7 +358,7 @@ 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"; +import { predefineColors } from 'data-room-ui/js/utils/colorList' export default { name: 'BarSetting', components: { @@ -461,35 +378,48 @@ export default { predefineThemeColors: predefineColors, mapTree: [], currentMap: {}, + axisPositionList: [ + { + label: '左', + value: 'start' + }, + { + label: '中', + value: 'center' + }, + { + label: '右', + value: 'end' + }], levelList: [ - {value: '0', label: '世界'}, - {value: '1', label: '国家'}, - {value: '2', label: '省份'}, - {value: '3', label: '城市'}, - {value: '4', label: '区县'} + { 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: '箭头'} + { 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', + world: '0', + country: '1', + province: '2' }, downLevelList: [ - {value: 1, label: '下钻一层'}, - {value: 2, label: '下钻两层'}, - {value: 3, label: '下钻三层'}, - {value: 4, label: '下钻四层'}, - {value: 5, label: '下钻五层'} - ], + { value: 1, label: '下钻一层' }, + { value: 2, label: '下钻两层' }, + { value: 3, label: '下钻三层' }, + { value: 4, label: '下钻四层' }, + { value: 5, label: '下钻五层' } + ] } }, computed: { @@ -508,7 +438,7 @@ export default { this.colors = this.config.customize.rangeColor }, methods: { - getMapTree() { + 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' @@ -518,11 +448,11 @@ export default { }) }, mapSelect (mapId) { - let mapData = this.$refs['cascade'].getCheckedNodes()[0].data + const mapData = this.$refs.cascade.getCheckedNodes()[0].data this.currentMap = mapData }, - changeMap(val){ - this.config.customize.scope=val.slice(0,-5) + changeMap (val) { + this.config.customize.scope = val.slice(0, -5) }, changeLevel () { this.getMapTree() diff --git a/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js b/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js index 29d3516f..447490c7 100644 --- a/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js +++ b/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js @@ -36,72 +36,36 @@ const customConfig = { 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: '' - + // 自定义样式 + highColor: '#c23531', + lowColor: '#314656', + gridShow: true, + gridColor: '#314656', + gridWidth: 1, + xAxis: { + name: '', + nameColor: '#fff', + nameSize: 16, + position: 'end', + tickWidth: 1, + tickColor: '#fff', + labelColor: '#fff', + labelSize: 12, + lineColor: '#fff', + lineWidth: 1 + }, + yAxis: { + name: '', + nameColor: '#fff', + nameSize: 16, + position: 'end', + tickWidth: 1, + tickColor: '#fff', + labelColor: '#fff', + labelSize: 12, + lineColor: '#fff', + lineWidth: 1 + } } } diff --git a/data-room-ui/packages/js/store/actions.js b/data-room-ui/packages/js/store/actions.js index 11065051..2f71f8b9 100644 --- a/data-room-ui/packages/js/store/actions.js +++ b/data-room-ui/packages/js/store/actions.js @@ -90,6 +90,7 @@ export default { } } }) + console.log('pageInfo', pageInfo.chartList) // 改变页面数据 commit('changePageInfo', pageInfo) @@ -186,7 +187,7 @@ export function handleResData (data) { chart.key = chart.code }) // 主题兼容 - pageInfo.chartList = themeToSetting(pageInfo.chartList, pageInfo.pageConfig.customTheme) + // pageInfo.chartList = themeToSetting(pageInfo.chartList, pageInfo.pageConfig.customTheme) // 存储修改后的配置 localStorage.setItem('pageInfo', JSON.stringify(pageInfo)) return pageInfo