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"
/>
+
+
+ 网格线
+
+
+
+
+
-
-
-
+
-
-
- {{ data.name }}
- 未配置
-
-
-
+
+
+
+ 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