diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js
index 62d8273d..4454041d 100644
--- a/report-ui/src/mixins/queryform.js
+++ b/report-ui/src/mixins/queryform.js
@@ -139,6 +139,7 @@ export default {
         const seriesData = [];
         const value = chartProperties[key];
         obj["type"] = value;
+        obj["name"] = key;
         for (let i = 0; i < data.length; i++) {
           if (value.startsWith("xAxis")) {
             // 代表为x轴
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
index eb7b110c..d7f401c5 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
@@ -170,6 +170,88 @@ export const widgetBarchart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: 'top'
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: 'horizontal'
+            },
+          ],
+        },
         {
           name: 'X轴设置',
           list: [
@@ -484,79 +566,6 @@ export const widgetBarchart = {
             },
           ],
         },
-        {
-          name: '图例操作',
-          list: [
-            {
-              type: 'el-switch',
-              label: '图例',
-              name: 'isShowLegend',
-              required: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'lengedColor',
-              required: false,
-              placeholder: '',
-              value: '#fff',
-            },
-            {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'lengedFontSize',
-              required: false,
-              placeholder: '',
-              value: 16,
-            },
-            {
-              type: 'el-input-number',
-              label: '图例宽度',
-              name: 'lengedWidth',
-              required: false,
-              placeholder: '',
-              value: 15,
-            },
-            {
-              type: 'el-select',
-              label: '横向位置',
-              name: 'lateralPosition',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'left', name: '左对齐'},
-                {code: 'right', name: '右对齐'},
-              ],
-              value: ''
-            },
-            {
-              type: 'el-select',
-              label: '纵向位置',
-              name: 'longitudinalPosition',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'top', name: '顶部'},
-                {code: 'bottom', name: '底部'},
-              ],
-              value: ''
-            },
-            {
-              type: 'el-select',
-              label: '布局前置',
-              name: 'layoutFront',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'vertical', name: '竖排'},
-                {code: 'horizontal', name: '横排'},
-              ],
-              value: ''
-            },
-          ],
-        },
         {
           name: '自定义配色',
           list: [
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
index 7a6c7696..6b1dac1a 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
@@ -9,7 +9,7 @@
 export const widgetGradientBarchart = {
   code: 'widget-gradient-color-barchart',
   type: 'chart',
-  label: '柱形图-渐变色',
+  label: '柱状图-渐变色',
   icon: 'iconzhuzhuangtu',
   options: {
     // 配置
@@ -162,6 +162,88 @@ export const widgetGradientBarchart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: 'top'
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: 'horizontal'
+            },
+          ],
+        },
         {
           name: 'X轴设置',
           list: [
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js
index 1b6b2713..c85aa512 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js
@@ -48,7 +48,7 @@ export const widgetMoreBarLine = {
               name: 'pointSize',
               required: false,
               placeholder: '',
-              value: 5,
+              value: 3,
             },
             {
               type: 'el-switch',
@@ -56,7 +56,7 @@ export const widgetMoreBarLine = {
               name: 'smoothCurve',
               required: false,
               placeholder: '',
-              value: true,
+              value: false,
             },
             {
               type: 'el-switch',
@@ -103,14 +103,6 @@ export const widgetMoreBarLine = {
               placeholder: '',
               value: 5,
             },
-            {
-              type: 'el-slider',
-              label: '最小高度',
-              name: 'minHeight',
-              require: false,
-              placeholder: '',
-              value: 0,
-            },
           ],
         },
         {
@@ -229,10 +221,10 @@ export const widgetMoreBarLine = {
             {
               type: 'el-input-text',
               label: '图例名称',
-              name: 'layerName',
+              name: 'legendName',
               required: false,
-              placeholder: '',
-              value: '',
+              placeholder: '多值以'|'隔开',
+              value: ''
             },
             {
               type: 'vue-color',
@@ -248,7 +240,7 @@ export const widgetMoreBarLine = {
               name: 'lengedFontSize',
               required: false,
               placeholder: '',
-              value: 16,
+              value: 12,
             },
             {
               type: 'el-input-number',
@@ -256,7 +248,7 @@ export const widgetMoreBarLine = {
               name: 'lengedWidth',
               required: false,
               placeholder: '',
-              value: 15,
+              value: 12,
             },
             {
               type: 'el-select',
@@ -265,10 +257,11 @@ export const widgetMoreBarLine = {
               required: false,
               placeholder: '',
               selectOptions: [
+                {code: 'center', name: '居中'},
                 {code: 'left', name: '左对齐'},
                 {code: 'right', name: '右对齐'},
               ],
-              value: ''
+              value: 'center'
             },
             {
               type: 'el-select',
@@ -280,7 +273,7 @@ export const widgetMoreBarLine = {
                 {code: 'top', name: '顶部'},
                 {code: 'bottom', name: '底部'},
               ],
-              value: ''
+              value: 'top'
             },
             {
               type: 'el-select',
@@ -292,7 +285,7 @@ export const widgetMoreBarLine = {
                 {code: 'vertical', name: '竖排'},
                 {code: 'horizontal', name: '横排'},
               ],
-              value: '未销,核销,总共,比例'
+              value: 'horizontal'
             },
           ],
         },
@@ -655,7 +648,12 @@ export const widgetMoreBarLine = {
               label: '',
               name: 'customColor',
               required: false,
-              value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
+              value: [
+                {color: '#4bdfff'},
+                {color: '#5dc1fd'},
+                {color: '#55f49c'},
+                {color: '#ffa43a'},
+              ],
             },
           ],
         },
@@ -745,7 +743,7 @@ export const widgetMoreBarLine = {
         name: 'width',
         required: false,
         placeholder: '该容器在1920px大屏中的宽度',
-        value: 400,
+        value: 500,
       },
       {
         type: 'el-input-number',
@@ -753,7 +751,7 @@ export const widgetMoreBarLine = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 200,
+        value: 300,
       },
     ],
   }
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
index ed8a08bd..74090891 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
@@ -258,11 +258,11 @@ export default {
       const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
-      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.left = optionsSetup.lateralPosition;
+      legend.right = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.lengedColor,
@@ -270,6 +270,25 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 图例颜色修改
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
@@ -331,6 +350,10 @@ export default {
       if (series[0].type == "bar") {
         series[0].data = data;
       }
+      const legendName = [];
+      legendName.push('销售量')
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -365,11 +388,16 @@ export default {
       }
       // series
       const series = this.options.series;
+      const legendName = [];
       for (const i in series) {
         if (series[i].type == "bar") {
+          series[i].name = val.series[i].name;
           series[i].data = val.series[i].data;
         }
+        legendName.push(val.series[i].name);
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue
index ecdceb1a..c605d19f 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue
@@ -134,7 +134,7 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
-      this.setOptionsTop();
+      this.setOptionsLine();
       this.setOptionsBar();
       this.setOptionsTooltip();
       this.setOptionsData();
@@ -262,7 +262,7 @@ export default {
       this.options.yAxis = yAxis;
     },
     // 折线设置 数值设置
-    setOptionsTop() {
+    setOptionsLine() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
index 9daadfc5..b3b02b79 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -167,6 +167,7 @@ export default {
       this.setOptionsX();
       this.setOptionsY();
       this.setOptionsTop();
+      this.setOptionsLegend();
       this.setOptionsMargin();
       this.setOptionsColor();
       this.setOptionsData();
@@ -323,11 +324,11 @@ export default {
       const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
-      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.left = optionsSetup.lateralPosition;
+      legend.right = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.lengedColor,
@@ -335,6 +336,25 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 渐变色
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
@@ -416,6 +436,10 @@ export default {
       if (series[0].type == "bar") {
         series[0].data = data;
       }
+      const legendName = [];
+      legendName.push('销售量')
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -451,11 +475,16 @@ export default {
 
       // series
       const series = this.options.series;
+      const legendName = [];
       for (const i in series) {
         if (series[i].type == "bar") {
+          series[i].name = val.series[i].name;
           series[i].data = val.series[i].data;
         }
+        legendName.push(val.series[i].name);
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
index 460d153d..c2b8f485 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
@@ -1,15 +1,15 @@
 <template>
-  <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+  <div :style='styleObj'>
+    <v-chart :options='options' autoresize/>
   </div>
 </template>
 
 <script>
 
-import echarts from "echarts";
+import echarts from 'echarts';
 
 export default {
-  name: "widgetMoreBarLineChart",
+  name: 'widgetMoreBarLineChart',
   components: {},
   props: {
     value: Object,
@@ -36,7 +36,7 @@ export default {
           left: '7%',
           top: '5%',
           textStyle: {
-            color: "#666666"
+            color: '#666666'
           },
           itemWidth: 15,
           itemHeight: 10,
@@ -53,7 +53,7 @@ export default {
           },
           axisLabel: {
             textStyle: {
-              color: "#666666"
+              color: '#666666'
             }
           },
         },
@@ -71,16 +71,16 @@ export default {
             },
             axisLabel: {
               textStyle: {
-                color: "#666666"
+                color: '#666666'
               }
             },
           },
           {
-            type: "value",
+            type: 'value',
             nameTextStyle: {
-              color: "#666666"
+              color: '#666666'
             },
-            position: "right",
+            position: 'right',
             axisLine: {
               lineStyle: {
                 color: '#cdd5e2'
@@ -92,7 +92,7 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#666666"
+                color: '#666666'
               }
             }
           }
@@ -101,7 +101,6 @@ export default {
           {
             name: '调解成功',
             type: 'bar',
-            barWidth: '12px',
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -114,12 +113,11 @@ export default {
                 barBorderRadius: 6,
               },
             },
-            data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
+            data: []
           },
           {
             name: '调解失败',
             type: 'bar',
-            barWidth: '12px',
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -133,12 +131,11 @@ export default {
               }
 
             },
-            data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
+            data: []
           },
           {
             name: '调解终止',
             type: 'bar',
-            barWidth: '12px',
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -151,15 +148,14 @@ export default {
                 barBorderRadius: 6,
               }
             },
-            data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
+            data: []
           },
           {
-            name: "调解成功率",
-            type: "line",
+            name: '调解成功率',
+            type: 'line',
             yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
             smooth: false, //平滑曲线显示
-
-            symbol: "circle", //标记的图形为实心圆
+            symbol: 'circle', //标记的图形为实心圆
             symbolSize: 8, //标记的大小
             itemStyle: {
               normal: {
@@ -170,9 +166,9 @@ export default {
 
             },
             lineStyle: {
-              color: "#ffa43a"
+              color: '#ffa43a'
             },
-            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
+            data: []
           }
         ]
       }
@@ -181,11 +177,11 @@ export default {
   computed: {
     styleObj() {
       return {
-        position: this.ispreview ? "absolute" : "static",
-        width: this.optionsStyle.width + "px",
-        height: this.optionsStyle.height + "px",
-        left: this.optionsStyle.left + "px",
-        top: this.optionsStyle.top + "px",
+        position: this.ispreview ? 'absolute' : 'static',
+        width: this.optionsStyle.width + 'px',
+        height: this.optionsStyle.height + 'px',
+        left: this.optionsStyle.left + 'px',
+        top: this.optionsStyle.top + 'px',
         background: this.optionsSetup.background
       };
     }
@@ -215,14 +211,11 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
-      /*
-      this.setOptionsTop();
-      this.setOptionsBar();
+      this.setOptionsLegend();
       this.setOptionsTooltip();
-      this.setOptionsData();
       this.setOptionsMargin();
-      this.setOptionsLegend();
-      this.setOptionsColor();*/
+      this.setOptionsColor();
+      this.setOptionsData();
     },
     // 标题修改
     setOptionsTitle() {
@@ -249,7 +242,7 @@ export default {
     setOptionsX() {
       const optionsSetup = this.optionsSetup;
       const xAxis = {
-        type: "category",
+        type: 'category',
         show: optionsSetup.hideX, // 坐标轴是否显示
         name: optionsSetup.xName, // 坐标轴名称
         nameTextStyle: {
@@ -287,7 +280,7 @@ export default {
       const optionsSetup = this.optionsSetup;
       const yAxis = [
         {
-          type: "value",
+          type: 'value',
           show: optionsSetup.isShowYLeft, // 坐标轴是否显示
           name: optionsSetup.textNameYLeft, // 坐标轴名称
           nameTextStyle: { // 别名
@@ -312,8 +305,8 @@ export default {
           }
         },
         {
-          type: "value",
-          position: "right",
+          type: 'value',
+          position: 'right',
           show: optionsSetup.isShowYRight, // 坐标轴是否显示
           name: optionsSetup.textNameYRight, // 坐标轴名称
           nameTextStyle: { // 别名
@@ -340,32 +333,11 @@ export default {
       ];
       this.options.yAxis = yAxis;
     },
-    // 柱体设置 数值设置
-    setOptionsBar() {
-      const optionsSetup = this.optionsSetup;
-      const series = this.options.series;
-      for (const key in series) {
-        if (series[key].type == "bar") {
-          series[key].label = {
-            show: optionsSetup.isShowBar,
-            position: "top",
-            distance: optionsSetup.distanceBar,
-            fontSize: optionsSetup.fontSizeBar,
-            color: optionsSetup.subTextColorBar,
-            fontWeight: optionsSetup.fontWeightBar
-          };
-          series[key].barWidth = optionsSetup.maxWidth;
-          series[key].barMinHeight = optionsSetup.minHeight;
-          series[key].itemStyle.barBorderRadius = optionsSetup.radius;
-        }
-      }
-      this.options.series = series;
-    },
     // tooltip 设置
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: "item",
+        trigger: 'item',
         show: true,
         textStyle: {
           color: optionsSetup.lineColor,
@@ -391,9 +363,9 @@ export default {
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.lengedColor,
@@ -401,45 +373,118 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 颜色修改
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
       const customColor = optionsSetup.customColor;
+      const series = this.options.series;
       if (!customColor) return;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color);
       }
-      this.options.color = arrColor;
-      this.options = Object.assign({}, this.options);
+      for (const i in series) {
+        if (series[i].type == 'bar') {
+          series[i].itemStyle.normal['color'] = arrColor[i];
+        } else {
+          series[i].lineStyle['color'] = arrColor[i];
+        }
+      }
     },
     // 数据处理
     setOptionsData() {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
-      optionsData.dataType == "staticData"
+      optionsData.dataType == 'staticData'
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       let axis = [];
-      let bar = [];
+      let bar1 = [];
+      let bar2 = [];
+      let bar3 = [];
       let line = [];
       for (const i in val) {
-        axis[i] = val[i].axis;
-        bar[i] = val[i].bar;
-        line[i] = val[i].line;
+        axis[i] = val[i].date;
+        bar1[i] = val[i].unsales;
+        bar2[i] = val[i].manus;
+        bar3[i] = val[i].rework;
+        line[i] = val[i].sales;
       }
       // x轴
       this.options.xAxis.data = axis;
       // series
       for (const i in series) {
-        if (series[i].type == "bar") {
-          series[i].data = bar;
-        } else {
-          series[i].data = line;
+        if (series[i].type == 'bar') {
+          series[i].label = {
+            show: optionsSetup.isShowBar,
+            position: 'top',
+            distance: optionsSetup.distanceBar,
+            fontSize: optionsSetup.fontSizeBar,
+            color: optionsSetup.subTextColorBar,
+            fontWeight: optionsSetup.fontWeightBar
+          };
+          series[i].barWidth = optionsSetup.maxWidth;
+          series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
+        } else if (series[i].type == 'line') {
+          series[i].yAxisIndex = 1;
+          series[i].showSymbol = optionsSetup.markPoint;
+          series[i].symbolSize = optionsSetup.pointSize;
+          series[i].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            series[i].areaStyle = {
+              opacity: optionsSetup.areaThickness / 100
+            };
+          } else {
+            series[i].areaStyle = {
+              opacity: 0
+            };
+          }
+          series[i].lineStyle = {
+            width: optionsSetup.lineWidth
+          };
+          series[i].label = {
+            show: optionsSetup.isShowLine,
+            position: 'top',
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
+          };
         }
       }
+      series[0].data = bar1;
+      series[1].data = bar2;
+      series[2].data = bar3;
+      series[3].data = line;
+      const legendName = [];
+      legendName.push('调解成功');
+      legendName.push('调解失败');
+      legendName.push('调解终止');
+      legendName.push('调解成功率');
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -459,23 +504,73 @@ export default {
       });
     },
     renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
       this.options.xAxis.data = val.xAxis;
-      // series
-      const series = this.options.series;
-      for (const i in series) {
-        for (const j in val.series) {
-          if (series[i].type == val.series[j].type) {
-            series[i].data = val.series[j].data;
+      const series = [];
+      const legendName = [];
+      for (const i in val.series) {
+        const obj = {};
+        if (val.series[i].type == 'bar') {
+          obj.name = val.series[i].name;
+          obj.type = val.series[i].type;
+          obj.label = {
+            show: optionsSetup.isShowBar,
+            position: 'top',
+            distance: optionsSetup.distanceBar,
+            fontSize: optionsSetup.fontSizeBar,
+            color: optionsSetup.subTextColorBar,
+            fontWeight: optionsSetup.fontWeightBar
+          };
+          obj.barWidth = optionsSetup.maxWidth;
+          obj.itemStyle = {
+            normal: {
+              barBorderRadius: optionsSetup.radius,
+            }
+          };
+          obj.data = val.series[i].data;
+          series.push(obj);
+        } else if (val.series[i].type == 'line') {
+          obj.name = val.series[i].name;
+          obj.type = val.series[i].type;
+          obj.yAxisIndex = 1;
+          obj.showSymbol = optionsSetup.markPoint;
+          obj.symbolSize = optionsSetup.pointSize;
+          obj.smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            obj.areaStyle = {
+              opacity: optionsSetup.areaThickness / 100
+            };
+          } else {
+            obj.areaStyle = {
+              opacity: 0
+            };
           }
+          obj.lineStyle = {
+            width: optionsSetup.lineWidth
+          };
+          obj.label = {
+            show: optionsSetup.isShowLine,
+            position: 'top',
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
+          };
+          obj.data = val.series[i].data;
+          series.push(obj);
         }
+        legendName.push(val.series[i].name);
       }
-    }
+      this.options.series = series;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
   }
 };
 
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .echarts {
   width: 100%;
   height: 100%;