季节图间距调整

src/utils/defaultOptions.js

@@ -170,7 +170,7 @@ export const seasonOptions = {
 		lineWidth: 1,
 		lineColor: '#bfbfbf',
 		tickColor: '#bfbfbf',
-		offset: 0,
+		// offset: 0,
 		opposite: false,
 		reversed: false,
 		visible: true,

src/views/dataEntry_manage/addChart.vue

@@ -1082,7 +1082,7 @@ export default {
 								justify-content: space-between;
 								top: auto;
 								right: 0;
-								bottom: -3%;
+								bottom: -2%;
 								.left {
 									width: 60px;
 									display: block;

src/views/dataEntry_manage/chartSetting.vue

@@ -2913,7 +2913,7 @@ export default {
                     justify-content: space-between;
                     top: auto;
                     right: 0;
-                    bottom: -3%;
+                    bottom: -2%;
                     .left {
                       width: 60px;
                       display: block;

src/views/dataEntry_manage/components/addMarkerDialog.vue

@@ -18,6 +18,7 @@
         ref="formRef"
         :model="markerForm"
         :rules="formRules"
+        hide-required-asterisk
       >
           <el-form-item label="选择坐标轴" prop="axis">
             <el-select 
@@ -78,20 +79,23 @@
                 :key="item.value" 
                 :label="item.label" 
                 :value="item.value"
-              />
+              >
+                <svg width="60" height="10" viewBox="0 0 60 10" fill="none" xmlns="http://www.w3.org/2000/svg" v-html="item.svg"></svg>
+              </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="颜色" prop="color">
+          <el-form-item label="颜色" prop="color" style="margin-bottom:8px;">
             <el-color-picker
               v-model="markerForm.color"
-              show-alpha
               :predefine="predefineColors"
+              show-alpha
+              style="width: 90px"
             />
           </el-form-item>
           <el-form-item label="粗细" prop="lineWidth">
             <el-input
               v-model="markerForm.lineWidth"
-              style="width: 100px"
+              style="width: 90px"
               type="number"
               :min="1"
             />
@@ -116,17 +120,18 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="文本颜色" prop="textColor">
+          <el-form-item label="文本颜色" prop="textColor" style="margin-bottom:8px;">
             <el-color-picker
               v-model="markerForm.textColor"
               show-alpha
               :predefine="predefineColors"
+              style="width: 90px"
             />
           </el-form-item>
           <el-form-item label="文本字号" prop="textFontSize">
             <el-input
               v-model="markerForm.textFontSize"
-              style="width: 100px"
+              style="width: 90px"
               type="number"
               :min="1"
             />
@@ -201,8 +206,8 @@ export default {
         axis:1,
         value: '',
         lineWidth: 1,
-        dashStyle: 'Solid',
-        color: defaultOpts.colors[0],
+        dashStyle: 'ShortDashDot',
+        color: '#999',
         text: '',
         textPostion: 'top',
         textColor: defaultOpts.colors[0],
@@ -216,9 +221,9 @@ export default {
       },
 
       dashOptions: [
-        { label: '实线',value: 'Solid' },
-        { label: '长虚线点',value: 'LongDashDot' },
-        { label: '短虚线点',value: 'ShortDashDot' },
+        { label: '实线',value: 'Solid',svg:`<g clip-path="url(#clip0_2634_4692)"><rect x="-14" y="4" width="116" height="2" fill="#333333"/></g><defs><clipPath id="clip0_2634_4692"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
+        { label: '长虚线点',value: 'LongDashDot',svg:`<g clip-path="url(#clip0_2634_4933)"><circle cy="5" r="1" fill="#333333"/><rect x="2" y="4" width="13" height="2" rx="1" fill="#333333"/><circle cx="17" cy="5" r="1" fill="#333333"/><rect x="19" y="4" width="13" height="2" rx="1" fill="#333333"/><circle cx="34" cy="5" r="1" fill="#333333"/><rect x="36" y="4" width="13" height="2" rx="1" fill="#333333"/><circle cx="51" cy="5" r="1" fill="#333333"/><rect x="53" y="4" width="13" height="2" rx="1" fill="#333333"/><circle cx="68" cy="5" r="1" fill="#333333"/><rect x="70" y="4" width="13" height="2" rx="1" fill="#333333"/><circle cx="85" cy="5" r="1" fill="#333333"/><rect x="87" y="4" width="13" height="2" rx="1" fill="#333333"/></g><defs><clipPath id="clip0_2634_4933"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
+        { label: '短虚线点',value: 'ShortDashDot',svg:`<g clip-path="url(#clip0_2634_4756)"><rect x="1" y="4" width="2" height="2" fill="#333333"/><rect x="4" y="4" width="5" height="2" fill="#333333"/><rect x="10" y="4" width="2" height="2" fill="#333333"/><rect x="13" y="4" width="5" height="2" fill="#333333"/><rect x="19" y="4" width="2" height="2" fill="#333333"/><rect x="22" y="4" width="5" height="2" fill="#333333"/><rect x="28" y="4" width="2" height="2" fill="#333333"/><rect x="31" y="4" width="5" height="2" fill="#333333"/><rect x="37" y="4" width="2" height="2" fill="#333333"/><rect x="40" y="4" width="5" height="2" fill="#333333"/><rect x="46" y="4" width="2" height="2" fill="#333333"/><rect x="49" y="4" width="5" height="2" fill="#333333"/><rect x="55" y="4" width="2" height="2" fill="#333333"/><rect x="58" y="4" width="5" height="2" fill="#333333"/><rect x="64" y="4" width="2" height="2" fill="#333333"/><rect x="67" y="4" width="5" height="2" fill="#333333"/><rect x="73" y="4" width="2" height="2" fill="#333333"/><rect x="76" y="4" width="5" height="2" fill="#333333"/><rect x="82" y="4" width="2" height="2" fill="#333333"/><rect x="85" y="4" width="5" height="2" fill="#333333"/></g><defs><clipPath id="clip0_2634_4756"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
       ],
     }
   },
@@ -227,6 +232,10 @@ export default {
   },
   methods:{
 
+    initData() {
+
+    },
+
     async saveMarker() {
       await this.$refs.formRef.validate()
 
@@ -234,6 +243,7 @@ export default {
     },
    
     cancelHandle() {
+      this.$refs.formRef.resetFields();
       this.$emit('update:isShow',false)
     }
   },
@@ -244,9 +254,13 @@ export default {
   padding-left: 20%;
 }
 .bottom {
-  
   margin: 30px 0;
   display: flex;
   justify-content: center;
 }
 </style>
+<style lang="scss">
+.marker-edit-dialog {
+  .el-color-picker__trigger { width: 100%;padding: 0;border-radius: 4px; }
+}
+</style>

src/views/dataEntry_manage/components/markersSection.vue

@@ -94,7 +94,8 @@
 
     <!-- 图表说明弹窗 -->
     <m-dialog
-      :title="'添加图表说明'" 
+      :title="'添加图表说明'"
+      class="marker-edit-dialog"
       :show.sync="chartinductionDiaForm.show" 
       width="650px"
     >
@@ -110,16 +111,17 @@
               placeholder="请输入内容"
             />
           </el-form-item>
-          <el-form-item label="颜色">
+          <el-form-item label="颜色" style="margin-bottom:8px;">
             <el-color-picker
               v-model="chartinductionDiaForm.color"
               show-alpha
+              style="width:90px"
             />
           </el-form-item>
           <el-form-item label="字号">
             <el-input
               v-model="chartinductionDiaForm.fontSize"
-              style="width: 100px"
+              style="width: 90px"
               type="number"
               :min="1"
             />

src/views/dataEntry_manage/editChart.vue

@@ -120,13 +120,6 @@
 						/>
 					</el-form-item>
 					<el-form-item label="图表单位" prop="Unit" v-if="chartInfo.ChartType===7">
-						<!-- <el-input
-							v-model="chartInfo.Unit"
-							style="width: 90%"
-							placeholder="请输入图表单位"
-							clearable
-							@change="changeUnit"
-						/> -->
 						<el-select
 							v-model="chartInfo.Unit"
 							filterable
@@ -340,6 +333,12 @@
 						@getData="getSectionScatterData"
 						@modifySeriesName="IsNameDefault = false"
 					/>
+
+					<!-- 标识区 标记线 图表说明 -->
+					<markersSection
+						v-if="tableData.length"
+						:chartType="chartInfo.ChartType"
+					/>
         </div>
 			</div>
       <span
@@ -483,21 +482,37 @@
 								</div>
 							</template>
 						</div>
-						<span class="chart-author"
-							>作者:{{ chartInfo.SysUserRealName }}</span
-						>
 
-						<!-- 公历农历切换 只用于季节性图 -->
-						<el-radio-group
-							v-model="calendar_type"
-							class="calendar-cont"
-							v-if="chartInfo.ChartType === 2"
-							@change="getPreviewSplineInfo"
-						>
-							<el-radio-button label="公历" />
-							<el-radio-button label="农历" />
-						</el-radio-group>
-					</div>
+						<div class="chart-bottom-info">
+
+							<div class="chart-source">
+								<span>数据来源:{{chartInfo.SourcesFrom}}</span>
+								<el-switch
+									v-model="chartInfo.SourcesFromDisabled"
+									:active-value="1"
+									:inactive-value="0"
+									style="margin:0 15px;"
+								/>
+								<span class="editsty">编辑</span>
+							</div>
+
+							<!-- 公历农历切换 只用于季节性图 -->
+							<el-radio-group
+								v-model="calendar_type"
+								class="calendar-cont"
+								v-if="chartInfo.ChartType === 2"
+								@change="getPreviewSplineInfo"
+							>
+								<el-radio-button label="公历" />
+								<el-radio-button label="农历" />
+							</el-radio-group>
+
+							<!-- 图表说明 -->
+							<div class="chart-instruction" v-text="chartInfo.Instructions"></div>
+						</div>
+
+						<span class="chart-author">作者:{{ chartInfo.SysUserRealName }}</span>
+					</div>	
 
 					<!-- 异常显示 -->
           <p class="error-tip" style="min-height: 400px" v-if="chartInfo.WarnMsg">{{chartInfo.WarnMsg}}</p>
@@ -595,9 +610,9 @@ import SaveChartOther from './components/SaveChartOther';
 import barOption from './components/barOptionSection.vue';
 import sectionalScatterOption from './components/sectionalScatterOption.vue';
 import LegendEditDia from './components/LegendEditDia.vue';
-
+import markersSection from './components/markersSection.vue';
 export default {
-  components: { Chart,DateChooseDia,SaveChartOther,barOption,sectionalScatterOption,LegendEditDia },
+  components: { Chart,DateChooseDia,SaveChartOther,barOption,sectionalScatterOption,LegendEditDia,markersSection },
 	directives: {
     drag(el, bindings) {
       el.onmousedown = function (e) {
@@ -1102,7 +1117,7 @@ export default {
 				}
 				/* =================== */
 				.chart-show-cont {
-					padding: 0 150px 20px 120px;
+					padding: 0 150px 60px 120px;
 					position: relative;
 					.chart-title {
 						font-size: 16px;
@@ -1141,7 +1156,7 @@ export default {
 								justify-content: space-between;
 								top: auto;
 								right: 0;
-								bottom: -3%;
+								bottom: -2%;
 								.left {
 									width: 60px;
 									display: block;
@@ -1167,6 +1182,25 @@ 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/chartPublic.js

@@ -792,106 +792,55 @@ export const chartSetMixin = {
 
       let seasonYdata = [],
         seasonData = [];
-        /* 公历数据处理 处理数据列 y轴 */
-        // if (this.calendar_type === '公历')
-        for (let j of chartDataHandle) {
-          //预测指标配置
-          let predict_params =  chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
-          
-          let serie_item = {
-            data: [],
-            type: chartData.ChartStyle,
-            yAxis: 0,
-            name: this.isPredictorChart?j.Year:j.ChartLegend,
-            ...predict_params
-          };
-          const data_array = this.calendar_type === '农历' && this.isPredictorChart?_.cloneDeep(j.Items):_.cloneDeep(j.DataList);
-          data_array &&
-            data_array.forEach((item) => {
-              serie_item.data.push([item.DataTimestamp, item.Value]);
-            });
-          const index = chartDataHandle.findIndex(
-            (item) => this.isPredictorChart?item.Year === j.Year:item.ChartLegend === j.ChartLegend
-          );
-          const s_yItem = {
-            labels: {
-              formatter: function () {
-                let val = this.value;
-                return index !== 0 ? '' : val;
-              },
-              align: 'center',
-            },
-            title: {
-              text:  `${chartData.Unit}`,
-              textCh:chartData.Unit, // 中文
-              // 中文不存在，无论英文有无都显示空
-              textEn:chartData.UnitEn||chartData.Unit, // 英文
-              style:{},
-              styleEn:{}, // 英文样式
-              // text:  null,
-              align: 'high',
-              rotation: 0,
-              y: -15,
-              offset: -(12 * chartData.Unit.length),
-            },
-            max: Number(chartData.MaxData),
-            min: Number(chartData.MinData),
-            ...seasonOptions.yAxis,
-          };
-          seasonData.push(serie_item);
-          seasonYdata.push(s_yItem);
-        }
 
-      // /* 农历数据处理  */
-      // let filterArr =
-      //   this.calendar_type === '农历'
-      //     ? chartData.DataList.filter((item, index) => index > 0)
-      //     : [];
-      // if (this.calendar_type === '农历')
-      //   for (let j of filterArr) {
-      //      //预测指标配置
-      //     let predict_params =  chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
-
-      //     let serie_item = {
-      //       data: [],
-      //       type: chartData.ChartStyle,
-      //       yAxis: 0,
-      //       name: j.ChartLegend,
-      //       ...predict_params
-      //     };
-      //     const data_array = _.cloneDeep(j.DataList);
-      //     data_array &&
-      //       data_array.forEach((item) => {
-      //         serie_item.data.push([item.DataTimestamp, item.Value]);
-      //       });
-      //     const index = filterArr.findIndex((item) => item.ChartLegend === j.ChartLegend);
-      //     const s_yItem = {
-      //       labels: {
-      //         formatter: function () {
-      //           let val = this.value;
-      //           return index !== 0 ? '' : val;
-      //         },
-      //         align: 'center',
-      //       },
-      //       title: {
-      //         text:  `${chartData.Unit}`,
-      //         textCh:chartData.Unit, // 中文
-      //         // 中文不存在，无论英文有无都显示空
-      //         textEn:chartData.UnitEn||chartData.Unit, // 英文
-      //         styleEn:{}, // 英文样式
-      //         // text:  null,
-      //         align: 'high',
-      //         rotation: 0,
-      //         y: -15,
-      //         offset: -(12 * chartData.Unit.length),
-      //       },
-      //       max: Number(chartData.MaxData),
-      //       min: Number(chartData.MinData),
-      //       ...seasonOptions.yAxis,
-      //     };
-      //     seasonData.push(serie_item);
-      //     seasonYdata.push(s_yItem);
-      //   }
+      //数据列
+      for (let j of chartDataHandle) {
+        //预测指标配置
+        let predict_params =  chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
+        
+        let serie_item = {
+          data: [],
+          type: chartData.ChartStyle,
+          yAxis: 0,
+          name: this.isPredictorChart?j.Year:j.ChartLegend,
+          ...predict_params
+        };
+        const data_array = this.calendar_type === '农历' && this.isPredictorChart?_.cloneDeep(j.Items):_.cloneDeep(j.DataList);
+        data_array && data_array.forEach((item) => {
+          serie_item.data.push([item.DataTimestamp, item.Value]);
+        });
+        seasonData.push(serie_item);
+      }
+
+      //y轴
+      seasonYdata = [{
+        ...seasonOptions.yAxis,
+        labels: {
+          formatter: function () {
+            let val = this.value;
+            return val;
+          },
+          align: 'center',
+        },
+        title: {
+          text:  `${chartData.Unit}`,
+          textCh:chartData.Unit, // 中文
+          // 中文不存在，无论英文有无都显示空
+          textEn:chartData.UnitEn||chartData.Unit, // 英文
+          style:{},
+          styleEn:{}, // 英文样式
+          // text:  null,
+          align: 'high',
+          rotation: 0,
+          y: -15,
+          x: 0,
+          textAlign: 'left',
+          reserveSpace: false
+        },
+        max: Number(chartData.MaxData),
+        min: Number(chartData.MinData),
+      }];
+
       /* x轴显示月日  提示框显示月日*/
       defaultOpts.xAxis.labels = {
         formatter: function () {
@@ -910,49 +859,10 @@ export const chartSetMixin = {
         },
         xDateFormat: '%m/%d',
       }
-      let rangeSelector =
-        this.calendar_type === '农历' && this.isPredictorChart
-          ? {
-              enabled: true,
-              selected: 0,
-              inputStyle: {
-                display: 'none',
-              },
-              labelStyle: {
-                display: 'none',
-              },
-              buttonTheme: {
-                style: {
-                  display: 'none',
-                },
-              },
-              buttons: [
-                {
-                  type: 'month',
-                  count: 12,
-                  text: '12月',
-                },
-                {
-                  type: 'month',
-                  count: 15,
-                  text: '15月',
-                },
-                {
-                  type: 'all',
-                  text: '全部',
-                  type: 'all',
-                },
-              ],
-            }
-          : {
-              enabled: false,
-            };
-
       this.options = {
         colors:seasonOptions.colors.slice(-chartDataHandle.length),
         series: seasonData,
         yAxis: seasonYdata,
-        rangeSelector,
         tooltip
       };
       if(this.currentLang=='en') this.changeOptions()

src/views/ppt_manage/mixins/mixins.js

@@ -364,115 +364,56 @@ export default {
       temChartDataList.filter((item, index) => index > 0):
       temChartDataList
       let seasonYdata = [],
-        seasonData = [],
-        chart = {
-          spacing: [5, 8, 2, 8],
-        };
+        seasonData = []
 
-      /* 公历数据处理 处理数据列 y轴 */
-      // if (this.chartInfo.Calendar === '公历')
-        for (let j of chartDataHandle) {
-           //预测指标配置
-          let predict_params =  chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
-
-          let serie_item = {
-            data: [],
-            type: chartData.ChartStyle,
-            yAxis: 0,
-            name: j.ChartLegend,
-            ...predict_params
-          };
-          const data_array = _.cloneDeep(j.DataList);
-          data_array &&
-            data_array.forEach((item) => {
-              serie_item.data.push([item.DataTimestamp, item.Value]);
-            });
-          const index = chartDataHandle.findIndex(
-            (item) => item.ChartLegend === j.ChartLegend
-          );
-          const s_yItem = {
-            title: {
-              text:  `${chartData.Unit}`,
-              textCh:chartData.Unit,
-              textEn:chartData.Unit?chartData.UnitEn:'',
-              // text: null,
-              align: 'high',
-              rotation: 0,
-              y: -15,
-              offset: -(12 * chartData.Unit.length),
-            },
-            labels: {
-              formatter: function (ctx) {
-                let val = ctx.value;
-                return index !== 0 ? '' : val;
-              },
-              align: 'center',
-              style: {
-                fontSize: '10px',
-              },
-              x: -5,
-            },
-            max: Number(chartData.MaxData),
-            min: Number(chartData.MinData),
-            ...seasonOptions.yAxis,
-          };
-          seasonData.push(serie_item);
-          seasonYdata.push(s_yItem);
-        }
+      //数据列
+      for (let j of chartDataHandle) {
+          //预测指标配置
+        let predict_params =  chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
 
-      /* 农历数据处理  */
-      // let filterArr =
-      //   this.chartInfo.Calendar === '农历'
-      //     ? chartData.DataList.List.filter((item, index) => index > 0)
-      //     : [];
-      // if (this.chartInfo.Calendar === '农历')
-      //   for (let j of filterArr) {
-      //      //预测指标配置
-      //     let predict_params =  chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
-          
-      //     let serie_item = {
-      //       data: [],
-      //       type: chartData.ChartStyle,
-      //       yAxis: 0,
-      //       name: j.Year,
-      //       ...predict_params
-      //     };
-      //     const data_array = _.cloneDeep(j.Items);
-      //     data_array &&
-      //       data_array.forEach((item) => {
-      //         serie_item.data.push([item.DataTimestamp, item.Value]);
-      //       });
-      //     const index = filterArr.findIndex((item) => item.Year === j.Year);
-
-      //     const s_yItem = {
-      //       title: {
-      //         text:  `${chartData.Unit}`,
-      //         textCh:chartData.Unit,
-      //         textEn:chartData.Unit?chartData.UnitEn:'',
-      //         // text: null,
-      //         align: 'high',
-      //         rotation: 0,
-      //         y: -15,
-      //         offset: -(12 * chartData.Unit.length),
-      //       },
-      //       labels: {
-      //         formatter: function (ctx) {
-      //           let val = ctx.value;
-      //           return index !== 0 ? '' : val;
-      //         },
-      //         align: 'center',
-      //         style: {
-      //           fontSize: '10px',
-      //         },
-      //         x: -5,
-      //       },
-      //       max: Number(chartData.MaxData),
-      //       min: Number(chartData.MinData),
-      //       ...seasonOptions.yAxis,
-      //     };
-      //     seasonData.push(serie_item);
-      //     seasonYdata.push(s_yItem);
-      //   }
+        let serie_item = {
+          data: [],
+          type: chartData.ChartStyle,
+          yAxis: 0,
+          name: j.ChartLegend,
+          ...predict_params
+        };
+        const data_array = _.cloneDeep(j.DataList);
+        data_array &&
+          data_array.forEach((item) => {
+            serie_item.data.push([item.DataTimestamp, item.Value]);
+          });
+        seasonData.push(serie_item);
+      }
+
+      //y轴
+      seasonYdata = [{
+        ...seasonOptions.yAxis,
+        labels: {
+          formatter: function () {
+            let val = this.value;
+            return val;
+          },
+          align: 'center',
+        },
+        title: {
+          text:  `${chartData.Unit}`,
+          textCh:chartData.Unit, // 中文
+          // 中文不存在，无论英文有无都显示空
+          textEn:chartData.UnitEn||chartData.Unit, // 英文
+          style:{},
+          styleEn:{}, // 英文样式
+          // text:  null,
+          align: 'high',
+          rotation: 0,
+          y: -15,
+          x: 0,
+          textAlign: 'left',
+          reserveSpace: false
+        },
+        max: Number(chartData.MaxData),
+        min: Number(chartData.MinData),
+      }];
 
       // 季节图x轴显示月/日 周度指标额外处理时间轴显示
       const xAxis = {
@@ -487,10 +428,8 @@ export default {
         },
       };
 
-      // 季节图提示框显示 月/日
-      defaultOpts.tooltip = {
-        split: false,
-        shared: true,
+      const tooltip = {
+        ...defaultOpts.tooltip,
         dateTimeLabelFormats: {
           // 时间格式化字符
           day: '%m/%d',
@@ -499,53 +438,14 @@ export default {
           year: '%m/%d',
         },
         xDateFormat: '%m/%d',
-        valueDecimals: 2,
-      };
-
-      //农历默认选中一年数据并隐藏按钮  公历显示全部数据
-      // let rangeSelector =
-      //   this.chartInfo.Calendar === '农历'
-      //     ? {
-      //         enabled: true,
-      //         selected: 0,
-      //         inputStyle: {
-      //           display: 'none',
-      //         },
-      //         labelStyle: {
-      //           display: 'none',
-      //         },
-      //         buttonTheme: {
-      //           style: {
-      //             display: 'none',
-      //           },
-      //         },
-      //         buttons: [
-      //           {
-      //             type: 'month',
-      //             count: 12,
-      //             text: '12月',
-      //           },
-      //           {
-      //             type: 'month',
-      //             count: 15,
-      //             text: '15月',
-      //           },
-      //           {
-      //             type: 'all',
-      //             text: '全部',
-      //           },
-      //         ],
-      //       }
-      //     : {
-      //         enabled: false,
-      //       };
+      }
 
       this.options = {
         colors:seasonOptions.colors.slice(-chartDataHandle.length),
         series: seasonData,
         yAxis: seasonYdata,
         xAxis,
-        // rangeSelector
+        tooltip
       };
     },
 

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

@@ -9,20 +9,75 @@ export const chartTypeOpts = [
   { label: '季节性图', value: 2 },
   { label: '堆积柱状图', value: 3 },
   { label: '散点图', value: 4 },
-  { label: '柱形图', value: 5 },
-  { label: '截面散点图', value: 6 },
-  { label: '统计分析', value: 7 },
-  { label: '商品价格曲线', value: 8 },
+  { label: '组合图', value: 5 },
+  { label: '柱形图', value: 6 },
+  { label: '截面散点图', value: 7 },
+  // { label: '统计分析', value: 8 },
+  // { label: '商品价格曲线', value: 9 },
 ]
 
 //可选线条样式
 export const lineStylesOpts = [
-  { label: '',value: 'Solid' },
-  { label: '',value: 'LongDash' },
-  { label: '',value: 'ShortDash' },
-  { label: '',value: 'Dash' },
-  { label: '',value: 'Dot' },
-  { label: '',value: 'DashDot' },
+  { value: 'Solid',svg:`<g clip-path="url(#clip0_2634_4692)"><rect x="-14" y="4" width="116" height="2" fill="#333333"/></g>
+  <defs><clipPath id="clip0_2634_4692"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
+  { value: 'LongDash',svg:`<g clip-path="url(#clip0_2634_4883)">
+  <rect x="-4.5" y="4" width="13" height="2" rx="1" fill="#333333"/>
+  <rect x="9.5" y="4" width="13" height="2" rx="1" fill="#333333"/>
+  <rect x="23.5" y="4" width="13" height="2" rx="1" fill="#333333"/>
+  <rect x="37.5" y="4" width="13" height="2" rx="1" fill="#333333"/>
+  <rect x="51.5" y="4" width="13" height="2" rx="1" fill="#333333"/>
+  <rect x="65.5" y="4" width="13" height="2" rx="1" fill="#333333"/>
+  <rect x="79.5" y="4" width="13" height="2" rx="1" fill="#333333"/></g><defs><clipPath id="clip0_2634_4883"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
+  { value: 'ShortDash',svg:`<g clip-path="url(#clip0_2634_4865)">
+  <rect x="-0.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="6.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="13.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="20.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="27.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="34.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="41.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="48.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="55.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="62.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="69.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="76.5" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <rect x="83.5" y="4" width="5" height="2" rx="1" fill="#333333"/></g><defs><clipPath id="clip0_2634_4865"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
+  { value: 'Dash',svg:`<g clip-path="url(#clip0_2634_4706)">
+  <rect x="-0.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="6.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="13.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="20.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="27.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="34.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="41.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="48.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="55.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="62.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="69.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="76.5" y="4" width="5" height="2" fill="#333333"/>
+  <rect x="83.5" y="4" width="5" height="2" fill="#333333"/></g><defs><clipPath id="clip0_2634_4706"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
+  { value: 'Dot',svg:`<g clip-path="url(#clip0_2634_4843)"><circle cx="2" cy="5" r="1" fill="#333333"/><circle cx="8" cy="5" r="1" fill="#333333"/><circle cx="14" cy="5" r="1" fill="#333333"/><circle cx="20" cy="5" r="1" fill="#333333"/><circle cx="26" cy="5" r="1" fill="#333333"/><circle cx="32" cy="5" r="1" fill="#333333"/><circle cx="38" cy="5" r="1" fill="#333333"/><circle cx="44" cy="5" r="1" fill="#333333"/><circle cx="50" cy="5" r="1" fill="#333333"/><circle cx="56" cy="5" r="1" fill="#333333"/><circle cx="62" cy="5" r="1" fill="#333333"/><circle cx="68" cy="5" r="1" fill="#333333"/><circle cx="74" cy="5" r="1" fill="#333333"/><circle cx="80" cy="5" r="1" fill="#333333"/><circle cx="86" cy="5" r="1" fill="#333333"/></g><defs><clipPath id="clip0_2634_4843"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
+  { value: 'DashDot',svg:`<g clip-path="url(#clip0_2634_4893)">
+  <circle cx="2" cy="5" r="1" fill="#333333"/>
+  <rect x="4" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="11" cy="5" r="1" fill="#333333"/>
+  <rect x="13" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="20" cy="5" r="1" fill="#333333"/>
+  <rect x="22" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="29" cy="5" r="1" fill="#333333"/>
+  <rect x="31" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="38" cy="5" r="1" fill="#333333"/>
+  <rect x="40" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="47" cy="5" r="1" fill="#333333"/>
+  <rect x="49" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="56" cy="5" r="1" fill="#333333"/>
+  <rect x="58" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="65" cy="5" r="1" fill="#333333"/>
+  <rect x="67" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="74" cy="5" r="1" fill="#333333"/>
+  <rect x="76" y="4" width="5" height="2" rx="1" fill="#333333"/>
+  <circle cx="83" cy="5" r="1" fill="#333333"/>
+  <rect x="85" y="4" width="5" height="2" rx="1" fill="#333333"/></g><defs><clipPath id="clip0_2634_4893"><rect width="88" height="10" fill="white"/></clipPath></defs>` },
 ]
 
 //垂直位置 上中下
@@ -40,22 +95,18 @@ export const alignPositions = [
 
 /* 当做标准化结构  eta默认值 几种类型图样式还区分开...*/
 export const defaultETAOptions = {
-  colorsOptions: defaultOpts.colors.slice(0,11),
+  colorsOptions: defaultOpts.colors.slice(0,10),
   lineOptions: { 
     dashStyle: 'Solid',
     lineWidth: 2,
-    isSpline: 1
-  },
-  scatterOptions: {
-    radius: 5
+    isSpline: 1,
+    radius: 5,
   },
   legendOptions: {
     verticalAlign: 'top',
     itemStyle: {
       color: '#333',
       fontSize: 12,
-      // cursor: "pointer",
-      // fontWeight: "bold"
     }
   },
   titleOptions: {

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

@@ -2,71 +2,92 @@
   <div class="charTheme-setting-option">
     <ul class="options-wrapper">
       <li v-for="key in Object.keys(themeOptions)" :key="key">
-        <label>{{labelMap.get(key)}}</label>
+        <label class="option-title">{{ key ==='lineOptions'?typeLabelMap[chartType].label:labelMap.get(key)}}</label>
         
           <ul class="option-list">
              <!-- 线条设置 -->
             <template v-if="key==='lineOptions'">
                 <li class="option-item">
                   <label class="el-form-item__label">颜色</label>
-                  <!-- <el-color-picker
+                  <el-color-picker
                     v-model="themeOptions[key].colors[themeOptions[key].colorIndex]"
                     show-alpha
                     :predefine="predefineColors"
                     style="width: 90px"
-                  /> -->
+                    @change="changeLineColor"
+                  />
                 </li>
                 <li class="option-item">
                   <label class="el-form-item__label">顺序</label>
-                  <!-- <el-select 
+                  <el-select 
                     v-model="themeOptions[key].colorIndex"
                     style="width: 90px"
                   >
                     <el-option 
                       v-for="(item,index) in themeOptions[key].colors" 
                       :key="index"
-                      :label="`第${index+1}根`"
+                      :label="`第${index+1}${typeLabelMap[chartType].lineLabel}`"
                       :value="index"
                     />
-                  </el-select> -->
-                </li>
-                <li class="option-item">
-                  <label class="el-form-item__label">线型</label>
-                  <el-select 
-                    v-model="themeOptions[key].dashStyle"
-                    style="width: 90px"
-                  >
-                    <el-option 
-                      v-for="item in lineStylesOpts" 
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    />
-                  </el-select>
-                </li>
-                <li class="option-item">
-                  <label class="el-form-item__label">粗细</label>
-                  <el-input
-                    v-model="themeOptions[key].lineWidth"
-                    style="width: 90px"
-                    type="number"
-                    :min="1"
-                  />
-                </li>
-                <li class="option-item">
-                  <label class="el-form-item__label">平滑线</label>
-                  <el-select 
-                    v-model="themeOptions[key].isSpline"
-                    style="width: 90px"
-                  >
-                    <el-option label="是" :value="1"/>
-                    <el-option label="否" :value="0"/>
                   </el-select>
                 </li>
+
+                <!-- 曲线额外配置 -->
+                <template v-if="[1,2].includes(chartType)">
+                  <li class="option-item">
+                    <label class="el-form-item__label">线型</label>
+                    <el-select 
+                      v-model="themeOptions[key].dashStyle"
+                      style="width: 90px"
+                    >
+                      <el-option 
+                        v-for="item in lineStylesOpts" 
+                        :key="item.value"
+                        :value="item.value"
+                        :label="item.label"
+                      >
+                        <svg width="60" height="10" viewBox="0 0 60 10" fill="none" xmlns="http://www.w3.org/2000/svg" v-html="item.svg">
+                        </svg>
+                      </el-option>
+                    </el-select>
+                  </li>
+                  <li class="option-item">
+                    <label class="el-form-item__label">粗细</label>
+                    <el-input
+                      v-model="themeOptions[key].lineWidth"
+                      style="width: 90px"
+                      type="number"
+                      :min="1"
+                    />
+                  </li>
+                  <li class="option-item">
+                    <label class="el-form-item__label">平滑线</label>
+                    <el-select 
+                      v-model="themeOptions[key].isSpline"
+                      style="width: 90px"
+                    >
+                      <el-option label="是" :value="1"/>
+                      <el-option label="否" :value="0"/>
+                    </el-select>
+                  </li>
+                </template>
+                
+                <!-- 散点额外配置 -->
+                <template v-else-if="[4,7].includes(chartType)">
+                  <li class="option-item">
+                    <label class="el-form-item__label">大小</label>
+                    <el-input
+                      v-model="themeOptions[key].radius"
+                      style="width: 90px"
+                      type="number"
+                      :min="3"
+                    />
+                  </li>
+                </template>
             </template>
 
              <!-- 图例设置 -->
-            <template v-if="key==='legendOptions'">
+            <template v-else-if="key==='legendOptions'">
                 <li class="option-item">
                   <label class="el-form-item__label">颜色</label>
                   <el-color-picker
@@ -102,7 +123,7 @@
             </template>
             
             <!-- 标题设置 -->
-            <template v-if="key==='titleOptions'">
+            <template v-else-if="key==='titleOptions'">
                 <li class="option-item">
                   <label class="el-form-item__label">颜色</label>
                   <el-color-picker
@@ -137,7 +158,7 @@
             </template>
 
             <!-- 标记文字 横轴 纵轴设置 -->
-            <template v-if="['markerOptions','xAxisOptions','yAxisOptions'].includes(key)">
+            <template v-else-if="['markerOptions','xAxisOptions','yAxisOptions'].includes(key)">
                 <li class="option-item">
                   <label class="el-form-item__label">颜色</label>
                   <el-color-picker
@@ -159,7 +180,7 @@
             </template>  
 
             <!-- 绘图区设置 -->
-            <template v-if="key==='drawOption'">
+            <template v-else-if="key==='drawOption'">
                 <li class="option-item">
                   <label class="el-form-item__label">背景色</label>
                   <el-color-picker
@@ -177,8 +198,12 @@
 </template>
 <script>
 import { defaultETAOptions,verticalPositions,predefineColors,lineStylesOpts,alignPositions } from '../common/config'
-console.log(defaultETAOptions)
 export default {
+  props: {
+    chartType: {
+      type:Number
+    }
+  },
   data() {
     return {
       predefineColors,
@@ -186,19 +211,35 @@ export default {
       alignPositions,
      /* 可配置options*/
       themeOptions: {
-          lineOptions: {
-            colors: defaultETAOptions.colorsOptions,
-            dashStyle: defaultETAOptions.lineOptions.dashStyle,
-            color: defaultETAOptions.colorsOptions[0],
-            colorIndex:0,
-            lineWidth: defaultETAOptions.lineOptions.lineWidth,
-            isSpline: defaultETAOptions.lineOptions.isSpline
-          },
-          ...defaultETAOptions
+        lineOptions: {
+          dashStyle: defaultETAOptions.lineOptions.dashStyle,
+          colors: defaultETAOptions.colorsOptions,
+          color: defaultETAOptions.colorsOptions[0],
+          colorIndex:0,
+          lineWidth: defaultETAOptions.lineOptions.lineWidth,
+          isSpline: defaultETAOptions.lineOptions.isSpline,
+          radius: defaultETAOptions.lineOptions.radius,
+        },
+        legendOptions: defaultETAOptions.legendOptions,
+        titleOptions: defaultETAOptions.titleOptions,
+        markerOptions: defaultETAOptions.markerOptions,
+        xAxisOptions: defaultETAOptions.xAxisOptions,
+        yAxisOptions: defaultETAOptions.yAxisOptions,
+        drawOption: defaultETAOptions.drawOption
       },
       lengendPositions: verticalPositions.filter(_ => _.value!=='middle'),
+      typeLabelMap: {
+        1: {label:'线条设置',lineLabel: '条'},
+        2: {label:'线条设置',lineLabel: '条'},
+        3: {label:'柱形设置',lineLabel: '根'},
+        4: {label:'散点设置',lineLabel: '系列'},
+        5: {label:'线条、柱形设置',lineLabel: '系列'},
+        6: {label:'柱形设置',lineLabel: '根'},
+        7: {label:'散点设置',lineLabel: '系列'},
+      },
       labelMap: new Map([
         ['lineOptions','线条设置'],
+        ['scatterOptions','散点设置'],
         ['legendOptions','图例设置'],
         ['titleOptions','标题设置'],
         ['markerOptions','标记文字设置(来源，标识)'],
@@ -210,7 +251,6 @@ export default {
     }
   },
   mounted(){
-
   },
   methods:{
 
@@ -228,6 +268,17 @@ export default {
       margin: 10px 0;
     }
   }
+  .option-title{
+    position: relative;
+    &:before {
+      content: "*";
+      font-size: 18px;
+      color: #f00;
+      position: absolute;
+      left: -10px;
+      top: 2px;
+    }
+  }
   .el-form-item__label {
     width: 70px;
     text-align: left;

src/views/system_manage/chartTheme/themeSetting.vue

@@ -21,7 +21,7 @@
         </el-select>
       </div>
       <div>
-        <el-button type="primary" plain>取消</el-button>
+        <el-button type="primary" plain @click="$router.go(-1)">取消</el-button>
         <el-button type="primary" @click="setThemeOptions">保存</el-button>
       </div>
     </div> 
@@ -66,8 +66,26 @@ export default {
   methods:{
     /* 保存配置 处理成标准化结构 */
     setThemeOptions() {
-      console.log(this.$refs.optionsSectionRef.chartCanSetOptions)
+      console.log(this.$refs.optionsSectionRef.themeOptions)
       //
+      const { lineOptions,legendOptions,titleOptions,markerOptions,xAxisOptions,yAxisOptions,drawOption } = this.$refs.optionsSectionRef.themeOptions;
+      
+      let options = {
+        colorsOptions: lineOptions.colors,
+        lineOptions: { 
+          dashStyle: lineOptions.dashStyle,
+          lineWidth: lineOptions.lineWidth,
+          isSpline: lineOptions.isSpline,
+          radius: lineOptions.radius,
+        },
+        legendOptions,
+        titleOptions,
+        markerOptions,
+        xAxisOptions,
+        yAxisOptions,
+        drawOption
+      }
+      console.log(options)
     }
   },
 }