主题样式写入options

src/utils/defaultOptions.js

@@ -165,7 +165,8 @@ export const unitArr = [
 /* 季节性图配置 */
 export const seasonOptions = {
 		//默认颜色配置
-	colors:['#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA','#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF'],
+		/* '#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA', */
+	colors:['#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF'],
 	yAxis: {
 		lineWidth: 1,
 		lineColor: '#bfbfbf',

src/views/dataEntry_manage/addChart.vue

@@ -347,6 +347,7 @@
 					<markersSection
 						v-if="tableData.length"
 						:chartType="chartInfo.ChartType"
+						@update="setChartMarkerInfo"
 					/>
         </div>
 
@@ -497,7 +498,7 @@
 							<div class="chart-source">
 								<span>数据来源:{{chartInfo.SourcesFrom}}</span>
 								<el-switch
-									v-model="chartInfo.SourcesFromDisabled"
+									v-model="chartInfo.SourcesFromVisible"
 									:active-value="1"
 									:inactive-value="0"
 									style="margin:0 15px;"
@@ -706,7 +707,7 @@ export default {
 							return this.$message.warning('横坐标显示范围不能为空');
 						}
 					}
-					
+
 					let db_arr = this.tableData.map(item => ({
 							ChartColor: item.ChartColor,
 							PredictChartColor: item.PredictChartColor,

src/views/dataEntry_manage/components/addMarkerDialog.vue

@@ -17,7 +17,6 @@
         label-width="120px"
         ref="formRef"
         :model="markerForm"
-        :rules="formRules"
         hide-required-asterisk
       >
           <el-form-item label="选择坐标轴" prop="axis">
@@ -25,51 +24,121 @@
               v-model="markerForm.axis"
               placeholder="请选择日期坐标轴"
               style="width:200px;"
+              @change="markerForm.axisName=axisLabelMap[markerForm.axis]"
             >
-              <el-option label="左轴" :value="1" v-if="canSelectYaxis"/>
+              <el-option label="左轴" :value="1" v-if="canSelectLeftYaxis"/>
               <el-option label="横轴" :value="3" v-if="canSelectXaxis"/>
               <el-option label="右轴" :value="0" v-if="canSelectRightYaxis"/>
               <el-option label="右2轴" :value="2" v-if="canSelectRightTwoYaxis"/>
             </el-select>
           </el-form-item>
-          <el-form-item label="标记线所在刻度" prop="value">
-            
-            <!-- 时间轴1,2,4,6的y轴数字 x轴日期  -->
-            <template v-if="[1,2,4,6].includes(chartInfo.ChartType)">
-              <el-date-picker
-                v-if="markerForm.axis===3"
-                v-model="markerForm.value"
-                type="date"
-                style="width: 200px;"
-                placeholder="选择日期"
-                :clearable="false"
-                value-format="yyyy-MM-dd"
-                prefix-icon="none"
-              ></el-date-picker>
+          <el-form-item :label="form.markerType==='line'?`标记线所在刻度`:`标识区所在范围`" prop="value">
+            <!-- 标识线 -->
+            <template v-if="form.markerType==='line'">
+              <!-- 时间轴1,2,4,6的y轴数字 x轴日期  -->
+              <template v-if="[1,2,4,6].includes(chartInfo.ChartType)">
+                <el-date-picker
+                  v-if="markerForm.axis===3"
+                  v-model="markerForm.value"
+                  type="date"
+                  style="width: 200px;"
+                  placeholder="选择日期"
+                  :clearable="false"
+                  value-format="yyyy-MM-dd"
+                ></el-date-picker>
 
-              <el-input
-                v-else
-                v-model="markerForm.value"
-                style="width: 200px;"
-                type="number"
-                placeholder="请输入数字"
-                clearable
-              />
+                <el-input
+                  v-else
+                  v-model="markerForm.value"
+                  class="number-input"
+                  style="width: 200px;"
+                  type="number"
+                  placeholder="输入数字"
+                />
+
+              </template>
 
+              <!-- 柱形图，散点，截面散点只可选数字 -->
+              <template v-else-if="[5,7,10].includes(chartInfo.ChartType)">
+                <el-input
+                  v-model="markerForm.value"
+                  style="width: 200px;"
+                  type="number"
+                  class="number-input"
+                  placeholder="输入数字"
+                  clearable
+                />
+              </template>
             </template>
 
-            <!-- 柱形图，散点，截面散点只可选数字 -->
-            <template v-else-if="[5,7,10].includes(chartInfo.ChartType)">
-              <el-input
-                v-model="markerForm.value"
-                style="width: 200px;"
-                type="number"
-                placeholder="请输入数字"
-                clearable
-              />
+
+            <!-- 标识区 -->
+            <template v-else>
+              <!-- 时间轴1,2,4,6的y轴数字 x轴日期  -->
+              <template v-if="[1,2,4,6].includes(chartInfo.ChartType)">
+                <div v-if="markerForm.axis===3">
+                  <el-date-picker
+                    v-model="markerForm.fromValue"
+                    type="date"
+                    style="width: 150px;"
+                    placeholder="选择日期"
+                    :clearable="false"
+                    value-format="yyyy-MM-dd"
+                  ></el-date-picker>
+                  至
+                  <el-date-picker
+                    v-model="markerForm.toValue"
+                    type="date"
+                    style="width: 150px;"
+                    placeholder="选择日期"
+                    :clearable="false"
+                    value-format="yyyy-MM-dd"
+                  ></el-date-picker>
+                </div>
+
+                <div v-else>
+                  <el-input
+                    v-model="markerForm.fromValue"
+                    class="number-input"
+                    style="width: 90px;"
+                    type="number"
+                    placeholder="输入数字"
+                  />
+                  至
+                  <el-input
+                    v-model="markerForm.toValue"
+                    class="number-input"
+                    style="width: 90px;"
+                    type="number"
+                    placeholder="输入数字"
+                  />
+
+                </div>
+              </template>
+
+              <!-- 柱形图，散点，截面散点只可选数字 -->
+              <div v-else-if="[5,7,10].includes(chartInfo.ChartType)">
+                <el-input
+                  v-model="markerForm.fromValue"
+                  class="number-input"
+                  style="width: 90px;"
+                  type="number"
+                  placeholder="输入数字"
+                />
+                至
+                <el-input
+                  v-model="markerForm.toValue"
+                  class="number-input"
+                  style="width: 90px;"
+                  type="number"
+                  placeholder="输入数字"
+                />
+
+              </div>
             </template>
+            
           </el-form-item>
-          <el-form-item label="线型" prop="dashStyle">
+          <el-form-item label="线型" prop="dashStyle" v-if="form.markerType==='line'">
             <el-select 
               v-model="markerForm.dashStyle"
               style="width:200px;"
@@ -92,7 +161,7 @@
               style="width: 90px"
             />
           </el-form-item>
-          <el-form-item label="粗细" prop="lineWidth">
+          <el-form-item label="粗细" prop="lineWidth" v-if="form.markerType==='line'">
             <el-input
               v-model="markerForm.lineWidth"
               style="width: 90px"
@@ -107,9 +176,9 @@
               placeholder="请输入内容"
             />
           </el-form-item>
-          <el-form-item label="文本位置" prop="textPostion">
+          <el-form-item label="文本位置" prop="textPosition">
             <el-select 
-              v-model="markerForm.textPostion"
+              v-model="markerForm.textPosition"
               style="width:200px;"
             >
               <el-option 
@@ -131,6 +200,7 @@
           <el-form-item label="文本字号" prop="textFontSize">
             <el-input
               v-model="markerForm.textFontSize"
+              class="number-input"
               style="width: 90px"
               type="number"
               :min="1"
@@ -171,12 +241,37 @@ export default {
   watch: {
     isShow(nval) {
       if(!nval) return
+
+      if(this.form.editIndex) { //表单回显
+        this.editIndex = this.form.editIndex;
+        this.markerForm = {
+          ...this.form.data
+        }
+      }else {
+        this.editIndex = 0;
+        
+        this.markerForm = {
+          axis: this.canSelectLeftYaxis?1:0,
+          axisName:this.axisLabelMap[this.markerForm.axis],
+          value: '',
+          from: '',
+          to:'',
+          lineWidth: 2,
+          dashStyle: 'ShortDashDot',
+          color: '#999',
+          text: '',
+          textPosition: 'top',
+          textColor: '#999',
+          textFontSize: 12,
+          isShow: true,
+        }
+      }
     }
   },
   computed: {
      /* 是否可选左轴
       季节图 柱形图 散点图 截面散点固定左轴*/
-    canSelectYaxis() {
+    canSelectLeftYaxis() {
       let isHave = false;
       if([2,5,7,10].includes(this.chartInfo.ChartType)){
         isHave=true
@@ -202,22 +297,28 @@ export default {
     return {
       predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝，红 默认颜色,
       verticalPositions,
+      editIndex: 0,
       markerForm: {
-        axis:1,
-        value: '',
-        lineWidth: 1,
+        axis: 1,
+        axisName: '',
+        isShow: true,
+        value: '',//线用
+        fromValue: '',//区用
+        toValue:'',//区用
+        lineWidth: 2,
         dashStyle: 'ShortDashDot',
         color: '#999',
         text: '',
-        textPostion: 'top',
-        textColor: defaultOpts.colors[0],
+        textPosition: 'top',
+        textColor: '#999',
         textFontSize: 12
       },
 
-      formRules: {
-        value:[
-					{ required: true, message: '标识刻度不能为空', trigger: 'blur' },
-				],
+      axisLabelMap: { //暂时没有横轴的代表key 规定为3好了
+        1: '左轴',
+        0: '右轴',
+        2: '右二轴',
+        3: '横轴',
       },
 
       dashOptions: [
@@ -232,18 +333,28 @@ export default {
   },
   methods:{
 
-    initData() {
+    async saveMarker() {
 
-    },
+      if(this.form.markerType==='line'&&!this.markerForm.value) return this.$message.warning('标识线所在刻度不能为空')
 
-    async saveMarker() {
-      await this.$refs.formRef.validate()
+      else if(this.form.markerType==='area'&&(!this.markerForm.fromValue||!this.markerForm.toValue)) return this.$message.warning('标识区所在范围不能为空')
+      
+      else if(this.form.markerType==='area'&&this.markerForm.fromValue===this.markerForm.toValue) return this.$message.warning('标识区所在范围不能相同')
+
+      
+      let item = _.cloneDeep(this.markerForm)
+      
+      this.editIndex 
+        ? this.$emit('edit',{
+            index: this.editIndex,
+            item
+          }) 
+        : this.$emit('add',item)
 
-      this.$emit('save')
+      this.cancelHandle()
     },
    
     cancelHandle() {
-      this.$refs.formRef.resetFields();
       this.$emit('update:isShow',false)
     }
   },
@@ -262,5 +373,6 @@ export default {
 <style lang="scss">
 .marker-edit-dialog {
   .el-color-picker__trigger { width: 100%;padding: 0;border-radius: 4px; }
+  .number-input .el-input__inner { padding: 0 2px 0 10px; }
 }
 </style>

src/views/dataEntry_manage/components/chart.vue

@@ -54,55 +54,46 @@ export default {
 	methods: {
 
 		init() {
-			// if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
-			// 	this.$nextTick(()=>{
-			// 		// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
-			// 		// console.log(h)
-			// 		// this.options.xAxis.offset=-h/2;
-			// 		const h=$(`#container${this.index}`)[0].style.height
-			// 		if(h=='500px'){
-			// 			this.options.xAxis.offset=-200.5
-			// 		}else if(h=='440px'){
-			// 			this.options.xAxis.offset=-170.5
-			// 		}else if(h=='350px'){
-			// 			this.options.xAxis.offset=-125.5
-			// 		}
-			// 	})
-			// }
+			/* eta1.4.1增加了主题色
+			仍然以defaultOpts为最底层配置 外层配置在这里统一设置了如legend chart背景色
+			x轴y轴系列等样式还是需要在具体的options中单独设置 */
 
-			const options = {...defaultOpts,...this.options}
+			let themeOptions = this.setThemeOptions();
+			const options = {...defaultOpts,...themeOptions,...this.options}
+			
 			let thatThis = this
-			//stock不支持线形图只支持时间图 画散点图用原始chart
+			//stock不支持线形图只支持时间图 部分图用原始chart
 			let is_linear = this.options.series 
-				? this.options.series.every(_ => _.type === 'scatter' ) || this.options.series.some(_ => _.chartType === 'linear'  )
+				? this.options.series.some(_ => _.chartType === 'linear')
 				: false ;
 
 			Highcharts.setOptions({ global: { useUTC: false } });
-			this.chart = is_linear ? 
-			Highcharts.chart(`container${this.index}`, options,function(chart) {
-				let {yAxis,xAxis} = chart
-				yAxis.map(item => {
-					if(item.axisTitle){
-						// 绑定竖轴标题的点击事件
-						Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickYAxisTitle)
-					}
-				})
-				xAxis.map(item => {
-					if(item.axisTitle){
-						// 绑定横轴标题的点击事件
-						Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickXAxisTitle)
-					}
-				})
-			}) 
-			: Highcharts.stockChart(`container${this.index}`,options,function(chart) {
-				let {yAxis} = chart
-				yAxis.map((item,index) => {
-					if(item.axisTitle){
-						// 绑定竖轴标题的点击事件
-						Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickYAxisTitle)
-					}
-				})
-			});
+			this.chart = is_linear 
+				? Highcharts.chart(`container${this.index}`, options,function(chart) {
+					let {yAxis,xAxis} = chart
+					yAxis.map(item => {
+						if(item.axisTitle){
+							// 绑定竖轴标题的点击事件
+							Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickYAxisTitle)
+						}
+					})
+					xAxis.map(item => {
+						if(item.axisTitle){
+							// 绑定横轴标题的点击事件
+							Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickXAxisTitle)
+						}
+					})
+				}) 
+				: Highcharts.stockChart(`container${this.index}`,options,function(chart) {
+					let {yAxis} = chart
+					yAxis.map((item,index) => {
+						if(item.axisTitle){
+							// 绑定竖轴标题的点击事件
+							Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickYAxisTitle)
+						}
+					})
+				});
+
 			let that = this;
       if(!$('#right')[0]) return
 			erd.listenTo($('#right')[0], function (element) { //执行监听 
@@ -115,11 +106,31 @@ export default {
 		clickYAxisTitle(){
 			this.$emit('clickYAxisTitle')
 		},
+
 		// 点击X轴标题监听事件  散点图
 		clickXAxisTitle(){
 			// 目前点击Y轴标题和X轴都是同一个方法 所以直接派发跟Y轴点击的方法
 			this.$emit('clickYAxisTitle')
 		},
+
+		//主题色一些外层公用配置  目前只有绘图区和legend和colors
+		setThemeOptions() {
+			if(!this.$parent.chartInfo||!this.$parent.chartInfo.ChartThemeStyle) return {}
+
+			let chartTheme = JSON.parse(this.$parent.chartInfo.ChartThemeStyle) 		
+			return {
+				legend: {
+					...defaultOpts.legend,
+					...chartTheme.legendOptions
+				},
+				chart: {
+					...defaultOpts.chart,
+					...chartTheme.drawOption
+				},
+				colors: chartTheme.colorsOptions
+			}
+		},
+
 		initHeight() {
 			/* 1550以下 */
 			if($(window).width() <= 1710) {

src/views/dataEntry_manage/components/insertData.vue

@@ -138,6 +138,7 @@ export default {
     },
     // 上传成功之后
     handleSuccess(result) {
+      console.log(result)
       let res = this.$parseData(result);
       if (res.Ret === 200) {
         // 0成功 1部分失败 -1全部失败

src/views/dataEntry_manage/components/markersSection.vue

@@ -2,13 +2,13 @@
   <div class="chart-markers-section">
     <!-- 标示线 -->
     <div class="section-item">
-      <ul class="marker-list">
+      <ul class="marker-list"  v-if="markerLinesArr.length">
         <li class="marker-item" v-for="(item,index) in markerLinesArr" :key="index">
           <span>{{item.axisName}}: {{item.value}}</span>
-          <div>
-            <i class="el-icon-view icon"/>
-            <i class="el-icon-edit icon" style="margin:0 6px"/>
-            <i class="el-icon-delete icon" @click="markerLinesArr.splice(index,1)"/>
+          <div style="flex-shrink:0">
+            <i class="el-icon-view icon" :style="item.isShow?'color:#0052D9':'color:#999'" @click="item.isShow=!item.isShow;updateChartHandle()"/>
+            <i class="el-icon-edit icon" style="margin:0 6px" @click="openMarkerDiaHandle('line',index+1)"/>
+            <i class="el-icon-delete icon" @click="markerLinesArr.splice(index,1);updateChartHandle()"/>
           </div>
         </li>
       </ul>
@@ -29,13 +29,13 @@
 
     <!-- 标识区 -->
     <div class="section-item">
-      <ul class="marker-list">
+      <ul class="marker-list" v-if="markerAreasArr.length">
         <li class="marker-item" v-for="(item,index) in markerAreasArr" :key="index">
-          <span>{{item.axisName}}: {{item.value}}</span>
-          <div>
-            <i class="el-icon-view icon"/>
-            <i class="el-icon-edit icon" style="margin:0 6px"/>
-            <i class="el-icon-delete icon" @click="markerAreasArr.splice(index,1)"/>
+          <span>{{item.axisName}}: {{`${item.fromValue}至${item.toValue}`}}</span>
+          <div style="flex-shrink:0">
+            <i class="el-icon-view icon" :style="item.isShow?'color:#0052D9':'color:#999'" @click="item.isShow=!item.isShow;updateChartHandle()"/>
+            <i class="el-icon-edit icon" style="margin:0 6px" @click="openMarkerDiaHandle('area',index+1)"/>
+            <i class="el-icon-delete icon" @click="markerAreasArr.splice(index,1);updateChartHandle()"/>
           </div>
         </li>
       </ul>
@@ -90,6 +90,8 @@
         rightIndex: $parent.rightIndex,
         rightTwoIndex: $parent.rightTwoIndex
       }"
+      @add="addMarkerItem"
+      @edit="editMarkerItem"
     />
 
     <!-- 图表说明弹窗 -->
@@ -143,34 +145,8 @@ export default {
   components: { addMarkerDialog,mDialog },
   data() {
     return {
-      markerLinesArr: [
-        {
-          axis:1,
-          axisName: '左轴',
-          value: '50',
-          lineWidth: 1,
-          dashStyle: 'Solid',
-          color: '',
-          text: '',
-          textPostion: 'top',
-          textColor: '',
-          textFontSize: 12
-        }
-      ],
-      markerAreasArr: [
-        {
-          axis:1,
-          axisName: '左轴',
-          value: '50至100',
-          lineWidth: 1,
-          dashStyle: 'Solid',
-          color: '',
-          text: '',
-          textPostion: 'top',
-          textColor: '',
-          textFontSize: 12
-        }
-      ],
+      markerLinesArr: [],
+      markerAreasArr: [],
       chartInstruction:{
         text: '图表说明的货物带回去无地黄丸酒店',
         color: '#f00',
@@ -180,7 +156,8 @@ export default {
       /* 标识线区弹窗 */
       isOpenMarkerDialog: false,
       markerForm: {
-        markerType: 'line'
+        markerType: 'line',
+        title:''
       },
 
       /* 图表说明弹窗 */
@@ -194,14 +171,44 @@ export default {
   },
   methods:{
     /* 打开弹窗 */
-    openMarkerDiaHandle(markerType) {
+    openMarkerDiaHandle(markerType,index=null) {
       this.isOpenMarkerDialog = true
-      this.markerForm = {
-        markerType,
-        title: `添加标识${markerType==='line'?'线':'区'}`
+      if(index) { //编辑
+        let editItem = markerType==='line' ? this.markerLinesArr[index-1] : this.markerAreasArr[index-1];
+
+        this.markerForm = {
+          markerType,
+          editIndex: index,
+          title: `编辑标识${markerType==='line'?'线':'区'}`,
+          data: editItem
+        }
+      }else {
+        this.markerForm = {
+          markerType,
+          title: `添加标识${markerType==='line'?'线':'区'}`
+        }
+        
       }
     },
 
+    /* 添加标识线/区 */
+    addMarkerItem(item) {
+      this.markerForm.markerType==='line' 
+        ? this.markerLinesArr.push(item)
+        : this.markerAreasArr.push(item)
+
+      this.updateChartHandle()
+    },
+
+    /* 编辑标识线/区 */
+    editMarkerItem({index,item}) {
+      this.markerForm.markerType==='line'
+        ? this.markerLinesArr[index-1] = item
+        : this.markerAreasArr[index-1] = item
+
+      this.updateChartHandle()
+    },
+
     addChartInductionHandle() {
       const { text,color,fontSize } = this.chartInstruction;
       this.chartinductionDiaForm = {
@@ -212,6 +219,15 @@ export default {
       }
     },
 
+    //更新图表标识区/线/说明
+    updateChartHandle() {
+      this.$emit('update',{
+        markerLinesArr: this.markerLinesArr,
+        markerAreasArr: this.markerAreasArr,
+        chartInstruction: this.chartInstruction
+      })
+    },
+
     initData() {
 
     }
@@ -233,7 +249,7 @@ export default {
         padding: 12px 15px;
       }
     }
-    .icon {font-size: 16px;cursor: pointer;}
+    .icon {font-size: 18px;cursor: pointer;}
     .el-icon-delete{
       color: #f00;
     }

src/views/dataEntry_manage/databaseComponents/chartTrendRender.vue

@@ -60,7 +60,7 @@
 		</div>
 		<div class="min-wrapper">
 			<div class="chartWrapper" id="chartWrapper" v-if="showChart">
-				<Chart :options="options" ref="chartRef" @clickYAxisTitle="clickYAxisTitle"/>
+				<Chart :options="options" ref="chartRef"/>
 				<div class="range-cont left" v-if="leftIndex != -1">
 					<el-input
 						style="width: 80px; display: block"

src/views/dataEntry_manage/databaseComponents/createChart.vue

@@ -50,7 +50,7 @@
 		</div>
 		<div class="min-wrapper">
 			<div class="chartWrapper" id="chartWrapper" v-if="showChart">
-				<Chart :options="options" ref="chartRef" @clickYAxisTitle="clickYAxisTitle" />
+				<Chart :options="options" ref="chartRef"/>
 				<div class="range-cont left" v-if="leftIndex != -1">
 					<el-input
 						style="width: 80px; display: block"

src/views/dataEntry_manage/editChart.vue

@@ -489,7 +489,7 @@
 							<div class="chart-source">
 								<span>数据来源:{{chartInfo.SourcesFrom}}</span>
 								<el-switch
-									v-model="chartInfo.SourcesFromDisabled"
+									v-model="chartInfo.SourcesFromVisible"
 									:active-value="1"
 									:inactive-value="0"
 									style="margin:0 15px;"

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -15,8 +15,12 @@ export default {
 				ChartName: '',
 				Theme: '',
 				SourcesFrom: 'wind,ths',
-				SourcesFromDisabled: 1,
-				Instructions: '图标说明是的货物以带回去五个一给我倭寇的贫困我的卡我极为强劲的的我吉庆街得我'
+				SourcesFromVisible: 1,
+				Instructions: '图标说明是的货物以带回去五个一给我倭寇的贫困我的卡我极为强劲的的我吉庆街得我',
+				InstructionsVisible: 1,
+				MarkersLines: [], //标识线
+				MarkersAreas: [],//标识区
+				ChartThemeStyle:'',//主题样式
 			},
 			chartRules: {
 				ChartType:[
@@ -386,11 +390,6 @@ export default {
 			this.getPreviewSplineInfo();
 		},
 
-			/* 季节图切换年份  保持当前配置 */
-		// seasonYearChange() {
-		// 	this.getPreviewSplineInfo();
-		// },
-
 		/* 切换图重置状态 */
 		initStatus() {
 			this.year_select = this.chartInfo.ChartType === 2?20:3;
@@ -483,6 +482,9 @@ export default {
 				let index = this.tableData.findIndex(obj => obj.EdbInfoId === item.EdbInfoId);
 				this.tableData.splice(index, 1);
 				this.$message.success('删除成功')
+
+				//添加图表时重置默认样式
+				this.$route.path==='/addchart' && this.resetChartEdbDefault();
 			}
 		},
 
@@ -701,6 +703,26 @@ export default {
 				this.getPreviewSplineInfo()
 				this.legendEditDiaShow=false
 			}
+		},
+
+		/* 添加图表页删除指标重置样式 */
+		resetChartEdbDefault() {
+			this.tableData.forEach((item,index) => {
+				item.ChartColor = defaultOpts.colors[index];
+				item.PredictChartColor = defaultOpts.colors[index];
+				item.ChartStyle = item.ChartStyle || 'spline';
+				item.isAxis = item.isAxis||1;
+
+				this.tableData[index].ChartWidth = index === 0 ? 3 : 1;
+			})
+		},
+
+		/* 更新图表标识区，标识线，图表说明 */
+		setChartMarkerInfo({ markerLinesArr,markerAreasArr,chartInstruction }) {
+			this.chartInfo.MarkersLines = markerLinesArr;
+			this.chartInfo.MarkersAreas = markerAreasArr;
+
+			this.setChartOptionHandle(this.tableData)
 		}
 	}
 }

src/views/dataEntry_manage/mixins/chartPublic.js

@@ -570,10 +570,12 @@ export const chartSetMixin = {
         this.rightTwoIndex = newval.findIndex((item) => item.IsAxis ===2);
       }
 
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //拼接标题 数据列
       let data = [];
       let ydata = [];
-      // let chartData =  _.cloneDeep(newval);
       //有右二轴时排个序 按照左 右 右2的顺序
       let chartData = newval.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(newval) : _.cloneDeep(newval);
 
@@ -591,8 +593,9 @@ export const chartSetMixin = {
             textCh:item.Unit, // 中文
             // 中文不存在，无论英文有无都显示空
             textEn:item.UnitEn||item.Unit, // 英文
-            style:{},
-            styleEn:{}, // 英文样式
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
             align: 'high',
             rotation: 0,
             y: -15,
@@ -605,16 +608,19 @@ export const chartSetMixin = {
               return ctx.value;
             },
             align: 'center',
-            x: [0,2].includes(item.IsAxis) ? 5 : -5
+            x: [0,2].includes(item.IsAxis) ? 5 : -5,
+            style: {
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            }
           },
           opposite: [0,2].includes(item.IsAxis),
           reversed: item.IsOrder,
-          // // min: Number(chartData[sameSideIndex].MinData),
-          // // max: Number(chartData[sameSideIndex].MaxData),
           min: Number(item.MinData),
           max: Number(item.MaxData),
           tickWidth: 1,
-          visible: sameSideIndex === index
+          visible: sameSideIndex === index,
+          plotBands: this.setAxisPlotAreas(item.IsAxis),
+          plotLines: this.setAxisPlotLines(item.IsAxis)
         };
 
         //拼接标题 判断相同指标名称拼接来源
@@ -634,6 +640,7 @@ export const chartSetMixin = {
         let obj = {
           data: [],
           type: 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: sameSideIndex,
           name:
             dynamic_arr.length > 1
@@ -666,7 +673,12 @@ export const chartSetMixin = {
               ? Highcharts.dateFormat('%m/%d', ctx.value)
               : Highcharts.dateFormat('%y/%m', ctx.value);
           },
-        }
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        plotBands: this.setAxisPlotAreas(3,'datetime'),
+        plotLines: this.setAxisPlotLines(3,'datetime')
       }
 
       this.options = {
@@ -675,8 +687,6 @@ export const chartSetMixin = {
         xAxis
       };
 
-      console.log(this.options)
-
       //滚动相关性独立tooltip
       if(this.chartInfo.Source === 4) {
         const { LeadValue,LeadUnit } = this.relevanceChartData.CorrelationChartInfo;
@@ -713,10 +723,12 @@ export const chartSetMixin = {
       };
       let chartStyle = chartTypeMap[this.chartInfo.ChartType];
 
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //拼接标题 数据列
       let data = [];
       let ydata = [];
-      // let chartData =  _.cloneDeep(newval);
       //有右二轴时排个序 按照左 右 右2的顺序
       let chartData = newval.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(newval) : _.cloneDeep(newval);
 
@@ -754,13 +766,13 @@ export const chartSetMixin = {
         let yItem = {
           ...basicYAxis,
           title: {
-            // text: sameSideIndex !== index ? '' : `${item.Unit}`,
             text: item.Unit,
             textCh:item.Unit, // 中文
             // 中文不存在，无论英文有无都显示空
             textEn:item.UnitEn||item.Unit, // 英文
-            style:{},
-            styleEn:{}, // 英文样式
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
             align: 'high',
             rotation: 0,
             y: -15,
@@ -770,19 +782,22 @@ export const chartSetMixin = {
           },
           labels: {
             formatter: function (ctx) {
-              // return sameSideIndex !== index ? '' : ctx.value;
               return ctx.value;
             },
             align: 'center',
-            x: [0,2].includes(item.IsAxis) ? 5 : -5
+            x: [0,2].includes(item.IsAxis) ? 5 : -5,
+            style: {
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            }
           },
           opposite: [0,2].includes(item.IsAxis),
           reversed: item.IsOrder,
           min: Number(chartData[sameSideIndex].MinData),
           max: Number(chartData[sameSideIndex].MaxData),
-          // tickWidth: sameSideIndex !== index ? 0 : 1,
           tickWidth: 1,
-          visible: serie_yIndex === index && sameSideIndex ===index
+          visible: serie_yIndex === index && sameSideIndex ===index,
+          plotBands: this.setAxisPlotAreas(item.IsAxis),
+          plotLines: this.setAxisPlotLines(item.IsAxis)
         };
 
         //拼接标题 判断相同指标名称拼接来源
@@ -837,7 +852,12 @@ export const chartSetMixin = {
               ? Highcharts.dateFormat('%m/%d', ctx.value)
               : Highcharts.dateFormat('%y/%m', ctx.value);
           },
-        }
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        plotBands: this.setAxisPlotAreas(3,'datetime'),
+        plotLines: this.setAxisPlotLines(3,'datetime')
       }
       
       this.options = {
@@ -864,6 +884,8 @@ export const chartSetMixin = {
                             this.isPredictorChart?chartData.DataList.List.filter((item, index) => index > 0):
                             chartData.DataList.filter((item, index) => index > 0):
                             chartData.DataList
+       /* 主题样式*/
+       const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
 
       let seasonYdata = [],
         seasonData = [];
@@ -876,8 +898,10 @@ export const chartSetMixin = {
         let serie_item = {
           data: [],
           type: chartData.ChartStyle,
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: this.isPredictorChart?j.Year:j.ChartLegend,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 2,
           ...predict_params
         };
         const data_array = this.calendar_type === '农历' && this.isPredictorChart?_.cloneDeep(j.Items):_.cloneDeep(j.DataList);
@@ -896,14 +920,18 @@ export const chartSetMixin = {
             return val;
           },
           align: 'center',
+          style: {
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          }
         },
         title: {
           text:  `${chartData.Unit}`,
           textCh:chartData.Unit, // 中文
           // 中文不存在，无论英文有无都显示空
           textEn:chartData.UnitEn||chartData.Unit, // 英文
-          style:{},
-          styleEn:{}, // 英文样式
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
           // text:  null,
           align: 'high',
           rotation: 0,
@@ -914,14 +942,24 @@ export const chartSetMixin = {
         },
         max: Number(chartData.MaxData),
         min: Number(chartData.MinData),
+        plotBands: this.setAxisPlotAreas(1),
+        plotLines: this.setAxisPlotLines(1)
       }];
 
-      /* x轴显示月日  提示框显示月日*/
-      defaultOpts.xAxis.labels = {
-        formatter: function () {
-          return Highcharts.dateFormat('%m/%d', this.value);
+      /* x轴显示月日 */
+      const xAxis = {
+        ...defaultOpts.xAxis,
+        labels: {
+          formatter: function () {
+            return Highcharts.dateFormat('%m/%d', this.value);
+          },
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
-      };
+        plotBands: this.setAxisPlotAreas(3,'datetime'),
+        plotLines: this.setAxisPlotLines(3,'datetime')
+      }
       
       const tooltip = {
         ...defaultOpts.tooltip,
@@ -938,6 +976,7 @@ export const chartSetMixin = {
         colors:seasonOptions.colors.slice(-chartDataHandle.length),
         series: seasonData,
         yAxis: seasonYdata,
+        xAxis,
         tooltip
       };
       if(this.currentLang=='en') this.changeOptions()
@@ -955,6 +994,9 @@ export const chartSetMixin = {
       };
       console.log('===========:',this.isSetExtremeValue)
 
+      /* 主题样式*/
+       const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       // 取2个指标中日期相同的数据
       let real_data = [];
       let tmpData_date = {};//用来取点对应的日期
@@ -1027,12 +1069,15 @@ export const chartSetMixin = {
           textCh:newval[1].Unit,// 中文
           // 中文不存在，无论英文有无都显示空
           textEn:newval[1].UnitEn||newval[1].Unit, // 英文
-          style:{},
-          styleEn:{}, // 英文样式
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: -(12 * newval[1].Unit.length),
+          x:0,
+          textAlign: 'left',
+          reserveSpace: false
         },
         labels: {
           formatter: function (ctx) {
@@ -1040,12 +1085,42 @@ export const chartSetMixin = {
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         opposite: false,
         reversed: IsOrder,
         min: Number(newval[0].MinData),
         max: Number(newval[0].MaxData),
         tickWidth: 1,
+        plotBands: this.setAxisPlotAreas(1),
+        plotLines: this.setAxisPlotLines(1)
+      }
+
+      //x轴
+      const xAxis = {
+        ...scatterXAxis,
+        title: {
+          text:  `${newval[0].Unit}`,
+          textCh:newval[0].Unit, // 中文
+          // 中文不存在，无论英文有无都显示空
+          textEn:newval[0].UnitEn||newval[0].Unit, // 英文
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          },
+          align: 'high',
+          rotation: 0,
+          x: 0,
+          offset: 20,
+        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        plotBands: this.setAxisPlotAreas(3),
+        plotLines: this.setAxisPlotLines(3)
       }
 
       //数据列
@@ -1056,7 +1131,10 @@ export const chartSetMixin = {
         nameCh: `${this.chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
         nameEn: `${this.chartInfo.ChartNameEn||this.chartInfo.ChartName}${IsOrder ? '(reverse)' : ''}`,
         color: ChartColor,
-        lineWidth: 0
+        chartType: 'linear',
+        marker: {
+          radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+        },
       }
       real_data.forEach(_ => {
         series.data.push([_.x,_.y])
@@ -1068,22 +1146,7 @@ export const chartSetMixin = {
         },
         series: [ series ],
         yAxis,
-        xAxis: {
-          ...scatterXAxis,
-          title: {
-            text:  `${newval[0].Unit}`,
-            textCh:newval[0].Unit, // 中文
-            // 中文不存在，无论英文有无都显示空
-            textEn:newval[0].UnitEn||newval[0].Unit, // 英文
-            style:{},
-            styleEn:{}, // 英文样式
-            // text:  null,
-            align: 'high',
-            rotation: 0,
-            x: 0,
-            offset: 20,
-          },
-        },
+        xAxis,
         tooltip
       }
       if(this.currentLang=='en') this.changeOptions()
@@ -1096,18 +1159,19 @@ export const chartSetMixin = {
       let seriesData = [];
       const data = _.cloneDeep(this.barDateList);
 
+       /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //x轴
       let xAxis = {
         ...scatterXAxis,
         categories: this.barXData,
         tickWidth: 1,
-        title: {
-          text:  ``,
-          align: 'high',
-          rotation: 0,
-          x: 0,
-          offset: 20,
-        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        }
       }
 
       const { max,min } = this.chartLimit;
@@ -1122,7 +1186,12 @@ export const chartSetMixin = {
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          x:0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx) {
@@ -1130,11 +1199,16 @@ export const chartSetMixin = {
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         min: Number(min),
         max: Number(max),
         opposite: false,
         tickWidth: 1,
+        plotBands: this.setAxisPlotAreas(1),
+        plotLines: this.setAxisPlotLines(1)
       }
 
       //数据列
@@ -1178,18 +1252,19 @@ export const chartSetMixin = {
       let seriesData = [];
       const data = _.cloneDeep(this.commodityChartData);
 
+       /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //x轴
       let xAxis = {
         ...scatterXAxis,
         categories: this.commodityXData.map(_ =>_.Name),
         tickWidth: 1,
-        title: {
-          text:  ``,
-          align: 'high',
-          rotation: 0,
-          x: 0,
-          offset: 20,
-        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        }
       }
 
       const { max,min } = this.chartLimit;
@@ -1200,10 +1275,14 @@ export const chartSetMixin = {
           text:  this.commodityEdbList[0].Unit,
           textCh:  this.commodityEdbList[0].Unit,
           textEn:  this.commodityEdbList[0].UnitEn||this.commodityEdbList[0].Unit,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          textAlign: 'left',
+          reserveSpace: false
         },
         labels: {
           formatter: function (ctx) {
@@ -1211,6 +1290,9 @@ export const chartSetMixin = {
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         min: Number(min),
         max: Number(max),
@@ -1227,6 +1309,7 @@ export const chartSetMixin = {
         let serie_item = {
           data: filterData,
           type: 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: item.Name,
           nameCh: item.Name,
@@ -1398,6 +1481,10 @@ export const chartSetMixin = {
       this.leftIndex = -1;
       this.rightIndex = -1;
       this.rightTwoIndex = -1;
+
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       // 处理X轴
       let xAxis={
         categories: this.relevanceChartData.XEdbIdValue,
@@ -1408,9 +1495,14 @@ export const chartSetMixin = {
           textEn:this.relevanceChartData.ChartInfo.Source===3 ? `stage（${this.relevanceUnitEnMap[this.relevanceChartData.CorrelationChartInfo.LeadUnit]}）`:null,
           align: 'high',
           rotation: 0,
-          x: 0,
-          y:10,
-          offset: 20
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
         tickInterval: 1,
         offset:0,
@@ -1427,7 +1519,11 @@ export const chartSetMixin = {
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx) {
@@ -1435,12 +1531,12 @@ export const chartSetMixin = {
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
-        // min: -1,
-        // max: 1,
         opposite: false,
         tickWidth: 1,
-        // tickInterval:0.2,
       }
 
       //处理series
@@ -1449,6 +1545,7 @@ export const chartSetMixin = {
         let serie_item = {
           data: item.Value,
           type: 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: item.Name,
           nameCh: item.Name,
@@ -1515,6 +1612,9 @@ export const chartSetMixin = {
       const { DataList,XName,XNameEn,YName,YNameEn } = this.sectionScatterData;
       const { min,max,x_min,x_max }  = this.chartLimit;
 
+       /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //y轴
       let yAxis = {
         ...basicYAxis,
@@ -1522,15 +1622,23 @@ export const chartSetMixin = {
           text: YName,
           textCh:YName,// 中文
           textEn:YNameEn||YName,
-          style:{},
-          styleEn:{},
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
           align: 'middle',
         },
+        labels: {
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
+        },
         opposite: false,
         reversed: false,
         min: Number(min),
         max: Number(max),
         tickWidth: 1,
+        plotBands: this.setAxisPlotAreas(1),
+        plotLines: this.setAxisPlotLines(1)
       }
 
       //x轴
@@ -1540,12 +1648,20 @@ export const chartSetMixin = {
           text: XName,
           textCh:XName,// 中文
           textEn:XNameEn || XName,
-          style:{},
-          styleEn:{},
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          },
           align: 'middle',
         },
+        labels: {
+          style:{
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          },
+        },
         min: Number(x_min),
         max: Number(x_max),
+        plotBands: this.setAxisPlotAreas(3),
+        plotLines: this.setAxisPlotLines(3)
       }
 
       //数据列
@@ -1559,9 +1675,11 @@ export const chartSetMixin = {
           nameCh: item.Name,
           nameEn: item.NameEn||item.Name,
           color: item.Color,
-          lineWidth: 0,
           chartType: 'linear',
-          zIndex:1
+          zIndex:1,
+          marker: {
+            radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+          },
         }
         item.EdbInfoList.forEach(_ => {
           series_item.data.push({
@@ -1683,17 +1801,18 @@ export const chartSetMixin = {
       this.rightIndex = -1;
       this.rightTwoIndex = -1;
 
+        /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       const { DataList,LeftMaxValue,LeftMinValue,RightMaxValue,RightMinValue } = this.statisticFrequencyData;
       
       let xAxis = {
         ...scatterXAxis,
         tickWidth: 1,
-        title: {
-          text:  ``,
-          align: 'high',
-          rotation: 0,
-          x: 0,
-          offset: 20,
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         }
       }
 
@@ -1709,7 +1828,15 @@ export const chartSetMixin = {
             align: 'high',
             rotation: 0,
             y: -15,
-            offset: 0,
+            reserveSpace: false,
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
+          },
+          labels: {
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
           },
           opposite: item.IsAxis===1?false:true,
           min: index===0? Number(LeftMinValue):Number(RightMinValue),
@@ -1719,6 +1846,7 @@ export const chartSetMixin = {
 
         let series_item = {
           data: item.Value.map(_ =>[_.X,_.Y]),
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           type: 'spline',
           yAxis: index,
           name: item.Name,
@@ -1767,6 +1895,9 @@ export const chartSetMixin = {
       this.rightIndex = -1;
       this.rightTwoIndex = -1;
       
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       const { min,max,x_min,x_max }  = this.chartLimit;
 
       const { DataList,XName,YName,XNameEn,YNameEn } = this.crossVarietyChartData;
@@ -1779,6 +1910,14 @@ export const chartSetMixin = {
           textCh:YName,// 中文
           textEn:YNameEn||YName,
           align: 'middle',
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
         opposite: false,
         reversed: false,
@@ -1795,6 +1934,14 @@ export const chartSetMixin = {
           textCh:XName,// 中文
           textEn:XNameEn || XName,
           align: 'middle',
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
         min: Number(x_min),
         max: Number(x_max),
@@ -2188,6 +2335,7 @@ export const chartSetMixin = {
         sourceMap[this.chartInfo.Source]();
       }
     },
+
     // 设置 起始日期 和 最新日期
     setExtremumDate(){
       //过滤、排序 拿到起始日期
@@ -2201,6 +2349,63 @@ export const chartSetMixin = {
                                       .sort((a,b)=> new Date(b).getTime() - new Date(a).getTime())
       this.latestDate = endDateList[0]
       console.log(this.earliestDate,this.latestDate,'this.latestDate');
+    },
+
+    /* 处理轴的标识线结构 在指定轴位置上拼接标识线 
+      0：右轴 1：左轴 2：右2轴 x轴固定3
+      axisType表示x轴类型 处理时间轴的值 datetime/null 
+    */
+    setAxisPlotLines(axis,axisType=null) {
+      const { MarkersLines } = this.chartInfo;
+      if(!MarkersLines) return []
+      let arr = MarkersLines.filter(_ => _.isShow&&_.axis===axis)
+      let plotLines = arr.map(_ => {
+        //是否是x时间轴
+        let isXDateAxis = axis===3&&axisType==='datetime'
+        return { 
+          value: isXDateAxis ? new Date(_.value).getTime() : Number(_.value),
+          dashStyle: _.dashStyle,
+          width: Number(_.lineWidth),
+          color: _.color,
+          label: {
+            text: _.text||'',
+            verticalAlign: _.textPosition,
+            style: {
+              color: _.textColor,
+              fontSize: _.textFontSize
+            }
+          }
+        }
+      })
+      console.log(plotLines)
+      return plotLines
+    },
+
+    /* 处理标识区拼接 axisType表示x轴类型处理时间轴的值 datetime/null */
+    setAxisPlotAreas(axis,axisType=null) {
+      const { MarkersAreas } = this.chartInfo;
+      if(!MarkersAreas) return []
+
+      let arr = MarkersAreas.filter(_ => _.isShow&&_.axis===axis)
+      let plotBands = arr.map(_ => {
+        //是否是x时间轴
+        let isXDateAxis = axis===3&&axisType==='datetime'
+        return { 
+          from: isXDateAxis ? new Date(_.fromValue).getTime() : Number(_.fromValue),
+          to: isXDateAxis ? new Date(_.toValue).getTime(): Number(_.toValue),
+          color: _.color,
+          label: {
+            text: _.text||'',
+            verticalAlign: _.textPosition,
+            style: {
+              color: _.textColor,
+              fontSize: _.textFontSize
+            }
+          }
+        }
+      })
+
+      return plotBands
     }
 	}
 }

src/views/ppt_manage/mixins/mixins.js

@@ -555,6 +555,7 @@ export default {
         name: `${this.chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
         nameCh:`${this.chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
         nameEn:this.chartInfo.ChartNameEn?`${this.chartInfo.ChartNameEn}${IsOrder ? '(reverse)' : ''}`:'',
+        chartType: 'linear',
         color: ChartColor,
         lineWidth: 0
       }

src/views/ppt_manage/mixins/pptMixins.js

@@ -454,7 +454,7 @@ export default {
      const isShowTitle = isShowPPTTitle(Source,MyChartType)
       this.$nextTick(() => {
         let is_linear = options.series 
-          ? options.series.every(_ => _.type === 'scatter' ) || options.series.some(_ => _.chartType === 'linear'  )
+          ? options.series.some(_ => _.chartType === 'linear')
           : false ;
         //title样式
         let titleHTML = null

src/views/ppt_manage/newVersion/components/catalog/pptContentOld.vue

@@ -160,7 +160,7 @@
 							backgroundColor: 'rgba(255, 255, 255, 0)',
 						}
 						let is_linear = this.options.series 
-							? this.options.series.every(_ => _.type === 'scatter' ) || this.options.series.some(_ => _.chartType === 'linear'  )
+							? this.options.series.some(_ => _.chartType === 'linear'  )
 							: false ;
 						let chart = is_linear ? Highcharts.chart('container'+item.resource_id, new_options) : Highcharts.stockChart('container'+item.resource_id, new_options);
 						const svg = chart.getSVG();

src/views/ppt_manage/pptdtl.vue

@@ -164,7 +164,7 @@
 							backgroundColor: 'rgba(255, 255, 255, 0)',
 						}
 						let is_linear = this.options.series 
-							? this.options.series.every(_ => _.type === 'scatter' ) || this.options.series.some(_ => _.chartType === 'linear'  )
+							? this.options.series.some(_ => _.chartType === 'linear')
 							: false ;
 						let chart = is_linear ? Highcharts.chart('container'+item.resource_id, new_options) : Highcharts.stockChart('container'+item.resource_id, new_options);
 	

src/views/system_manage/chartTheme/common/config.js

@@ -106,7 +106,10 @@ export const defaultETAOptions = {
     verticalAlign: 'top',
     itemStyle: {
       color: '#333',
-      fontSize: 12,
+      fontSize: 13,
+      cursor: "pointer",
+      fontWeight: "bold",
+      textOverflow: "ellipsis"
     }
   },
   titleOptions: {
@@ -117,30 +120,24 @@ export const defaultETAOptions = {
     }
   },
   markerOptions: {
-    labels: {
-      style: {
-        color: '#333',
-        fontSize: 14
-      }
+    style: {
+      color: '#333',
+      fontSize: 12
     }
   },
   xAxisOptions: {
-    labels: {
-      style: {
-        color: '#666',
-        fontSize: 11
-      }
+    style: {
+      color: '#666',
+      fontSize: 11
     }
   },
   yAxisOptions: {
-    labels: {
-      style: {
-        color: '#666',
-        fontSize: 11
-      }
+    style: {
+      color: '#333',
+      fontSize: 11
     }
   },
   drawOption: {
-    backgroundColor: 'transparent'
+    plotBackgroundColor: 'transparent'
   }
 }

src/views/system_manage/chartTheme/components/optionsSection.vue

@@ -162,7 +162,7 @@
                 <li class="option-item">
                   <label class="el-form-item__label">颜色</label>
                   <el-color-picker
-                    v-model="themeOptions[key].labels.style.color"
+                    v-model="themeOptions[key].style.color"
                     show-alpha
                     :predefine="predefineColors"
                     style="width: 90px"
@@ -171,7 +171,7 @@
                 <li class="option-item">
                   <label class="el-form-item__label">字号</label>
                   <el-input
-                    v-model="themeOptions[key].labels.style.fontSize"
+                    v-model="themeOptions[key].style.fontSize"
                     style="width: 90px"
                     type="number"
                     :min="1"
@@ -184,7 +184,7 @@
                 <li class="option-item">
                   <label class="el-form-item__label">背景色</label>
                   <el-color-picker
-                    v-model="themeOptions[key].backgroundColor"
+                    v-model="themeOptions[key].plotBackgroundColor"
                     show-alpha
                     :predefine="predefineColors"
                     style="width: 90px"
@@ -198,12 +198,17 @@
 </template>
 <script>
 import { defaultETAOptions,verticalPositions,predefineColors,lineStylesOpts,alignPositions } from '../common/config'
+import { seasonOptions } from '@/utils/defaultOptions';
 export default {
   props: {
     chartType: {
       type:Number
     }
   },
+  watch: {
+    chartType() {
+    }
+  },
   data() {
     return {
       predefineColors,
@@ -213,7 +218,7 @@ export default {
       themeOptions: {
         lineOptions: {
           dashStyle: defaultETAOptions.lineOptions.dashStyle,
-          colors: defaultETAOptions.colorsOptions,
+          colors: this.chartType===2?seasonOptions.colors:defaultETAOptions.colorsOptions,
           color: defaultETAOptions.colorsOptions[0],
           colorIndex:0,
           lineWidth: defaultETAOptions.lineOptions.lineWidth,