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 @@
- 边框 -
- -
- 旋转 -
- -
- 基础 + + 边框 +
- - - + :config="config.border" + :big-title="config.title" + /> +
+ 旋转 +
+ +
+ 图表 +
- @@ -86,348 +74,277 @@ :step="100" /> +
+ + 网格线 + +
+ + + - - - + - - - - + +
+ + x轴 + +
- + class="bs-el-select" + placeholder="请选择位置" + > + - - - - - - - + + - - + - - - 打点 - - - 色块 - - + -
- 打点模式 -
+
+ + y轴 + +
- + - + - - -
- 色块模式 -
- - - - + - - - - -
- - - -
@@ -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