fix:优化K线图的样式配置

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
           }
         ]

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()

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
+    }
   }
 }
 

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