ppt主题样式同步

src/styles/global.scss

@@ -131,4 +131,27 @@ button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusri
     width:85vw;
     margin-top:6vh;
     margin-bottom: 0;
+}
+
+//图表底部来源和图表说明
+.chart-bottom-insruction-info {
+    margin-top: 10px;
+    display: flex;
+    gap: 0 20px;
+    .chart-source {
+        width: 30%;
+        min-width: 150px;
+    }
+
+    .calendar-cont {
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+        flex-shrink: 0;
+    }
+
+    .chart-instruction {
+        flex: 1;
+        text-align: right;
+    }
 }

src/views/chartRelevance_manage/crossVarietyAnalysis/chartEditor.vue

@@ -92,6 +92,7 @@
               <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
               <Chart 
                 :options="options"
+                :chartInfo="chartInfo"
                 minHeight="400px" 
                 height="450px"
                 ref="chartRef"

src/views/chartRelevance_manage/crossVarietyAnalysis/list.vue

@@ -138,6 +138,7 @@
                     <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
                     <Chart 
 											:options="options"
+											:chartInfo="chartInfo"
 											minHeight="440px" 
 											height="500px"
 											ref="chartRef"

src/views/chartRelevance_manage/fittingEquation/fittingEquationList.vue

@@ -162,6 +162,7 @@
                     <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
                     <Chart 
 											:options="options"
+											:chartInfo="chartInfo"
 											minHeight="440px" 
 											height="500px"
 											ref="chartRef"

src/views/chartRelevance_manage/relevance/list.vue

@@ -168,6 +168,7 @@
                   </h2>
                   <Chart
                     :options="options"
+                    :chartInfo="chartInfo"
                     minHeight="440px"
                     height="500px"
                     ref="chartRef"

src/views/chartRelevance_manage/statistic/statisticFeatureList.vue

@@ -148,6 +148,7 @@
                     <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
                     <Chart 
 											:options="options"
+											:chartInfo="chartInfo"
 											minHeight="440px" 
 											height="500px"
 											ref="chartRef"

src/views/dataEntry_manage/addChart.vue

@@ -43,7 +43,7 @@
 
 					<el-form-item label="图表主题" prop="Theme">
 						<el-select
-							v-model="chartInfo.ThemeId"
+							v-model="chartInfo.ChartThemeId"
 							placeholder="请选择图表主题"
 							style="width: 90%"
 							@change="changeThemeHandle"
@@ -347,7 +347,8 @@
 					<!-- 标识区 标记线 图表说明 -->
 					<markersSection
 						v-if="tableData.length"
-						:chartType="chartInfo.ChartType"
+						ref="markerSectionRef"
+						:chartInfo="chartInfo"
 						@update="setChartMarkerInfo"
 					/>
         </div>
@@ -400,8 +401,19 @@
 				<div class="cont-bottom">
 					<div class="chart-show-cont" v-show="options.series">
 						<div class="chartWrapper" id="chartWrapper">
-							<h2 class="chart-title" v-show="chartInfo.ChartName">{{ chartInfo.ChartName }}</h2>
-							<Chart :options="options" ref="chartRef" />
+							<h2 
+								class="chart-title" 
+								v-show="chartInfo.ChartName"
+								:style="`
+									textAlign:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
+									fontSize:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
+									color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
+								`"
+							>
+								{{ chartInfo.ChartName }}
+							</h2>
+
+							<Chart :options="options" :chartInfo="chartInfo" ref="chartRef"/>
 							<div class="range-cont left" v-if="leftIndex != -1">
 								<el-input
 									style="width: 60px; display: block"
@@ -494,17 +506,28 @@
 							</template>
 						</div>
 
-						<div class="chart-bottom-info">
+						<div class="chart-bottom-insruction-info">
 
 							<div class="chart-source">
-								<span>数据来源:{{chartInfo.SourcesFrom}}</span>
+								<span>
+									数据来源:
+									<span
+										v-if="chartInfo.SourcesFrom"
+										:style="`
+										color: ${JSON.parse(chartInfo.SourcesFrom).isShow ? JSON.parse(chartInfo.SourcesFrom).color : '#999'};
+										fontSize: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
+									`"
+									>{{ JSON.parse(chartInfo.SourcesFrom).text}}</span>
+								</span>
 								<el-switch
-									v-model="chartInfo.SourcesFromVisible"
-									:active-value="1"
-									:inactive-value="0"
+									v-if="chartInfo.SourcesFrom"
+									v-model="chartInfo.SourcesFromVisable"
+									:active-value="true"
+									:inactive-value="false"
 									style="margin:0 15px;"
+									@change="changeSourceVisable"
 								/>
-								<span class="editsty">编辑</span>
+								<span class="editsty" @click="isShowSourceDialog=true">编辑</span>
 							</div>
 
 							<!-- 公历农历切换 只用于季节性图 -->
@@ -519,7 +542,15 @@
 							</el-radio-group>
 
 							<!-- 图表说明 -->
-							<div class="chart-instruction text_twoLine" v-text="chartInfo.Instructions"></div>
+							<div 
+								class="chart-instruction" 
+								v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
+								v-text="JSON.parse(chartInfo.Instructions).text"
+								:style="`
+									color: ${JSON.parse(chartInfo.Instructions).color};
+									fontSize: ${ JSON.parse(chartInfo.Instructions).fontSize }px
+								`"
+							></div>
 						</div>
 
 
@@ -599,6 +630,13 @@
       @cancel="legendEditDiaShow = false"
       @saveLegend="saveLegend"
     />
+
+		<!-- 数据来源编辑弹窗 -->
+		<chartSourceEditDia
+			:isShow.sync="isShowSourceDialog"
+			:chartInfo="chartInfo"
+			@update="value => {chartInfo.SourcesFrom=JSON.stringify({...value,isShow:chartInfo.SourcesFromVisable})}"
+		/>
   </div>
 </template>
 
@@ -613,8 +651,9 @@ import barOption from './components/barOptionSection.vue';
 import sectionalScatterOption from './components/sectionalScatterOption.vue';
 import LegendEditDia from './components/LegendEditDia.vue';
 import markersSection from './components/markersSection.vue';
+import chartSourceEditDia from './components/chartSourceEditDialog.vue';
 export default {
-  components: { Chart,DateChooseDia,barOption,sectionalScatterOption,LegendEditDia,markersSection},
+  components: { Chart,DateChooseDia,barOption,sectionalScatterOption,LegendEditDia,markersSection,chartSourceEditDia},
 	directives: {
     drag(el, bindings) {
       el.onmousedown = function (e) {
@@ -726,11 +765,18 @@ export default {
 						})
 					)
 
+					const { ChartType,ChartName,ChartThemeId,SourcesFrom,Instructions,MarkersLines,MarkersAreas,ChartThemeStyle } = this.chartInfo;
 					let public_param = {
 						ChartClassifyId: this.chartInfo.classify.length ? this.chartInfo.classify[this.chartInfo.classify.length - 1] : 0,
-						ChartName: this.chartInfo.ChartName,
-						ChartType: this.chartInfo.ChartType,
 						ChartEdbInfoList: db_arr,
+						ChartName,
+						ChartType,
+						ChartThemeId,
+						SourcesFrom,
+						Instructions,
+						MarkersLines,
+						MarkersAreas,
+						ChartThemeStyle
 					}
 
 					//提交参数
@@ -789,7 +835,7 @@ export default {
 	},
   mounted() {
 		this.getMenu();
-		this.getThemeList();
+		this.getThemeList('init');
 		window.addEventListener('resize', this.reloadRightWid);
 	},
 	destroyed() {
@@ -1113,26 +1159,7 @@ export default {
       color: #666;
 			padding: 100px 0;
     }
-
-		.chart-bottom-info {
-			margin-top: 10px;
-			display: flex;
-			gap: 0 20px;
-			.chart-source {
-				width: 30%;
-			}
-
-			.calendar-cont {
-				display: block;
-				margin: 0 auto;
-				text-align: center;
-				flex-shrink: 0;
-			}
-
-			.chart-instruction {
-				flex: 1;
-			}
-		}
+		
 		@media screen and (min-width: 1711px){
 			.min-data-input {
 				margin-top: 310px;

src/views/dataEntry_manage/chartSetting.vue

@@ -369,8 +369,18 @@
                 <div class="chartEn-mark" v-show="chartInfo.IsEnChart" style="top: 0;left: 0;">En</div>
                 <div class="chart-show-cont"  v-if="!chartInfo.WarnMsg">
                   <div class="chartWrapper" id="chartWrapper">
-                    <h2 class="chart-title">{{ currentLang==='en'?(chartInfo.ChartNameEn||chartInfo.ChartName):chartInfo.ChartName }}</h2>
-                    <Chart :options="options" ref="chartRef" />
+                    <h2 
+                      class="chart-title"
+                      :style="`
+                        textAlign:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
+                        fontSize:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
+                        color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
+                      `"
+                    >
+                      {{ currentLang==='en'?(chartInfo.ChartNameEn||chartInfo.ChartName):chartInfo.ChartName }}
+                    </h2>
+
+                    <Chart :options="options" :chartInfo="chartInfo" ref="chartRef"/>
 
                     <div class="range-cont left" v-if="leftIndex != -1">
                       <el-input
@@ -481,16 +491,41 @@
                     >作者:{{ chartInfo.SysUserRealName || '' }}</span
                   >
 
-                  <!-- 公历农历切换 只用于季节性图 -->
-                  <el-radio-group
-                    v-model="calendar_type"
-                    class="calendar-cont"
-                    v-if="chartInfo.ChartType === 2"
-                    @change="getPreviewChartInfo"
-                  >
-                    <el-radio-button label="公历" />
-                    <el-radio-button label="农历" />
-                  </el-radio-group>
+                  <div class="chart-bottom-insruction-info">
+
+                    <div class="chart-source" v-if="chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).isShow">
+                        数据来源:
+                        <span
+                          :style="`
+                          color: ${JSON.parse(chartInfo.SourcesFrom).color};
+                          fontSize: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
+                        `"
+                        >{{ JSON.parse(chartInfo.SourcesFrom).text}}</span>
+                    </div>
+
+                    <!-- 公历农历切换 只用于季节性图 -->
+                    <el-radio-group
+                      v-model="calendar_type"
+                      class="calendar-cont"
+                      v-if="chartInfo.ChartType === 2"
+                      @change="getPreviewChartInfo"
+                    >
+                      <el-radio-button label="公历" />
+                      <el-radio-button label="农历" />
+                    </el-radio-group>
+
+                    <!-- 图表说明 -->
+                    <div 
+                      class="chart-instruction" 
+                      v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
+                      v-text="JSON.parse(chartInfo.Instructions).text"
+                      :style="`
+                        color: ${JSON.parse(chartInfo.Instructions).color};
+                        fontSize: ${ JSON.parse(chartInfo.Instructions).fontSize }px
+                      `"
+                    ></div>
+                  </div>
+                  
                 </div>
 
                 <!-- 异常显示 -->
@@ -2873,7 +2908,7 @@ export default {
             }
             /* =================== */
             .chart-show-cont {
-              padding: 0 160px 0 120px;
+              padding: 10px 160px 0 120px;
               position: relative;
               .chart-title {
                 font-size: 16px;

src/views/dataEntry_manage/components/addMarkerDialog.vue

@@ -256,6 +256,8 @@ export default {
       }else {
         this.editIndex = 0;
         
+        let themeOpt = JSON.parse(this.chartInfo.ChartThemeStyle);
+
         this.markerForm = {
           axis: this.canSelectLeftYaxis?1:0,
           axisName:this.axisLabelMap[this.markerForm.axis],
@@ -267,8 +269,8 @@ export default {
           color: '#999',
           text: '',
           textPosition: 'top',
-          textColor: '#999',
-          textFontSize: 12,
+          textColor: themeOpt.markerOptions.style.color,
+          textFontSize: themeOpt.markerOptions.style.fontSize,
           isShow: true,
         }
       }

src/views/dataEntry_manage/components/chart.vue

@@ -35,6 +35,10 @@ export default {
 		index: {
 			type: String,
 			default: '1'
+		},
+		chartInfo: {
+			type: Object,
+			default: () => {}
 		}
 	},
 	watch: {
@@ -71,30 +75,8 @@ export default {
 
 			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)
-						}
-					})
-				});
+				? Highcharts.chart(`container${this.index}`, options) 
+				: Highcharts.stockChart(`container${this.index}`,options);
 
 			let that = this;
       if(!$('#right')[0]) return
@@ -117,9 +99,9 @@ export default {
 
 		//主题色一些外层公用配置  目前只有绘图区和legend和colors
 		setThemeOptions() {
-			if(!this.$parent.chartInfo||!this.$parent.chartInfo.ChartThemeStyle) return {}
+			if(!this.chartInfo||!this.chartInfo.ChartThemeStyle) return {}
 
-			let chartTheme = JSON.parse(this.$parent.chartInfo.ChartThemeStyle) 		
+			let chartTheme = JSON.parse(this.chartInfo.ChartThemeStyle)		
 			return {
 				legend: {
 					...defaultOpts.legend,

src/views/dataEntry_manage/components/chartSourceEditDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-dialog
+    :visible.sync="isShow"
+		:close-on-click-modal="false"
+    :append-to-body="true"
+		@close="cancelHandle"
+		custom-class="marker-edit-dialog"
+		center
+		width="650px"
+		v-dialogDrag
+    top="8vh"
+    title="编辑数据来源"
+  >
+    <div style="padding-left: 20%">
+      <el-form
+        :model="chartSourceForm"
+        label-width="80px"
+        label-position="left"
+      >
+        <el-form-item label="数据来源">
+          <el-input
+            v-model="chartSourceForm.text"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+        <el-form-item label="颜色" style="margin-bottom:8px;">
+          <el-color-picker
+            v-model="chartSourceForm.color"
+            show-alpha
+            style="width:90px"
+          />
+        </el-form-item>
+        <el-form-item label="字号">
+          <el-input
+            v-model="chartSourceForm.fontSize"
+            style="width: 90px"
+            type="number"
+            :min="1"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" style="margin-top: 20px;">
+      <el-button @click="saveSource" type="primary">保存</el-button>
+      <el-button @click="cancelHandle">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    isShow: {
+      type: Boolean
+    },
+    chartInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    isShow(nval) {
+      if(!nval) return
+      
+      if(this.chartInfo.SourcesFrom) { //回显
+        let { text,color,fontSize } = JSON.parse(this.chartInfo.SourcesFrom);
+        this.chartSourceForm = {
+          text,
+          color,
+          fontSize
+        }
+      }else {
+        this.chartSourceForm = {
+          text: '',
+          color: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.color,
+          fontSize: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.fontSize
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartSourceForm: {
+        text: '',
+        color: '',
+        fontSize: ''
+      }
+    }
+  },
+  methods:{
+    saveSource() {
+      if(!this.chartSourceForm.text) return this.$message.warning('数据来源不能为空')
+
+      this.$emit('update',this.chartSourceForm)
+      this.cancelHandle()
+    },
+    
+    cancelHandle() {
+      this.$emit('update:isShow',false)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+
+</style>

src/views/dataEntry_manage/components/markersSection.vue

@@ -58,9 +58,9 @@
       <div class="induction-item" v-if="chartInstruction.text">
         <div v-text="chartInstruction.text" class="text_oneLine text"></div>
          <div>
-            <i class="el-icon-view icon" :style="chartInstruction.isShow?'color:#0052D9':'color:#999'" @click="chartInstruction.isShow=!chartInstruction.isShow;"/>
+            <i class="el-icon-view icon" :style="chartInstruction.isShow?'color:#0052D9':'color:#999'" @click="chartInstruction.isShow=!chartInstruction.isShow;updateChartHandle()"/>
             <i class="el-icon-edit icon" style="margin:0 6px" @click="addChartInductionHandle"/>
-            <i class="el-icon-delete icon" @click="chartInstruction.text=''"/>
+            <i class="el-icon-delete icon" @click="chartInstruction.text=''; updateChartHandle()"/>
           </div>
       </div>
 
@@ -84,7 +84,7 @@
     <addMarkerDialog
       :isShow.sync="isOpenMarkerDialog"
       :form="markerForm"
-      :chartInfo="$parent.chartInfo"
+      :chartInfo="chartInfo"
       :axisInfo="{
         leftIndex: $parent.leftIndex,
         rightIndex: $parent.rightIndex,
@@ -98,31 +98,31 @@
     <m-dialog
       :title="'添加图表说明'"
       class="marker-edit-dialog"
-      :show.sync="chartinductionDiaForm.show" 
+      :show.sync="chartInductionDiaForm.show" 
       width="650px"
     >
       <div style="padding-left: 20%">
         <el-form
-          :model="chartinductionDiaForm"
+          :model="chartInductionDiaForm"
           label-width="80px"
           label-position="left"
         >
           <el-form-item label="图表说明">
             <el-input
-              v-model="chartinductionDiaForm.text"
+              v-model="chartInductionDiaForm.text"
               placeholder="请输入内容"
             />
           </el-form-item>
           <el-form-item label="颜色" style="margin-bottom:8px;">
             <el-color-picker
-              v-model="chartinductionDiaForm.color"
+              v-model="chartInductionDiaForm.color"
               show-alpha
               style="width:90px"
             />
           </el-form-item>
           <el-form-item label="字号">
             <el-input
-              v-model="chartinductionDiaForm.fontSize"
+              v-model="chartInductionDiaForm.fontSize"
               style="width: 90px"
               type="number"
               :min="1"
@@ -131,8 +131,8 @@
         </el-form>
       </div>
       <div slot="footer" style="margin-top: 20px;">
-        <el-button @click="saveSeries" type="primary">保存</el-button>
-        <el-button @click="chartinductionDiaForm.show=false">取消</el-button>
+        <el-button @click="saveInductionDiaForm" type="primary">保存</el-button>
+        <el-button @click="chartInductionDiaForm.show=false">取消</el-button>
       </div>
     </m-dialog>
 
@@ -143,15 +143,20 @@ import addMarkerDialog from './addMarkerDialog.vue'
 import mDialog from '@/components/mDialog.vue'
 export default {
   components: { addMarkerDialog,mDialog },
+  props: {
+    chartInfo: {
+      type: Object
+    }
+  },
   data() {
     return {
       markerLinesArr: [],
       markerAreasArr: [],
       chartInstruction:{
-        text: '图表说明的货物带回去无地黄丸酒店',
+        text: '',
         isShow: true,
-        color: '#f00',
-        fontSize: 12
+        color: this.chartInfo.ChartThemeStyle?JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.color:'#333',
+        fontSize: this.chartInfo.ChartThemeStyle?JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.fontSize:12
       } ,
 
       /* 标识线区弹窗 */
@@ -162,11 +167,9 @@ export default {
       },
 
       /* 图表说明弹窗 */
-      chartinductionDiaForm: {
+      chartInductionDiaForm: {
         show: false,
-        text: '图表说明的货物带回去无地黄丸酒店',
-        color: '#f00',
-        fontSize: 12
+        text: '',
       }
     }
   },
@@ -212,7 +215,7 @@ export default {
 
     addChartInductionHandle() {
       const { text,color,fontSize } = this.chartInstruction;
-      this.chartinductionDiaForm = {
+      this.chartInductionDiaForm = {
         show: true,
         text,
         color,
@@ -220,6 +223,19 @@ export default {
       }
     },
 
+    saveInductionDiaForm() {
+      if(!this.chartInductionDiaForm.text) return this.$message.warning('图表说明不能为空')
+      const { text,color,fontSize } = this.chartInductionDiaForm;
+      this.chartInstruction = {
+        text,
+        isShow: this.chartInstruction.isShow,
+        color,
+        fontSize
+      };
+      this.chartInductionDiaForm.show = false;
+       this.updateChartHandle()
+    },
+
     //更新图表标识区/线/说明
     updateChartHandle() {
       this.$emit('update',{
@@ -229,8 +245,17 @@ export default {
       })
     },
 
-    initData() {
-      
+    /* 数据回显 */
+    initData(data) {
+      const { MarkersLines,MarkersAreas,Instructions } = data;
+      this.markerLinesArr = MarkersLines ? JSON.parse(MarkersLines) : [];
+      this.markerAreasArr = MarkersAreas ? JSON.parse(data.MarkersAreas) : [];
+      this.chartInstruction = Instructions ? JSON.parse(data.Instructions) : {
+        text: '',
+        isShow: true,
+        color: this.chartInfo.ChartThemeStyle?JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.color:'#333',
+        fontSize: this.chartInfo.ChartThemeStyle?JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.fontSize:12
+      };
     }
   },
 }

src/views/dataEntry_manage/css/chartfit.scss

@@ -261,7 +261,7 @@ $font-normal:14px;
 					}
 					/* =================== */
 					.chart-show-cont {
-						padding: 0 160px 0 120px;
+						padding: 10px 160px 0 120px;
 						position: relative;
 						.chart-title {
 							font-size: 16px;

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"/>
+				<Chart :options="options" :chartInfo="chartInfo" ref="chartRef"/>
 				<div class="range-cont left" v-if="leftIndex != -1">
 					<el-input
 						style="width: 80px; display: block"

src/views/dataEntry_manage/editChart.vue

@@ -51,15 +51,16 @@
 
 					<el-form-item label="图表主题" prop="Theme">
 						<el-select
-							v-model="chartInfo.ThemeId"
+							v-model="chartInfo.ChartThemeId"
 							placeholder="请选择图表主题"
 							style="width: 90%"
+							@change="changeThemeHandle"
 						>
 							<el-option
 								v-for="item in chartThemeArr"
-								:key="item.key"
-								:label="item.label"
-								:value="item.key"
+								:key="item.ChartThemeId"
+								:label="item.ChartThemeName"
+								:value="item.ChartThemeId"
 							>
 							</el-option>
 						</el-select>
@@ -337,8 +338,10 @@
 
 					<!-- 标识区 标记线 图表说明 -->
 					<markersSection
-						v-if="tableData.length"
+						ref="markerSectionRef"
 						:chartType="chartInfo.ChartType"
+						:chartInfo="chartInfo"
+						@update="setChartMarkerInfo"
 					/>
         </div>
 			</div>
@@ -390,8 +393,18 @@
 				<div class="cont-bottom">
 					<div class="chart-show-cont" v-if="!chartInfo.WarnMsg&&options.series">
 						<div class="chartWrapper" id="chartWrapper">
-							<h2 class="chart-title" v-show="chartInfo.ChartName">{{ chartInfo.ChartName }}</h2>
-							<Chart :options="options" ref="chartRef" />
+							<h2 
+								class="chart-title" 
+								v-show="chartInfo.ChartName"
+								:style="`
+									textAlign:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
+									fontSize:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
+									color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
+								`"
+							>
+								{{ chartInfo.ChartName }}
+							</h2>
+							<Chart :options="options" :chartInfo="chartInfo" ref="chartRef" />
 							<div class="range-cont left" v-if="leftIndex != -1">
 								<el-input
 									style="width: 60px; display: block"
@@ -484,17 +497,28 @@
 							</template>
 						</div>
 
-						<div class="chart-bottom-info">
+						<div class="chart-bottom-insruction-info">
 
 							<div class="chart-source">
-								<span>数据来源:{{chartInfo.SourcesFrom}}</span>
+								<span>
+									数据来源:
+									<span
+										v-if="chartInfo.SourcesFrom"
+										:style="`
+										color: ${JSON.parse(chartInfo.SourcesFrom).isShow ? JSON.parse(chartInfo.SourcesFrom).color : '#999'};
+										fontSize: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
+									`"
+									>{{ JSON.parse(chartInfo.SourcesFrom).text}}</span>
+								</span>
 								<el-switch
-									v-model="chartInfo.SourcesFromVisible"
-									:active-value="1"
-									:inactive-value="0"
+									v-if="chartInfo.SourcesFrom"
+									v-model="chartInfo.SourcesFromVisable"
+									:active-value="true"
+									:inactive-value="false"
 									style="margin:0 15px;"
+									@change="changeSourceVisable"
 								/>
-								<span class="editsty">编辑</span>
+								<span class="editsty" @click="isShowSourceDialog=true">编辑</span>
 							</div>
 
 							<!-- 公历农历切换 只用于季节性图 -->
@@ -509,7 +533,15 @@
 							</el-radio-group>
 
 							<!-- 图表说明 -->
-							<div class="chart-instruction" v-text="chartInfo.Instructions"></div>
+							<div 
+								class="chart-instruction" 
+								v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
+								v-text="JSON.parse(chartInfo.Instructions).text"
+								:style="`
+									color: ${JSON.parse(chartInfo.Instructions).color};
+									fontSize: ${ JSON.parse(chartInfo.Instructions).fontSize }px
+								`"
+							></div>
 						</div>
 
 						<span class="chart-author">作者:{{ chartInfo.SysUserRealName }}</span>
@@ -595,6 +627,13 @@
       :show.sync="isShowSaveOther" 
       :data="chartInfo"
     />
+
+		<!-- 数据来源编辑弹窗 -->
+		<chartSourceEditDia
+			:isShow.sync="isShowSourceDialog"
+			:chartInfo="chartInfo"
+			@update="value => {chartInfo.SourcesFrom=JSON.stringify({...value,isShow:chartInfo.SourcesFromVisable})}"
+		/>
   </div>
 </template>
 
@@ -611,8 +650,9 @@ import barOption from './components/barOptionSection.vue';
 import sectionalScatterOption from './components/sectionalScatterOption.vue';
 import LegendEditDia from './components/LegendEditDia.vue';
 import markersSection from './components/markersSection.vue';
+import chartSourceEditDia from './components/chartSourceEditDialog.vue';
 export default {
-  components: { Chart,DateChooseDia,SaveChartOther,barOption,sectionalScatterOption,LegendEditDia,markersSection },
+  components: { Chart,DateChooseDia,SaveChartOther,barOption,sectionalScatterOption,LegendEditDia,markersSection,chartSourceEditDia },
 	directives: {
     drag(el, bindings) {
       el.onmousedown = function (e) {
@@ -690,11 +730,15 @@ export default {
 					const {IsNameDefault=true} = SeriesList.length?SeriesList[0]:[]
 					this.IsNameDefault = IsNameDefault
 
-           this.chartInfo = {
+          this.chartInfo = {
 						...ChartInfo,
 						classify: [ChartInfo.ChartClassify[0].ParentId,...ChartInfo.ChartClassify.map(item => item.ChartClassifyId)],
-						Unit: BarChartInfo ? BarChartInfo.Unit : ''
+						Unit: BarChartInfo ? BarChartInfo.Unit : '',
+						SourcesFromVisable: ChartInfo.SourcesFrom ? JSON.parse(ChartInfo.SourcesFrom).isShow : true
 					};
+
+					this.$refs.markerSectionRef.initData(ChartInfo);
+
           this.tableData = EdbInfoList;
 
 					this.calendar_type = this.chartInfo.Calendar; //日历类型
@@ -713,6 +757,8 @@ export default {
 
 					//截面散点图
 					this.chartInfo.ChartType === 10 && this.initSectionScatterData(res.Data);
+					
+					this.getThemeList();
 
         });
 		},
@@ -808,12 +854,19 @@ export default {
 						})
 					)
 
+					const { ChartType,ChartName,ChartThemeId,SourcesFrom,Instructions,MarkersLines,MarkersAreas,ChartThemeStyle } = this.chartInfo;
 					let public_param = {
 						ChartClassifyId: this.chartInfo.classify.length ? this.chartInfo.classify[this.chartInfo.classify.length - 1] : 0,
-						ChartName: this.chartInfo.ChartName,
-						ChartType: this.chartInfo.ChartType,
 						ChartInfoId: this.chartInfo.ChartInfoId,
 						ChartEdbInfoList: db_arr,
+						ChartName,
+						ChartType,
+						ChartThemeId,
+						SourcesFrom,
+						Instructions,
+						MarkersLines,
+						MarkersAreas,
+						ChartThemeStyle
 					}
 
 					//提交参数
@@ -831,6 +884,13 @@ export default {
 							EndDate: this.year_select === 5 ? this.select_date[1] : '',
 						} 
 					: typePrams
+					
+					let svg = this.$refs.chartRef.chart.getSVG({
+						chart: {
+							width: 340,
+							height: 230,
+						}
+					});
 
 					dataBaseInterface.chartEdit(params).then(res => {
 						if(res.Ret !== 200) return;
@@ -855,7 +915,6 @@ export default {
   mounted() {
 		this.getMenu();
 		this.getChartInfo();
-		this.getThemeList();
 		this.reloadRightWid();
 		window.addEventListener('resize', this.reloadRightWid);
 	},
@@ -1184,25 +1243,6 @@ export default {
       color: #666;
 			padding: 100px 0;
     }
-		.chart-bottom-info {
-			margin-top: 10px;
-			display: flex;
-			gap: 0 20px;
-			.chart-source {
-				width: 30%;
-			}
-
-			.calendar-cont {
-				display: block;
-				margin: 0 auto;
-				text-align: center;
-				flex-shrink: 0;
-			}
-
-			.chart-instruction {
-				flex: 1;
-			}
-		}
 		@media screen and (min-width: 1711px){
 			.min-data-input {
 				margin-top: 310px;

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -14,13 +14,12 @@ export default {
 				Source:1,
 				Unit: '',
 				ChartName: '',
-				ThemeId: 0,
-				SourcesFrom: 'wind,ths',
-				SourcesFromVisible: 1,
-				Instructions: '图标说明是的货物以带回去五个一给我倭寇的贫困我的卡我极为强劲的的我吉庆街得我',
-				InstructionsVisible: 1,
-				MarkersLines: [], //标识线
-				MarkersAreas: [],//标识区
+				ChartThemeId: 0,
+				SourcesFrom: '',
+				SourcesFromVisable: true,//数据来源开关，来源现存Json字符串 额外加个属性绑定
+				Instructions: '',
+				MarkersLines: "", //标识线
+				MarkersAreas: "",//标识区
 				ChartThemeStyle:'',//主题样式
 			},
 			chartRules: {
@@ -76,6 +75,12 @@ export default {
 			legendEditDiaShow:false,
 
 			chartThemeArr: [],//主题列表
+
+			/* 来源编辑弹窗 */
+			isShowSourceDialog: false,
+			sourceEditForm: {
+
+			}
 		}
 	},
 	computed: {
@@ -129,18 +134,23 @@ export default {
 					})
 				}
 
+				//获取对应主题列表
+				this.getThemeList('init')
+
 				//柱形图 截面散点切换到普通图 依赖的指标信息其实只有信息无数据 需清空
 				if([7,10].includes(oldval)&&![7,10].includes(newval)) {
 					this.tableData = [];
 					this.chartInfo.LeftMax = '';
 					this.chartInfo.LeftMin = '';
+					this.chartInfo.MarkersLines = "";
+					this.chartInfo.MarkersAreas = "";
 				}
 
 				this.initStatus();
 
 				//共用结构的类型切换可以直接画图
 				if(![7,10].includes(newval)) {
-					//单指标允许相互切换
+					//单指标允许切换到季节图需药重新请求数据
 					this.tableData.length===1 && this.selectTarget(this.tableData[0],'switch');
 					this.tableData.length > 1 && this.setChartOptionHandle(this.tableData);
 				}
@@ -420,7 +430,7 @@ export default {
 			this.tableData.forEach((item,index) => {
 				item.ChartColor = item.ChartColor || themeOpt.colorsOptions[index];
 				item.PredictChartColor = item.PredictChartColor || themeOpt.colorsOptions[index];
-				item.ChartStyle = item.ChartStyle || (themeOpt.lineOptions.isSpline?'spline':'line');
+				item.ChartStyle = item.ChartStyle || (themeOpt.lineOptions.lineType||'spline');
 				this.tableData[index].ChartWidth = this.tableData[index].ChartWidth || themeOpt.lineOptions.lineWidth;
 			})
 		},
@@ -489,8 +499,8 @@ export default {
 			this.$route.path==='/addchart' && this.resetChartEdbDefault();
 			
 			if(!this.tableData.length) {
-				this.chartInfo.MarkersLines = []
-				this.chartInfo.MarkersAreas = []
+				this.chartInfo.MarkersLines = ""
+				this.chartInfo.MarkersAreas = ""
 			}
 		},
 
@@ -719,40 +729,64 @@ export default {
 			this.tableData.forEach((item,index) => {
 				item.ChartColor = themeOpt.colorsOptions[index];
 				item.PredictChartColor = themeOpt.colorsOptions[index];
-				item.ChartStyle = themeOpt.lineOptions.isSpline?'spline':'line';
+				item.ChartStyle = themeOpt.lineOptions.lineType||'spline';
 				item.isAxis = item.isAxis||1;
 
 				this.tableData[index].ChartWidth = themeOpt.lineOptions.lineWidth;
 			})
 		},
 
-		/* 获取主题列表 */
-		async getThemeList() {
+		/* 获取主题列表  type init时重新设置默认样式和主题*/
+		async getThemeList(type=null) {
 			let res =  await chartThemeInterface.getThemeBySource({ChartType: this.chartInfo.ChartType,Source:1})
 
 			if(res.Ret !== 200) return
       this.chartThemeArr = res.Data || []
-      this.chartInfo.ThemeId = res.Data[0].DefaultChartThemeId;
+			
+			if(type==='init') {
+				this.chartInfo.ChartThemeId = res.Data[0].DefaultChartThemeId;
+				this.chartInfo.ChartThemeStyle = this.chartThemeArr.find(_ => _.ChartThemeId===this.chartInfo.ChartThemeId).Config
 
-			if(!this.chartInfo.ChartThemeStyle) {
-				this.chartInfo.ChartThemeStyle = this.chartThemeArr.find(_ => _.ChartThemeId===this.chartInfo.ThemeId).Config
+				this.reLoadChartOption();
 			}
 		},
 
 		/* 改变主题时 */
 		changeThemeHandle() {
-			this.chartInfo.ChartThemeStyle = this.chartThemeArr.find(_ => _.ChartThemeId===this.chartInfo.ThemeId).Config;
+			this.chartInfo.ChartThemeStyle = this.chartThemeArr.find(_ => _.ChartThemeId===this.chartInfo.ChartThemeId).Config;
 			this.resetChartEdbDefault()
-
-			this.setChartOptionHandle(this.tableData)
+			
+			this.reLoadChartOption();
 		},
 
 		/* 更新图表标识区，标识线，图表说明 */
 		setChartMarkerInfo({ markerLinesArr,markerAreasArr,chartInstruction }) {
-			this.chartInfo.MarkersLines = markerLinesArr;
-			this.chartInfo.MarkersAreas = markerAreasArr;
+			this.chartInfo.MarkersLines = JSON.stringify (markerLinesArr);
+			this.chartInfo.MarkersAreas = JSON.stringify(markerAreasArr);
+			this.chartInfo.Instructions = JSON.stringify(chartInstruction);
 
-			this.setChartOptionHandle(this.tableData)
+			this.reLoadChartOption();
+		},
+		
+		//更新标识线，区 重绘图 不用重新获取数据 
+		reLoadChartOption() {
+			if(!this.options.series) return
+			
+			const chartTypeMap = {
+        7: this.setBarChart, //柱形图
+        10: this.setSectionScatterChart //截面散点
+      }
+      chartTypeMap[this.chartInfo.ChartType] 
+				? chartTypeMap[this.chartInfo.ChartType]() 
+				: this.setChartOptionHandle(this.tableData);
+		},
+
+		/* 数据来源显示隐藏 */
+		changeSourceVisable() {
+			this.chartInfo.SourcesFrom = JSON.stringify({
+				...JSON.parse(this.chartInfo.SourcesFrom),
+				isShow:this.chartInfo.SourcesFromVisable
+			})
 		}
 	}
 }

src/views/dataEntry_manage/mixins/chartPublic.js

@@ -139,6 +139,7 @@ export const chartSetMixin = {
       
 			chartItemStyleArr:[
 				{ label: '曲线图', key: 1 ,value: 'spline'},
+				{ label: '折线图', key: 2 ,value: 'line'},
         // { label: '堆积面积图', key: 3 ,value: 'areaspline'},
         { label: '堆积柱状图', key: 4 ,value: 'column'},
 			],//组合图可选样式
@@ -547,17 +548,17 @@ export const chartSetMixin = {
         3: this.setStackOrCombinChart,
         4: this.setStackOrCombinChart,
         5: this.setScatterChart,
-        6: this.setStackOrCombinChart
+        6: this.setStackOrCombinChart,
       };
 
-      chartSetMap[this.chartInfo.ChartType]&&chartSetMap[this.chartInfo.ChartType](newval)
+      chartSetMap[this.chartInfo.ChartType]&&chartSetMap[this.chartInfo.ChartType]()
 
       //myeta内或者数据指标库内
       if(this.$route.path === '/mychart'||this.$route.path==='/database')  this.showData = true;
     },
 
     /* 曲线图设置 */
-    setDefaultChart(newval) {
+    setDefaultChart() {
       /* 上下限显示和值的设置 */
       if([4,6,7,8].includes(this.chartInfo.Source)) {
         this.leftIndex = -1;
@@ -565,9 +566,9 @@ export const chartSetMixin = {
         this.rightTwoIndex = -1;
         this.chartLimit = {};
       }else {
-        this.leftIndex = newval.findIndex((item) => item.IsAxis===1);
-        this.rightIndex = newval.findIndex((item) => !item.IsAxis);
-        this.rightTwoIndex = newval.findIndex((item) => item.IsAxis ===2);
+        this.leftIndex = this.tableData.findIndex((item) => item.IsAxis===1);
+        this.rightIndex = this.tableData.findIndex((item) => !item.IsAxis);
+        this.rightTwoIndex = this.tableData.findIndex((item) => item.IsAxis ===2);
       }
 
       /* 主题样式*/
@@ -577,7 +578,7 @@ export const chartSetMixin = {
       let data = [];
       let ydata = [];
       //有右二轴时排个序 按照左 右 右2的顺序
-      let chartData = newval.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(newval) : _.cloneDeep(newval);
+      let chartData = this.tableData.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(this.tableData) : _.cloneDeep(this.tableData);
 
       chartData.forEach((item, index) => {
         //轴位置值相同的下标
@@ -639,7 +640,7 @@ export const chartSetMixin = {
         //数据列
         let obj = {
           data: [],
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
           dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: sameSideIndex,
           name:
@@ -651,7 +652,7 @@ export const chartSetMixin = {
           : `${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
           nameEn:item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:`${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
           color: item.ChartColor,
-          lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptions.lineWidth),
+          lineWidth: Number(item.ChartWidth),
           ...predict_params
         };
         item.DataList = item.DataList || [];
@@ -714,8 +715,8 @@ export const chartSetMixin = {
     /* 堆叠图/组合图设置  
     本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
      */
-    setStackOrCombinChart(newval) {
-
+    setStackOrCombinChart() {
+      
       const chartTypeMap = {
         3: 'areaspline',
         4: 'column',
@@ -730,7 +731,7 @@ export const chartSetMixin = {
       let data = [];
       let ydata = [];
       //有右二轴时排个序 按照左 右 右2的顺序
-      let chartData = newval.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(newval) : _.cloneDeep(newval);
+      let chartData = this.tableData.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(this.tableData) : _.cloneDeep(this.tableData);
 
       chartData.forEach((item, index) => {
         //轴位置值相同的下标
@@ -754,13 +755,13 @@ export const chartSetMixin = {
         /* 上下限显示的设置 */
         this.leftIndex = [3,4].includes(this.chartInfo.ChartType) 
           ? (chartData[serie_yIndex].IsAxis ? serie_yIndex : -1)
-          : newval.findIndex((item) => item.IsAxis===1);
+          : this.tableData.findIndex((item) => item.IsAxis===1);
         this.rightIndex = [3,4].includes(this.chartInfo.ChartType) 
         ? (chartData[serie_yIndex].IsAxis ? -1 : serie_yIndex)
-        : newval.findIndex((item) => !item.IsAxis);
+        : this.tableData.findIndex((item) => !item.IsAxis);
         this.rightTwoIndex = [3,4].includes(this.chartInfo.ChartType) 
         ? -1
-        : newval.findIndex((item) => item.IsAxis===2);
+        : this.tableData.findIndex((item) => item.IsAxis===2);
 
         //y轴
         let yItem = {
@@ -827,11 +828,11 @@ export const chartSetMixin = {
           : `${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
           nameEn:item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:`${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
           color: item.ChartColor,
-          lineWidth: (this.chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptions.lineWidth) : 0,
+          lineWidth:  Number(item.ChartWidth),
           fillColor: (this.chartInfo.ChartType === 3 || (this.chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
           borderWidth: 1,
           borderColor: item.ChartColor,
-          zIndex: (this.chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? 1 : 0, //防止组合图曲线被遮住
+          zIndex: (this.chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
           ...predict_params
         };
         item.DataList = item.DataList || [];
@@ -869,12 +870,12 @@ export const chartSetMixin = {
     },
 
     /* 季节图设置 农历 公历 */
-    setSeasonChart(newval) {
+    setSeasonChart() {
       /* 季节性图的图表配置 */
       this.leftIndex = 0;
       this.rightIndex = -1;
       this.rightTwoIndex = -1;
-      const chartData = newval[0];
+      const chartData = this.tableData[0];
       // 农历数据需要去除第一项  农历和公历处理逻辑一样
       /**
        * isPredictorChart - 预测指标的chartInfo.vue组件内定义的变量
@@ -897,11 +898,11 @@ export const chartSetMixin = {
         
         let serie_item = {
           data: [],
-          type: chartData.ChartStyle,
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || chartData.ChartStyle,
           dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: this.isPredictorChart?j.Year:j.ChartLegend,
-          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 2,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
           ...predict_params
         };
         const data_array = this.calendar_type === '农历' && this.isPredictorChart?_.cloneDeep(j.Items):_.cloneDeep(j.DataList);
@@ -973,7 +974,7 @@ export const chartSetMixin = {
         xDateFormat: '%m/%d',
       }
       this.options = {
-        colors:seasonOptions.colors.slice(-chartDataHandle.length),
+        colors:chartTheme&&chartTheme.colorsOptions.slice(-chartDataHandle.length),
         series: seasonData,
         yAxis: seasonYdata,
         xAxis,
@@ -983,25 +984,25 @@ export const chartSetMixin = {
     },
 
     /* 散点图设置  只允许2指标画图第一个指标值为x轴 第二个指标为y轴  */
-    setScatterChart(newval) {
-      console.log(newval);
+    setScatterChart() {
+      console.log(this.tableData);
       this.leftIndex = 0;
       this.rightIndex = -1;
       this.rightTwoIndex = -1;
-      if(newval.length !== 2) {
+      if(this.tableData.length !== 2) {
         this.options = {}
         return
       };
       console.log('===========:',this.isSetExtremeValue)
 
       /* 主题样式*/
-       const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+       const chartTheme = this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
 
       // 取2个指标中日期相同的数据
       let real_data = [];
       let tmpData_date = {};//用来取点对应的日期
-      let data1 =  _.cloneDeep(newval)[0].DataList || [];
-      let data2 =  _.cloneDeep(newval)[1].DataList || [];
+      let data1 =  _.cloneDeep(this.tableData)[0].DataList || [];
+      let data2 =  _.cloneDeep(this.tableData)[1].DataList || [];
       data1.forEach(_item => {
         data2.forEach(_item2 => {
           if(_item.DataTimestamp === _item2.DataTimestamp) {
@@ -1029,21 +1030,21 @@ export const chartSetMixin = {
       let tooltip = {
         formatter: function() {
           return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
-          ${newval[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
-          ${newval[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
+          ${this.tableData[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
+          ${this.tableData[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
           `
         },
         // 中文
         formatterCh: function() {
           return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
-          ${newval[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
-          ${newval[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
+          ${this.tableData[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
+          ${this.tableData[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
           `
         },
         // 英文
         formatterEn: function() {
-          let str1 = newval[0].EdbNameEn||newval[0].EdbName;
-          let str2 = newval[1].EdbNameEn||newval[1].EdbName;
+          let str1 = this.tableData[0].EdbNameEn||this.tableData[0].EdbName;
+          let str2 = this.tableData[1].EdbNameEn||this.tableData[1].EdbName;
           return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
           ${str1}: <span style="font-weight: 600">	${this.x}</span><br>
           ${str2}: <span style="font-weight: 600">	${this.y}</span>
@@ -1055,20 +1056,20 @@ export const chartSetMixin = {
       if(!this.chartInfo.ChartInfoId && this.isSetExtremeValue) {
         let maxYData = Math.max(...real_data.map(_ => _.y));
         let minYData = Math.min(...real_data.map(_ => _.y));
-        newval[0].MaxData = maxYData;
-        newval[0].MinData = minYData;
+        this.tableData[0].MaxData = maxYData;
+        this.tableData[0].MinData = minYData;
         this.isSetExtremeValue = false;
       }
 
-      const { IsOrder,ChartColor } = newval[0];
+      const { IsOrder,ChartColor } = this.tableData[0];
       //y轴
       let yAxis = {
         ...basicYAxis,
         title: {
-          text:  `${newval[1].Unit}`,
-          textCh:newval[1].Unit,// 中文
+          text:  `${this.tableData[1].Unit}`,
+          textCh:this.tableData[1].Unit,// 中文
           // 中文不存在，无论英文有无都显示空
-          textEn:newval[1].UnitEn||newval[1].Unit, // 英文
+          textEn:this.tableData[1].UnitEn||this.tableData[1].Unit, // 英文
           style:{
             ...chartTheme&&chartTheme.yAxisOptions.style
           },
@@ -1091,8 +1092,8 @@ export const chartSetMixin = {
         },
         opposite: false,
         reversed: IsOrder,
-        min: Number(newval[0].MinData),
-        max: Number(newval[0].MaxData),
+        min: Number(this.tableData[0].MinData),
+        max: Number(this.tableData[0].MaxData),
         tickWidth: 1,
         plotBands: this.setAxisPlotAreas(1),
         plotLines: this.setAxisPlotLines(1)
@@ -1102,10 +1103,10 @@ export const chartSetMixin = {
       const xAxis = {
         ...scatterXAxis,
         title: {
-          text:  `${newval[0].Unit}`,
-          textCh:newval[0].Unit, // 中文
+          text:  `${this.tableData[0].Unit}`,
+          textCh:this.tableData[0].Unit, // 中文
           // 中文不存在，无论英文有无都显示空
-          textEn:newval[0].UnitEn||newval[0].Unit, // 英文
+          textEn:this.tableData[0].UnitEn||this.tableData[0].Unit, // 英文
           style: {
             ...chartTheme&&chartTheme.xAxisOptions.style
           },
@@ -1308,7 +1309,7 @@ export const chartSetMixin = {
       
         let serie_item = {
           data: filterData,
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
           dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: item.Name,
@@ -1316,7 +1317,7 @@ export const chartSetMixin = {
           nameEn: item.NameEn,
           color: item.Color,
           chartType: 'linear',
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
           marker: {
             enabled: false
           }
@@ -1544,7 +1545,7 @@ export const chartSetMixin = {
       this.relevanceChartData.YDataList.forEach(item=>{
         let serie_item = {
           data: item.Value,
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
           dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: item.Name,
@@ -1552,7 +1553,7 @@ export const chartSetMixin = {
           nameEn: item.NameEn,
           color: item.Color,
           chartType: 'linear',
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
           marker: {
             enabled: false
           }
@@ -1847,13 +1848,13 @@ export const chartSetMixin = {
         let series_item = {
           data: item.Value.map(_ =>[_.X,_.Y]),
           dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
           yAxis: index,
           name: item.Name,
           nameCh: item.Name,
           nameEn: item.NameEn||item.Name,
           color: item.Color,
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth)||3,
           chartType: 'linear',
           zIndex:1
         }
@@ -1958,7 +1959,6 @@ export const chartSetMixin = {
           nameCh: item.Name,
           nameEn: item.NameEn||item.Name,
           color: item.Color,
-          lineWidth: 0,
           chartType: 'linear',
           zIndex:1
         }
@@ -2358,7 +2358,10 @@ export const chartSetMixin = {
     setAxisPlotLines(axis,axisType=null) {
       const { MarkersLines,ChartType } = this.chartInfo;
       if(!MarkersLines) return []
-      let arr = MarkersLines.filter(_ => _.isShow&&_.axis===axis)
+      
+      let markerLines = JSON.parse(MarkersLines);
+
+      let arr = markerLines.filter(_ => _.isShow&&_.axis===axis)
       let plotLines = arr.map(_ => {
         //是否是x时间轴
         let isXDateAxis = axis===3&&axisType==='datetime';
@@ -2388,7 +2391,6 @@ export const chartSetMixin = {
           }
         }
       })
-      console.log(plotLines)
       return plotLines
     },
 
@@ -2397,7 +2399,9 @@ export const chartSetMixin = {
       const { MarkersAreas,ChartType } = this.chartInfo;
       if(!MarkersAreas) return []
 
-      let arr = MarkersAreas.filter(_ => _.isShow&&_.axis===axis)
+      let markerAreas = JSON.parse(MarkersAreas);
+
+      let arr = markerAreas.filter(_ => _.isShow&&_.axis===axis)
       let plotBands = arr.map(_ => {
         //是否是x时间轴
         let isXDateAxis = axis===3&&axisType==='datetime';

src/views/futures_manage/chartEditor.vue

@@ -122,7 +122,13 @@
 					<div class="chart-show-cont" v-show="options.series">
 						<div class="chartWrapper" id="chartWrapper">
 							<h2 class="chart-title" v-show="chartInfo.ChartName">{{ chartInfo.ChartName }}</h2>
-							<Chart :options="options" minHeight="440px" height="500px" ref="chartRef" />
+							<Chart 
+								:options="options" 
+								:chartInfo="chartInfo" 
+								minHeight="440px" 
+								height="500px" 
+								ref="chartRef" 
+							/>
 
 							<!-- 上下限  -->
 							<div class="range-cont left">

src/views/futures_manage/commodityChartBase.vue

@@ -152,6 +152,7 @@
                     <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
                     <Chart 
 											:options="options"
+											:chartInfo="chartInfo"
 											minHeight="440px" 
 											height="500px"
 											ref="chartRef"

src/views/mychart_manage/components/chartDetailDia.vue

@@ -212,7 +212,7 @@
           <div class="chart-show-cont">
             <div class="chartWrapper" id="chartWrapper">
               <template v-if="!chartInfo.WarnMsg">
-                <Chart :options="options" ref="chartRef"/>
+                <Chart :options="options" :chartInfo="chartInfo" ref="chartRef"/>
                 <!-- 上下限 -->
                 <div class="range-cont left" v-if="leftIndex != -1">
                   <el-input
@@ -326,16 +326,43 @@
                 <img :src="$icons.chart_right_arrow" alt="" class="arrow right"  @click="switchChart('next')">
               </template>
             </div>
-            <!-- 公历农历切换 只用于季节性图 -->
-            <el-radio-group
-              v-if="chartInfo.ChartType === 2 && !chartInfo.WarnMsg"
-              v-model="calendar_type"
-              class="calendar-cont"
-              @change="getPreviewChartInfo"
-            >
-              <el-radio-button label="公历" />
-              <el-radio-button label="农历" />
-            </el-radio-group>
+
+            <!-- 底部图表说明 -->
+            <div class="chart-bottom-insruction-info">
+
+              <div class="chart-source" v-if="chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).isShow">
+                  数据来源:
+                  <span
+                    :style="`
+                    color: ${ JSON.parse(chartInfo.SourcesFrom).color };
+                    fontSize: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
+                  `"
+                  >{{ JSON.parse(chartInfo.SourcesFrom).text}}</span>
+              </div>
+
+               <!-- 公历农历切换 只用于季节性图 -->
+              <el-radio-group
+                v-if="chartInfo.ChartType === 2 && !chartInfo.WarnMsg"
+                v-model="calendar_type"
+                class="calendar-cont"
+                @change="getPreviewChartInfo"
+              >
+                <el-radio-button label="公历" />
+                <el-radio-button label="农历" />
+              </el-radio-group>
+
+              <!-- 图表说明 -->
+              <div 
+                class="chart-instruction" 
+                v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
+                v-text="JSON.parse(chartInfo.Instructions).text"
+                :style="`
+                  color: ${JSON.parse(chartInfo.Instructions).color};
+                  fontSize: ${ JSON.parse(chartInfo.Instructions).fontSize }px
+                `"
+              ></div>
+            </div>
+
           </div>
           <el-table
             :data="tableData"

src/views/ppt_manage/mixins/mixins.js

@@ -97,6 +97,10 @@ export default {
 
     /* 曲线 */
     setDefaultChart() {
+
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //拼接标题 数据列
       let data = [],
         ydata = [];
@@ -115,7 +119,9 @@ export default {
             text: item.Unit,
             textCh:item.Unit,//中文单位
             textEn:item.Unit?item.UnitEn:'',//英文单位，但如果无中文单位则不显示
-            // text: null,
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
             align: 'high',
             rotation: 0,
             y: -15,
@@ -131,15 +137,17 @@ export default {
             align: 'center',
             x: [0,2].includes(item.IsAxis) ? 5 : -5,
             style: {
-              fontSize: '10px',
-            },
+              ...chartTheme&&chartTheme.yAxisOptions.style,
+            }
           },
           opposite: [0,2].includes(item.IsAxis),
           reversed: item.IsOrder,
           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)
         };
 
         // //拼接标题 判断相同指标名称拼接来源
@@ -163,13 +171,14 @@ export default {
         //数据列
         let obj = {
           data: [],
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: sameSideIndex,
           name:nameCh,
           nameCh:nameCh,
           nameEn:nameEn,
           color: item.ChartColor,
-          lineWidth: Number(item.ChartWidth),
+          lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptions.lineWidth),
           ...predict_params
         };
         item.DataList = item.DataList || [];
@@ -191,7 +200,12 @@ export default {
               ? 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 = {
@@ -230,6 +244,9 @@ export default {
       };
       let chartStyle = chartTypeMap[this.chartInfo.ChartType];
 
+       /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //拼接标题 数据列
       let data = [],
       ydata = [];
@@ -260,11 +277,12 @@ export default {
         let yItem = {
           ...basicYAxis,
           title: {
-            //text: sameSideIndex !== index ? '' : `${item.Unit}`,
             text:item.Unit,
             textCh:item.Unit,//中文单位
             textEn:item.Unit?item.UnitEn:'',//英文单位，但如果无中文单位则不显示
-            // text: null,
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
             align: 'high',
             rotation: 0,
             y: -15,
@@ -280,15 +298,17 @@ export default {
             align: 'center',
             x: [0,2].includes(item.IsAxis) ? 5 : -5,
             style: {
-              fontSize: '10px',
-            },
+              ...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,
-          visible: serie_yIndex === index && sameSideIndex ===index
+          visible: serie_yIndex === index && sameSideIndex ===index,
+          plotBands: this.setAxisPlotAreas(item.IsAxis),
+          plotLines: this.setAxisPlotLines(item.IsAxis)
         };
 
         // //拼接标题 判断相同指标名称拼接来源
@@ -319,11 +339,11 @@ export default {
           nameCh:nameCh,
           nameEn:nameEn,
           color: item.ChartColor,
-          lineWidth: (this.chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
-          fillColor: (this.chartInfo.ChartType === 3 || (this.chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
+          lineWidth: Number(item.ChartWidth),
+          // fillColor: (this.chartInfo.ChartType === 3 || (this.chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
           borderWidth: 1,
           borderColor: item.ChartColor,
-          zIndex: (this.chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? 1 : 0, //防止组合图曲线被遮住
+          zIndex: (this.chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
           ...predict_params
         };
         item.DataList = item.DataList || [];
@@ -339,13 +359,18 @@ export default {
        let isLessThanOneYear = this.xTimeDiffer();
        let xAxis = {
          ...defaultOpts.xAxis,
-         labels: {
+        labels: {
            formatter: function (ctx) {
              return isLessThanOneYear
                ? 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 = {
@@ -360,6 +385,9 @@ export default {
       /* 季节性图的图表配置 */
       const chartData = this.dataList[0];
 
+       /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
 
       // 农历数据需要去除第一项 在ETA1.0.5之后，除了这里 农历和公历处理逻辑一样
       const temChartDataList=chartData.DataList||[]
@@ -376,9 +404,11 @@ export default {
 
         let serie_item = {
           data: [],
-          type: chartData.ChartStyle,
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || chartData.ChartStyle,
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: j.ChartLegend,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
           ...predict_params
         };
         const data_array = _.cloneDeep(j.DataList);
@@ -398,14 +428,18 @@ export default {
             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,
@@ -416,6 +450,8 @@ export default {
         },
         max: Number(chartData.MaxData),
         min: Number(chartData.MinData),
+        plotBands: this.setAxisPlotAreas(1),
+        plotLines: this.setAxisPlotLines(1)
       }];
 
       // 季节图x轴显示月/日 周度指标额外处理时间轴显示
@@ -426,9 +462,11 @@ export default {
             return Highcharts.dateFormat('%m/%d', ctx.value);
           },
           style: {
-            fontSize: '10px',
-          },
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
+        plotBands: this.setAxisPlotAreas(3,'datetime'),
+        plotLines: this.setAxisPlotLines(3,'datetime')
       };
 
       const tooltip = {
@@ -444,7 +482,7 @@ export default {
       }
 
       this.options = {
-        colors:seasonOptions.colors.slice(-chartDataHandle.length),
+        colors:chartTheme&&chartTheme.colorsOptions.slice(-chartDataHandle.length),
         series: seasonData,
         yAxis: seasonYdata,
         xAxis,
@@ -456,6 +494,9 @@ export default {
     setScatterChart() {
       const chartData = _.cloneDeep(this.dataList);
 
+      /* 主题样式*/
+      const chartTheme = this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       // 取2个指标中日期相同的数据
       let real_data = [];
       let tmpData_date = {};//用来取点对应的日期
@@ -517,7 +558,9 @@ export default {
           text:  `${chartData[1].Unit}`,
           textCh:chartData[1].Unit,
           textEn:chartData[1].Unit?chartData[1].UnitEn:'',
-          // text: null,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
           align: 'high',
           rotation: 0,
           y: -15,
@@ -528,6 +571,9 @@ export default {
             return ctx.value;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         opposite: false,
         reversed: IsOrder,
@@ -545,7 +591,9 @@ export default {
         endOnTick: false,
         startOnTick: false,
         showLastLabel: true,
-        tickPixelInterval: 50
+        tickPixelInterval: 50,
+        plotBands: this.setAxisPlotAreas(1),
+        plotLines: this.setAxisPlotLines(1)
       }
 
       //数据列
@@ -557,7 +605,9 @@ export default {
         nameEn:this.chartInfo.ChartNameEn?`${this.chartInfo.ChartNameEn}${IsOrder ? '(reverse)' : ''}`:'',
         chartType: 'linear',
         color: ChartColor,
-        lineWidth: 0
+        marker: {
+          radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+        },
       }
       real_data.forEach(_ => {
         series.data.push([_.x,_.y])
@@ -575,12 +625,21 @@ export default {
             text:  `${chartData[0].Unit}`,
             textCh:chartData[0].Unit,
             textEn:chartData[0].Unit?chartData[0].UnitEn:'',
-            // text: null,
+            style: {
+              ...chartTheme&&chartTheme.xAxisOptions.style
+            },
             align: 'high',
             rotation: 0,
             x: 0,
             offset: 15,
           },
+          labels: {
+            style: {
+              ...chartTheme&&chartTheme.xAxisOptions.style
+            }
+          },
+          plotBands: this.setAxisPlotAreas(3),
+          plotLines: this.setAxisPlotLines(3)
         },
         tooltip
       }
@@ -594,18 +653,19 @@ export default {
       let seriesData = [];
       const data = _.cloneDeep(this.barDateList);
 
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //x轴
       let xAxis = {
         ...scatterXAxis,
         categories: this.barXIdData.map(_ => this.barEdbData.find(edb => edb.EdbInfoId===_).EdbAliasName),
         tickWidth: 1,
-        title: {
-          text:  ``,
-          align: 'high',
-          rotation: 0,
-          x: 0,
-          offset: 20,
-        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        }
       }
 
       const { max,min } = this.chartLimit;
@@ -619,7 +679,12 @@ export default {
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          x:0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx) {
@@ -627,11 +692,16 @@ export default {
             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)
       }
 
       //数据列
@@ -687,18 +757,19 @@ export default {
       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;
@@ -712,7 +783,11 @@ export default {
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx) {
@@ -720,6 +795,9 @@ export default {
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         min: Number(min),
         max: Number(max),
@@ -734,14 +812,15 @@ export default {
 
         let serie_item = {
           data: filterData,
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: item.Name,
           nameCh: item.Name,
           nameEn: item.NameEn,
           color: item.Color,
           chartType: 'linear',
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
           marker: {
             enabled: false
           }
@@ -882,6 +961,10 @@ export default {
 
     /* 相关性图表初始化 */
     initRelevanceChartData(){
+
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+      
       // 处理X轴
       let xAxis={
         categories: this.relevanceChartData.XEdbIdValue,
@@ -892,9 +975,14 @@ export default {
           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,
@@ -911,7 +999,11 @@ export default {
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx) {
@@ -919,12 +1011,12 @@ export default {
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
-        // min: -1,
-        // max: 1,
         opposite: false,
         tickWidth: 1,
-        // tickInterval:0.2,
       }
 
       //处理series
@@ -932,14 +1024,15 @@ export default {
       this.relevanceChartData.YDataList.forEach(item=>{
         let serie_item = {
           data: item.Value,
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: item.Name,
           nameCh: item.Name,
           nameEn: item.NameEn,
           color: item.Color,
           chartType: 'linear',
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
           marker: {
             enabled: false
           }
@@ -995,6 +1088,9 @@ export default {
       const { DataList,XName,XNameEn,XUnitName,XUnitNameEn,YName,YNameEn,YUnitName,YUnitNameEn } = 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,
@@ -1002,15 +1098,23 @@ export default {
           text: YName,
           textCh:YName,// 中文
           textEn:YNameEn,
-          style:{},
-          styleEn:{cursor:'pointer'},
           align: 'middle',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
+        },
+        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轴
@@ -1020,12 +1124,20 @@ export default {
           text: XName,
           textCh:XName,// 中文
           textEn:XNameEn,
-          style:{},
-          styleEn:{cursor:'pointer'},
+          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)
       }
 
       //数据列
@@ -1041,7 +1153,10 @@ export default {
           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({
@@ -1158,17 +1273,18 @@ export default {
     /* 统计频率图 */
     setStatisticFrequency() {
 
+       /* 主题样式*/
+      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
+          }
         }
       }
 
@@ -1184,7 +1300,15 @@ export default {
             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),
@@ -1194,13 +1318,14 @@ export default {
 
         let series_item = {
           data: item.Value.map(_ =>[_.X,_.Y]),
-          type: 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
           yAxis: index,
           name: item.Name,
           nameCh: item.Name,
           nameEn: item.NameEn||item.Name,
           color: item.Color,
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth)||3,
           chartType: 'linear',
           zIndex:1
         }
@@ -1242,6 +1367,9 @@ export default {
 
       const { DataList,XName,YName,XNameEn,YNameEn } = this.crossVarietyChartData;
 
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+
       //y轴
       let yAxis = {
         ...basicYAxis,
@@ -1250,6 +1378,14 @@ export default {
           textCh:YName,// 中文
           textEn:YNameEn||YName,
           align: 'middle',
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
         opposite: false,
         reversed: false,
@@ -1266,6 +1402,14 @@ export default {
           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),
@@ -1282,7 +1426,6 @@ export default {
           nameCh: item.Name,
           nameEn: item.NameEn||item.Name,
           color: item.Color,
-          lineWidth: 0,
           chartType: 'linear',
           zIndex:1
         }
@@ -1449,6 +1592,94 @@ export default {
             }]
           }
         : {}
+    },
+
+    /* 处理轴的标识线结构 在指定轴位置上拼接标识线 
+      0：右轴 1：左轴 2：右2轴 x轴固定3
+      axisType表示x轴类型 处理时间轴的值 datetime/null 
+    */
+    setAxisPlotLines(axis,axisType=null) {
+      const { MarkersLines,ChartType } = this.chartInfo;
+      if(!MarkersLines) return []
+      
+      let markerLines = JSON.parse(MarkersLines);
+
+      let arr = markerLines.filter(_ => _.isShow&&_.axis===axis)
+      let plotLines = arr.map(_ => {
+        //是否是x时间轴
+        let isXDateAxis = axis===3&&axisType==='datetime';
+        let markerValue='';
+        if(isXDateAxis) {
+          //季节图x轴额外拼个年份
+          let nowYear = new Date().getFullYear();
+          markerValue = ChartType===2 
+            ? new Date(`${nowYear}-${_.value}`).getTime()
+            : new Date(_.value).getTime()
+        }else {
+          markerValue = Number(_.value)
+        }
+
+        return { 
+          value: markerValue,
+          dashStyle: _.dashStyle,
+          width: Number(_.lineWidth),
+          color: _.color,
+          label: {
+            text: _.text||'',
+            verticalAlign: _.textPosition,
+            style: {
+              color: _.textColor,
+              fontSize: _.textFontSize
+            }
+          }
+        }
+      })
+      return plotLines
+    },
+
+    /* 处理标识区拼接 axisType表示x轴类型处理时间轴的值 datetime/null */
+    setAxisPlotAreas(axis,axisType=null) {
+      const { MarkersAreas,ChartType } = this.chartInfo;
+      if(!MarkersAreas) return []
+
+      let markerAreas = JSON.parse(MarkersAreas);
+
+      let arr = markerAreas.filter(_ => _.isShow&&_.axis===axis)
+      let plotBands = arr.map(_ => {
+        //是否是x时间轴
+        let isXDateAxis = axis===3&&axisType==='datetime';
+        let fromMarkerValue='',toMarkerValue='';
+        if(isXDateAxis) {
+          //季节图x轴额外拼个年份
+          let nowYear = new Date().getFullYear();
+          fromMarkerValue = ChartType===2 
+            ? new Date(`${nowYear}-${_.fromValue}`).getTime()
+            : new Date(_.fromValue).getTime()
+
+          toMarkerValue = ChartType===2 
+            ? new Date(`${nowYear}-${_.toValue}`).getTime()
+            : new Date(_.toValue).getTime()
+        }else {
+          fromMarkerValue = Number(_.fromValue);
+          toMarkerValue = Number(_.toValue);
+        }
+
+        return { 
+          from: fromMarkerValue,
+          to: toMarkerValue,
+          color: _.color,
+          label: {
+            text: _.text||'',
+            verticalAlign: _.textPosition,
+            style: {
+              color: _.textColor,
+              fontSize: _.textFontSize
+            }
+          }
+        }
+      })
+
+      return plotBands
     }
   },
 };

src/views/ppt_manage/mixins/pptMixins.js

@@ -225,6 +225,9 @@ export default {
                             chartInfoId:this.chartInfo.ChartInfoId,//添加到我的图库,图表id
                             MyChartClassifyId:this.chartInfo.MyChartClassifyId,//添加到我的图库,图库Id
                             Source:this.chartInfo.Source,//图表来源,和MyChartType一起确定是什么图
+                            Instructions: this.chartInfo.Instructions,
+                            SourcesFrom: this.chartInfo.SourcesFrom,
+                            ChartThemeStyle: this.chartInfo.ChartThemeStyle
                           }
         this.optionMap[id] = { ...defaultOpts, ...this.options,...otherOpts };
       }else{
@@ -450,8 +453,13 @@ export default {
         Source:7 统计特征
         以上图表需要显示标题
       */
-     const {Source,MyChartType} = options
+     const {Source,MyChartType,ChartThemeStyle} = options
      const isShowTitle = isShowPPTTitle(Source,MyChartType)
+     
+    /* 主题样式*/
+    const chartTheme =  ChartThemeStyle ? JSON.parse(ChartThemeStyle) : null;
+    console.log(chartTheme)
+
       this.$nextTick(() => {
         let is_linear = options.series 
           ? options.series.some(_ => _.chartType === 'linear')
@@ -464,22 +472,38 @@ export default {
         let {total,newStr} = getStrSize(options.MyChartTitle,count)
         const isPublish = this.$route.path==='/pptpublish'||this.$route.path==='/pptenpublish'
         if(isShowTitle){
-          titleHTML = `<div style="white-space: normal;font-size:18px;">${options.MyChartTitle}</div>`
+          titleHTML = `<div style="
+            textAlign:${chartTheme&&chartTheme.titleOptions.align};
+            fontSize:${chartTheme&&chartTheme.titleOptions.style.fontSize}px;
+            color:${chartTheme&&chartTheme.titleOptions.style.color}
+          ">
+            ${options.MyChartTitle}
+          </div>`
         }
+
         let SpecialOption = {
           chart: {
+            ...defaultOpts.chart,
+					  ...chartTheme&&chartTheme.drawOption,
             animation: false,
             backgroundColor: "rgba(0,0,0,0)",
             renderTo:$(`#${refName}`)[0],
           },
+          legend: {
+            ...defaultOpts.legend,
+            ...chartTheme&&chartTheme.legendOptions
+          },
+          colors: chartTheme&&chartTheme.colorsOptions||defaultOpts.colors,
           title: isPublish?{
             text: isShowTitle?newStr:null,
+            margin:0,
             useHTML:false,
-            style:{fontSize:'18px'},
-            align:total>count?'left':'center',
+            style:{...chartTheme&&chartTheme.titleOptions.style},
+            align: (chartTheme&&chartTheme.titleOptions.align) || (total>count?'left':'center'),
           }:{
             text: titleHTML,
             useHTML:true,
+            margin:0,
             style:{left:0}
           },
           plotOptions: {

src/views/ppt_manage/newVersion/components/formatEl/ChartEl.vue

@@ -5,6 +5,7 @@
   <div
     class="chart-wrap"
     :id="`${$parent.isPreview?'preview_':''}chart_${index}_${position}`"
+    :style="(chartSourcesFrom&&chartSourcesFrom.isShow || chartInstructions&&chartInstructions.isShow) ? 'margin-bottom:20px' : ''"
   >
     <img :id="`${$parent.isPreview?'preview_':''}img_${index}_${position}`" />
   </div>
@@ -39,6 +40,31 @@
         v-if="isBtnShow"
       ></div>
   </div>
+
+  <!-- 底部来源，图表说明 -->
+  <div class="chart-bottom-insruction-info"
+  v-if="((chartSourcesFrom&&chartSourcesFrom.isShow) || (chartInstructions&&chartInstructions.isShow)) &&!this.$parent.isHintShow(position)">
+
+    <div class="chart-source" v-if="chartSourcesFrom&&chartSourcesFrom.isShow">
+        数据来源:
+        <span
+          :style="`
+          color: ${ chartSourcesFrom.color };
+          fontSize: ${ chartSourcesFrom.fontSize }px;
+        `"
+        >{{ chartSourcesFrom.text}}</span>
+    </div>
+    <!-- 图表说明 -->
+    <div 
+      class="chart-instruction text_oneLine"
+      v-if="chartInstructions&&chartInstructions.isShow"
+      v-text="chartInstructions.text"
+      :style="`
+        color: ${chartInstructions.color};
+        fontSize: ${ chartInstructions.fontSize }px
+      `"
+    ></div>
+  </div>
  
 </div>
   
@@ -57,6 +83,8 @@ export default {
     chartInfoMap(newVal){
       if(this.item&&newVal[this.item.chartId]){
         this.chartTitle = newVal[this.item.chartId].chartTitle||''
+        this.chartSourcesFrom = this.chartInfoMap[this.item.chartId].SourcesFrom ? JSON.parse(this.chartInfoMap[this.item.chartId].SourcesFrom) : null
+        this.chartInstructions = this.chartInfoMap[this.item.chartId].Instructions ? JSON.parse(this.chartInfoMap[this.item.chartId].Instructions) : null
       }
     }
   },
@@ -67,11 +95,14 @@ export default {
   },
   data() {
     return {
-      chartTitle:''
+      chartTitle:'',
+      chartSourcesFrom:null,
+      chartInstructions: null
     };
   },
   methods:{
     copyChartName(position){
+        console.log(this.chartInfoMap[this.item.chartId])
       this.$parent.copyChartName(position)
     },
     addChart(position){
@@ -79,8 +110,11 @@ export default {
     }
   },
   mounted(){
-    if(this.item&&this.chartInfoMap[this.item.chartId])
-    this.chartTitle = this.chartInfoMap[this.item.chartId].chartTitle||''
+    if(this.item&&this.chartInfoMap[this.item.chartId]) {
+      this.chartTitle = this.chartInfoMap[this.item.chartId].chartTitle||''
+      this.chartSourcesFrom = this.chartInfoMap[this.item.chartId].SourcesFrom ? JSON.parse(this.chartInfoMap[this.item.chartId].SourcesFrom) : null
+      this.chartInstructions = this.chartInfoMap[this.item.chartId].Instructions ? JSON.parse(this.chartInfoMap[this.item.chartId].Instructions) : null
+    }
   }
 };
 </script>
@@ -100,4 +134,12 @@ export default {
     margin-left: auto;
   }
 }
+.chart-bottom-insruction-info{
+  width: 90%;
+  position: absolute;
+  left: 5%;
+  bottom: 20px;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>

src/views/ppt_manage/newVersion/utils/untils.js

@@ -626,11 +626,21 @@ export const checkAttribute = (el)=>{
 }
 //更新chartInfoMapItem
 export const getChartInfo = (options)=>{
-  let item = {chartInfoId:0,chartTitle:'',MyChartClassifyId:''}
+  let item = {
+    chartInfoId:0,
+    chartTitle:'',
+    MyChartClassifyId:'',
+    SourcesFrom:'',
+    Instructions: '',
+    ChartThemeStyle: ''
+  }
   if(options instanceof Object){
     item.chartInfoId = options.chartInfoId
     item.chartTitle = options.chartTitleCN
     item.MyChartClassifyId = options.MyChartClassifyId
+    item.SourcesFrom = options.SourcesFrom
+    item.Instructions = options.Instructions
+    item.ChartThemeStyle = options.ChartThemeStyle
   }
   return item
 }

src/views/predictEdb_manage/components/chartInfo.vue

@@ -62,6 +62,7 @@
         <div class="chartWrapper">
             <Chart 
                 :options="options" 
+                :chartInfo="chartInfo"
                 ref="chartRef" 
             />
             <!-- 公历农历切换 只用于季节性图 -->

src/views/sandbox_manage/sandFlowNew/components/addLInkDia.vue

@@ -109,7 +109,7 @@
           </div>
           <div class="link-content-chartIndex" v-else-if="addLinkSearchParams.linkType==2 && this.chartInfo && this.chartInfo.ChartInfoId">
             <div class="chart-name">{{ this.chartInfo.ChartName }}</div>
-            <Chart :options="options" ref="chartRef" />
+            <Chart :options="options" :chartInfo="chartInfo" ref="chartRef" />
           </div>
           <div class="link-content-dataIndex" v-else-if="addLinkSearchParams.linkType==3 && this.reportList.length>0">
             <el-table :data="this.reportList" border style="margin-bottom: 10px;" ref="reportTable"

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

@@ -86,7 +86,7 @@ export const defaultETAOptions = {
   lineOptions: { 
     dashStyle: 'Solid',
     lineWidth: 1,
-    isSpline: 1,
+    lineType: 'spline',
     radius: 5,
   },
   legendOptions: {

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

@@ -64,11 +64,11 @@
                   <li class="option-item">
                     <label class="el-form-item__label">平滑线</label>
                     <el-select 
-                      v-model="themeOptions[key].isSpline"
+                      v-model="themeOptions[key].lineType"
                       style="width: 90px"
                     >
-                      <el-option label="是" :value="1"/>
-                      <el-option label="否" :value="0"/>
+                      <el-option label="是" value="spline"/>
+                      <el-option label="否" value="line"/>
                     </el-select>
                   </li>
                 </template>
@@ -227,7 +227,7 @@ export default {
           color: defaultETAOptions.colorsOptions[0],
           colorIndex:0,
           lineWidth: defaultETAOptions.lineOptions.lineWidth,
-          isSpline: defaultETAOptions.lineOptions.isSpline,
+          lineType: defaultETAOptions.lineOptions.lineType,
           radius: defaultETAOptions.lineOptions.radius,
         },
         legendOptions: defaultETAOptions.legendOptions,
@@ -281,7 +281,7 @@ export default {
           color: options.colorsOptions[0],
           colorIndex:0,
           lineWidth: options.lineOptions.lineWidth,
-          isSpline: options.lineOptions.isSpline,
+          lineType: options.lineOptions.lineType,
           radius: options.lineOptions.radius,
         },
         legendOptions: options.legendOptions,

src/views/system_manage/chartTheme/themeSetting.vue

@@ -35,7 +35,7 @@
 
       <!-- 预览区 -->
       <div class="chart-render-wrapper">
-        <Chart :options="options" ref="chartRef" height="400px" minHeight="350px"/>
+        <Chart :options="options" :chartInfo="chartInfo" ref="chartRef" height="400px" minHeight="350px"/>
       </div>
     </div>
     
@@ -98,12 +98,12 @@ export default {
       let themeItem = this.themeOpts.find(_ => _.ChartThemeId===this.formData.theme)
 
       this.chartInfo = {
-        ChartThemeStyle: themeItem.Config,
-        ...res.Data.ChartInfo
+        ...res.Data.ChartInfo,
+        ChartThemeStyle: themeItem.Config
       };
       this.tableData = res.Data.EdbInfoList;
-      this.chartInfo.ChartType === 7 && this.initBarData(res.Data);
-      this.chartInfo.ChartType === 10 && this.initSectionScatterData(res.Data);
+      if(this.chartInfo.ChartType === 7) return this.initBarData(res.Data);
+      if(this.chartInfo.ChartType === 10) return this.initSectionScatterData(res.Data);
 
       this.setChartOptionHandle(this.tableData)
     },
@@ -123,7 +123,7 @@ export default {
         lineOptions: { 
           dashStyle: lineOptions.dashStyle,
           lineWidth: lineOptions.lineWidth,
-          isSpline: lineOptions.isSpline,
+          lineType: lineOptions.lineType,
           radius: lineOptions.radius,
         },
         legendOptions,