同步所有图表样式

src/components/chart.vue

@@ -22,30 +22,54 @@ export default defineComponent({
       type: Object,
       required: true,
     },
+    chartInfo: {
+			type: Object,
+			default: () => {}
+		}
   },
   setup(props) {
     const chart = ref({});
 
-    /* 设置options */
+    /* 设置options 
+      eta1.4.1增加了主题色
+			仍然以defaultOpts为最底层配置 外层配置在这里统一设置了如legend chart背景色
+			x轴y轴系列等样式还是需要在具体的options中单独设置
+    */
     const init = (): void => {
-      const new_options: any = { ...defaultOpts, ...props.options };
+
+      let themeOptions = setThemeOptions();
+
+      const new_options: any = { ...defaultOpts,...themeOptions, ...props.options };
       console.log(new_options);
-      
-      // // 相关性图设置offset
-      // if(new_options.isRelevanceChart){
-      //   console.log(document.getElementById('container')?.offsetHeight);
-      //   const h=document.getElementById('container')?.offsetHeight
-      //   new_options.xAxis.offset=-(h-74)/2
-      // }
-      
 
       //stock不支持线形图只支持时间图 画散点图用原始chart
 			let is_linear = props.options.series 
-        ? props.options.series.every((_: any) => _.type === 'scatter') || props.options.series.some((_:any) => _.chartType === 'linear'  )
+        ? props.options.series.some((_:any) => _.chartType === 'linear')
         : false ;
-			chart.value = is_linear ? Highcharts.chart("container", new_options) : Highcharts.stockChart("container",new_options);
+			chart.value = is_linear 
+        ? Highcharts.chart("container", new_options) 
+        : Highcharts.stockChart("container",new_options);
     };
 
+    //主题色一些外层公用配置  目前只有绘图区和legend和colors
+    const setThemeOptions = () => {
+      
+			if(!props.chartInfo||!props.chartInfo.ChartThemeStyle) return {}
+
+			let chartTheme = JSON.parse(props.chartInfo.ChartThemeStyle)		
+			return {
+				legend: {
+					...defaultOpts.legend,
+					...chartTheme.legendOptions
+				},
+				chart: {
+					...defaultOpts.chart,
+					...chartTheme.drawOption
+				},
+				colors: chartTheme.colorsOptions
+			}
+    }
+
     onMounted((): void => {
       init();
     });

src/views/chartShow/index.less

@@ -79,7 +79,24 @@
 					margin-right: 10px;
 				}
 			}
+
+			&.chart-bottom-info {
+				padding-right: 10px;
+				padding-bottom: 0;
+			}
+
+			.chart-source {
+				width: 30%;
+				min-width: 150px;
+			}
+			.chart-instruction {
+				max-width: 80%;
+				flex: 1;
+				text-align: right;
+				margin-left: auto;
+			}
 		}
+
 		.notfound {
 			padding: 10%;
 			color: #777;

src/views/chartShow/index.vue

@@ -2,7 +2,19 @@
 <template>
   <div class="chart-show">
     <header class="chart-header" @click="openNew">
-      <span class="chart-title" @click.stop @dblclick="copyText">{{ language === 'ch'?chartInfo.ChartName: chartInfo.ChartNameEn}}</span>
+      <span 
+        class="chart-title" 
+        @click.stop 
+        @dblclick="copyText"
+        :style="chartInfo.ChartThemeStyle?`
+          text-align:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
+          font-size:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
+          color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
+        `:''"
+      >
+        {{ language === 'ch'?chartInfo.ChartName: chartInfo.ChartNameEn}}
+      </span>
+
     </header>
     <template v-if="haveData">
       <div
@@ -11,18 +23,70 @@
         v-loading="loading"
         element-loading-text="加载中..."
       >
-        <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" />
+        <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" :chartInfo="chartInfo"/>
         <div class="mark"></div>
       </div>
     </template>
     <div class="chart-wrapper notfound" v-else>
       <i class="el-icon-warning"></i>哎吆，你的图飞了，赶快去找管理员救命吧~
     </div>
+
+    <!-- 图表来源说明 -->
+    <div 
+      class="chart-bottom-info bootom-source"
+      v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow
+    ">
+
+      <!-- 图表说明 -->
+      <div 
+        class="chart-instruction text_oneLine" 
+        v-text="JSON.parse(chartInfo.Instructions).text"
+        :style="`
+          color: ${JSON.parse(chartInfo.Instructions).color};
+          fontSize: ${ JSON.parse(chartInfo.Instructions).fontSize }px
+        `"
+      ></div>
+    </div>
+
     <div class="bootom-source">
-      <div v-if="$route.query.source=='smartReportGetImg'" class="text_oneLine" style="font-size:11px">
-        source:<span style="display:inline">{{language === 'ch' ? chartInfo.ChartSource : chartInfo.ChartSourceEn}}</span>
+
+      <!-- 自定义来源 -->
+      <div class="chart-source" 
+        v-if="chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).isShow"
+        :style="`
+            color: ${ JSON.parse(chartInfo.SourcesFrom).color };
+            fontSize: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
+        `"
+      >
+          source：<em>{{ JSON.parse(chartInfo.SourcesFrom).text}}</em>
       </div>
-      <strong v-else style="flex:1;" class="text_oneLine">source:  <em> {{language === 'ch' ? chartInfo.ChartSource : chartInfo.ChartSourceEn}}</em></strong>
+
+      <temeplate v-else>
+        <div 
+          v-if="$route.query.source=='smartReportGetImg'" 
+          class="text_oneLine"
+          :style="`
+              color: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.color };
+              font-size: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.fontSize }px;
+          `"
+        >
+          source:<span style="display:inline">{{language === 'ch' ? chartInfo.ChartSource : chartInfo.ChartSourceEn}}</span>
+        </div>
+        <strong 
+          v-else 
+          class="text_oneLine" 
+          :style="`
+              flex:1;
+              color: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.color };
+              font-size: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.fontSize }px;
+          `"
+        >
+          source:  <em> {{language === 'ch' ? chartInfo.ChartSource : chartInfo.ChartSourceEn}}</em>
+        </strong>
+      </temeplate>
+
+
+
       <ul class="right-action" @click.stop>
         <li v-if="$route.query.source==='ybxcx'"><collectBtn/></li>
         <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
@@ -118,26 +182,7 @@ export default defineComponent({
     const openNew = (): void => {
 			window.open(window.location.href,'_blank');
     }
-
-    /* 处理图表来源 只限第三方 */
-    const dealSourceHandle = (): void => {
-
-      // 取出第三方来源 
-      const arr = state.dataList.filter(item => item.EdbType === 1 && item.Source!== 9).map(item => ({
-          key: item.Source,
-          name: item.SourceName,
-        })
-      );
-
-      let res_arr = arr.length ? _.uniqBy(arr,'key') : [];
-
-      let str = '';
-      res_arr.forEach((item: any) => {
-        str += `${item.name}, `
-      })
-      state.sourceName = str;
-    }
-
+    
     /* 获取图表数据信息 */
     const getChartInfo = async (type='') => {
 
@@ -195,6 +240,9 @@ export default defineComponent({
 
     /* 相关性图表 */
     const initRelevanceChartData=(data)=>{
+      /* 主题样式*/
+      const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
+
       const relevanceUnitEnMap={
         '年': 'Year',
         '季': 'Season',
@@ -210,9 +258,14 @@ export default defineComponent({
           text: data.ChartInfo.Source===3 ? (language.value=='ch'?`期数（${data.CorrelationChartInfo.LeadUnit}）`:`stage（${relevanceUnitEnMap[data.CorrelationChartInfo.LeadUnit]}）`):null,
           align: 'high',
           rotation: 0,
-          x: 0,
-          y:2,
-          offset: 20,
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
         tickInterval: 1,
         offset:0,
@@ -227,7 +280,11 @@ export default defineComponent({
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx) {
@@ -235,25 +292,26 @@ export default defineComponent({
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
-        // min: -1,
-        // max: 1,
         opposite: false,
         tickWidth: 1,
-        // tickInterval:0.2,
       }
 
       //处理series
-      let seriesData=[]
+      let seriesData:any[]=[]
       data.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: language.value=='ch'?data.ChartInfo.ChartName:data.ChartInfo.ChartNameEn,
           color: item.Color,
           chartType: 'linear',
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
           marker: {
             enabled: false
           }
@@ -324,6 +382,9 @@ export default defineComponent({
     const setSectionScatterChart = () => {
         const { chartLimit } = state;
         const { DataList,XName,XNameEn,XUnitName,XUnitNameEn,YName,YNameEn,YUnitName,YUnitNameEn } = sectionScatterData.value;
+
+         /* 主题样式*/
+        const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
         
         if(!DataList){
           return 
@@ -337,12 +398,22 @@ export default defineComponent({
             title: {
                 text: language.value === 'ch' ? YName : YNameEn,
                 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: setAxisPlotAreas(1),
+            plotLines: setAxisPlotLines(1)
         }
 
         //x轴
@@ -351,9 +422,19 @@ export default defineComponent({
             title: {
                 text: language.value === 'ch' ? XName : XNameEn,
                 align: 'middle',
+                style: {
+                  ...chartTheme&&chartTheme.xAxisOptions.style
+                },
+            },
+            labels: {
+              style:{
+                ...chartTheme&&chartTheme.xAxisOptions.style
+              },
             },
             min: Number(x_min),
             max: Number(x_max),
+            plotBands: setAxisPlotAreas(3),
+            plotLines: setAxisPlotLines(3)
         }
 
         //数据列
@@ -368,6 +449,9 @@ export default defineComponent({
                 lineWidth: 0,
                 chartType: 'linear',
                 zIndex:1,
+                marker: {
+                  radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+                },
                 visible: true
             }
             item.EdbInfoList.forEach(_ => {
@@ -486,18 +570,21 @@ export default defineComponent({
     /* 统计频率图 */
     const setStatisticFrequency = () => {
       const { DataList,LeftMaxValue,LeftMinValue,RightMaxValue,RightMinValue } = state.statisticFrequencyData;
+      
       if(!DataList){
         return 
       }
+
+      /* 主题样式*/
+      const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
+
       let xAxis = {
         ...scatterXAxis,
         tickWidth: 1,
-        title: {
-          text:  ``,
-          align: 'high',
-          rotation: 0,
-          x: 0,
-          offset: 20,
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         }
       }
 
@@ -511,7 +598,15 @@ export default defineComponent({
             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),
@@ -521,11 +616,12 @@ export default defineComponent({
 
         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: language.value === 'ch' ? item.Name : item.NameEn,
           color: item.Color,
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth)||3,
           chartType: 'linear',
           zIndex:1
         }
@@ -597,6 +693,9 @@ export default defineComponent({
     const setDefaultLineOptions = () => {
       const { dataList,chartInfo } = state;
 
+      /* 主题样式*/
+      const chartTheme =  chartInfo.ChartThemeStyle ? JSON.parse(chartInfo.ChartThemeStyle) : null;
+
       //拼接标题 数据列
       let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
       let rightTwoIndex = dataList.findIndex(item => item.IsAxis ===2);
@@ -623,12 +722,14 @@ export default defineComponent({
             align: 'center',
             x: [0,2].includes(item.IsAxis) ? 5 : -5,
             style: {
-              fontSize: '10px',
-            },
+              ...chartTheme&&chartTheme.yAxisOptions.style,
+            }
           },
           title: {
             text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
-            // text: null,
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
             align: 'high',
             rotation: 0,
             y: -15,
@@ -640,8 +741,10 @@ export default defineComponent({
           reversed: item.IsOrder,
           min: Number(chartData[sameSideIndex].MinData),
           max: Number(chartData[sameSideIndex].MaxData),
-          tickWidth: sameSideIndex !== index ? 0 : 1,
-          visible: sameSideIndex === index
+          tickWidth: 1,
+          visible: sameSideIndex === index,
+          plotBands: setAxisPlotAreas(item.IsAxis),
+          plotLines: setAxisPlotLines(item.IsAxis)
         }
 
         // //拼接标题 判断相同指标名称拼接来源
@@ -666,7 +769,8 @@ export default defineComponent({
 
         let obj = {
           data: [] as any[],
-          type:  'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: sameSideIndex,
           name,
           color: item.ChartColor,
@@ -706,9 +810,11 @@ export default defineComponent({
           },
 
           style: {
-            fontSize: '10px',
-          },
-        }
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        plotBands: setAxisPlotAreas(3,'datetime'),
+        plotLines: setAxisPlotLines(3,'datetime')
       }
 
       state.options = {
@@ -767,6 +873,9 @@ export default defineComponent({
     const setStackOrCombinChart = () => {
       const { dataList,chartInfo } = state;
 
+       /* 主题样式*/
+      const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
+
       //拼接标题 数据列
       let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
       // const chartData = _.cloneDeep(dataList);
@@ -817,8 +926,8 @@ export default defineComponent({
             },
             align: 'center',
             x: [0,2].includes(item.IsAxis) ? 5 : -5,
-            style: {
-              fontSize: '10px',
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
             },
           },
           title: {
@@ -829,14 +938,19 @@ export default defineComponent({
             y: -15,
             x: (item.IsAxis===0 && rightTwoIndex>-1) ? -chartData[rightTwoIndex].Unit.length*12 : 0,
             textAlign: item.IsAxis===1 ? 'left' : 'right',
-            reserveSpace: false
+            reserveSpace: false,
+            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,
-          visible: serie_yIndex === index && sameSideIndex ===index
+          visible: serie_yIndex === index && sameSideIndex ===index,
+          plotBands: setAxisPlotAreas(item.IsAxis),
+          plotLines: setAxisPlotLines(item.IsAxis)
         }
 
         // //拼接标题 判断相同指标名称拼接来源
@@ -865,9 +979,9 @@ export default defineComponent({
           yAxis: serie_yIndex,
           name,
           color: item.ChartColor,
-          lineWidth: (chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
+          lineWidth:  Number(item.ChartWidth),
           fillColor: (chartInfo.ChartType === 3 || (chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
-          zIndex: (chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? 1 : 0, //防止组合图曲线被遮住
+          zIndex: (chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
           borderWidth: 1,
           borderColor: item.ChartColor,
           ...predict_params
@@ -905,9 +1019,11 @@ export default defineComponent({
           },
 
           style: {
-            fontSize: '10px',
-          },
-        }
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        },
+        plotBands: setAxisPlotAreas(3,'datetime'),
+        plotLines: setAxisPlotLines(3,'datetime')
       }
 
       state.options = {
@@ -932,6 +1048,9 @@ export default defineComponent({
       let seasonYdata:any[] = [],
         seasonData:any[] = [];
 
+        /* 主题样式*/
+      const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
+
       /*处理数据列*/
       for (let j of chartDataHandle) {
         //预测指标配置
@@ -939,9 +1058,11 @@ export default defineComponent({
 
         let serie_item = {
           data: [] as any[],
-          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);
@@ -954,6 +1075,7 @@ export default defineComponent({
 
       //y轴
       seasonYdata = [{
+        ...defaultOpts.yAxis,
         labels: {
           formatter: function (ctx: any) {
             let val = ctx.value;
@@ -961,8 +1083,8 @@ export default defineComponent({
           },
           align: 'center',
           style: {
-            fontSize: '10px',
-          },
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          }
         },
         title: {
           text:language.value=='ch'?`${chartData.Unit}`:chartData.UnitEn,
@@ -971,11 +1093,15 @@ export default defineComponent({
           y: -15,
           x: 0,
           textAlign: 'left',
-          reserveSpace: false
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         max: Number(chartData.MaxData),
         min: Number(chartData.MinData),
-        ...defaultOpts.yAxis,
+        plotBands: setAxisPlotAreas(1),
+        plotLines: setAxisPlotLines(1)
       }];
 
       // 季节图x轴显示月/日
@@ -987,9 +1113,11 @@ export default defineComponent({
             return Highcharts.dateFormat('%m/%d', ctx.value);
           },
           style: {
-            fontSize: '10px',
-          },
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
         },
+        plotBands: setAxisPlotAreas(3,'datetime'),
+        plotLines: setAxisPlotLines(3,'datetime')
       };
 
 
@@ -1018,6 +1146,9 @@ export default defineComponent({
     const setScatterChartOptions = () => {
       const { dataList,chartInfo } = state;
 
+       /* 主题样式*/
+      const chartTheme = state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
+
       // 取2个指标中日期相同的数据
       const real_data: any[] = [];
       let tmpData_date: any = {};//用来取点对应的日期
@@ -1069,13 +1200,21 @@ export default defineComponent({
           align: 'high',
           rotation: 0,
           y: -5,
-          offset: -(10 * dataList[1].Unit.length),
+          x:0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx: any) {
             return ctx.value;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         opposite: false,
         reversed: IsOrder,
@@ -1093,7 +1232,9 @@ export default defineComponent({
         endOnTick: false,
         startOnTick: false,
         showLastLabel: true,
-        tickPixelInterval: 50
+        tickPixelInterval: 50,
+        plotBands: setAxisPlotAreas(1),
+        plotLines: setAxisPlotLines(1)
       }
 
       //数据列
@@ -1102,7 +1243,10 @@ export default defineComponent({
         type: 'scatter',
         name: language.value == 'ch'?`${chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`:`${chartInfo.ChartNameEn}${IsOrder ? '(reserve)' : ''}`,
         color: ChartColor,
-        lineWidth: 0
+        chartType: 'linear',
+        marker: {
+          radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+        },
       }
       real_data.forEach(_ => {
         series.data.push([_.x,_.y])
@@ -1123,7 +1267,17 @@ export default defineComponent({
             rotation: 0,
             x: 0,
             offset: 20,
+            style: {
+              ...chartTheme&&chartTheme.xAxisOptions.style
+            },
           },
+          labels: {
+            style: {
+              ...chartTheme&&chartTheme.xAxisOptions.style
+            }
+          },
+          plotBands: setAxisPlotAreas(3),
+          plotLines: setAxisPlotLines(3)
         },
         tooltip
       }
@@ -1153,6 +1307,9 @@ export default defineComponent({
       let seriesData: { data: any; type: string; yAxis: number; name: any; color: any; chartType: string; }[] = [];
       const data = _.cloneDeep(barDateList);
 
+       /* 主题样式*/
+      const chartTheme =  chartInfo.ChartThemeStyle ? JSON.parse(chartInfo.ChartThemeStyle) : null;
+
       let categories = language.value==='ch' 
         ? barXIdData.map((_:number) => barEdbData.find((edb: { EdbInfoId: number; }) => edb.EdbInfoId===_).EdbAliasName)
         : barXIdData.map((_:number) => barEdbData.find((edb: { EdbInfoId: number; }) => edb.EdbInfoId===_).EdbNameEn)
@@ -1162,13 +1319,11 @@ export default defineComponent({
         ...scatterXAxis,
         categories,
         tickWidth: 1,
-        title: {
-          text:  ``,
-          align: 'high',
-          rotation: 0,
-          x: 0,
-          offset: 20,
-        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        }
       }
 
       const { max,min } = chartLimit;
@@ -1181,7 +1336,12 @@ export default defineComponent({
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          x:0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx:any) {
@@ -1189,11 +1349,16 @@ export default defineComponent({
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         min: Number(min),
         max: Number(max),
         opposite: false,
         tickWidth: 1,
+        plotBands: setAxisPlotAreas(1),
+        plotLines: setAxisPlotLines(1)
       }
 
       //数据列
@@ -1250,18 +1415,20 @@ export default defineComponent({
       const {chartLimit,commodityChartData,commodityXData,commodityEdbList,chartInfo} = state;
       let seriesData:any[] = [];
       const data = _.cloneDeep(commodityChartData);
+
+      /* 主题样式*/
+      const chartTheme =  chartInfo.ChartThemeStyle ? JSON.parse(chartInfo.ChartThemeStyle) : null;
+
       //x轴
       let xAxis = {
         ...scatterXAxis,
         categories: commodityXData.map(_ => language.value === 'ch' ? _.Name:_.NameEn),
         tickWidth: 1,
-        title: {
-          text:  ``,
-          align: 'high',
-          rotation: 0,
-          x: 0,
-          offset: 20,
-        },
+        labels: {
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        }
       }
 
       const { max,min } = chartLimit;
@@ -1273,7 +1440,11 @@ export default defineComponent({
           align: 'high',
           rotation: 0,
           y: -15,
-          offset: 0,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         labels: {
           formatter: function (ctx:any) {
@@ -1281,6 +1452,9 @@ export default defineComponent({
             return val;
           },
           align: 'center',
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
         },
         min: Number(min),
         max: Number(max),
@@ -1295,12 +1469,13 @@ export default defineComponent({
 
         let serie_item = {
           data: filterData,
-          type: 'spline',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
           yAxis: 0,
           name: language.value === 'ch' ? item.Name : item.NameEn,
           color: item.Color,
           chartType: 'linear',
-          lineWidth: 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
           marker: {
             enabled: false
           }
@@ -1480,6 +1655,94 @@ export default defineComponent({
         : {}
     }
 
+    /* 处理轴的标识线结构 在指定轴位置上拼接标识线 
+      0：右轴 1：左轴 2：右2轴 x轴固定3
+      axisType表示x轴类型 处理时间轴的值 datetime/null 
+    */
+    const setAxisPlotLines = (axis:number,axisType:any=null) => {
+      const { MarkersLines,ChartType } = state.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 */
+    const setAxisPlotAreas = (axis:number,axisType:any=null) => {
+      const { MarkersAreas,ChartType } = state.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
+    }
+
     /* 复制标题 */
     const copyText = () => {
       const { chartInfo } = state;