wangzhe 8 months ago
parent
commit
d9eb6fa3f6
2 changed files with 61 additions and 51 deletions
  1. 2 0
      screen-demo/src/main.js
  2. 59 51
      screen-demo/src/views/templateInstance.vue

+ 2 - 0
screen-demo/src/main.js

@@ -25,6 +25,8 @@ postMsgUtil.listen("checkCrossResult", function ({data}) {
   Vue.prototype.isCross = data !== 200
   Vue.prototype.isCross = data !== 200
   localStorage.setItem('isCross', data !== 200)
   localStorage.setItem('isCross', data !== 200)
 });
 });
+
+
 new Vue({
 new Vue({
   router,
   router,
   render: h => h(App),
   render: h => h(App),

+ 59 - 51
screen-demo/src/views/templateInstance.vue

@@ -67,7 +67,7 @@
       </div>
       </div>
       <div class="container">
       <div class="container">
         <div style="height: 160px; overflow-y: auto;">
         <div style="height: 160px; overflow-y: auto;">
-          <div class="content red" v-for="item in timeX" :key="item">
+          <div class="content red" v-for="(item, index) in timeX" :key="item+index">
             <div class="icon"></div>
             <div class="icon"></div>
             {{item.name}}
             {{item.name}}
             <span>{{ item.value }}</span>
             <span>{{ item.value }}</span>
@@ -388,10 +388,10 @@ export default {
           },
           },
           axisLabel: {
           axisLabel: {
             show: true,
             show: true,
-            textStyle: {
+            // textStyle: {
               color: "rgba(250,250,250,0.6)", //X轴文字颜色
               color: "rgba(250,250,250,0.6)", //X轴文字颜色
               fontSize: 16,
               fontSize: 16,
-            },
+            // },
           },
           },
           splitArea: {
           splitArea: {
             show: true,
             show: true,
@@ -423,10 +423,10 @@ export default {
             },
             },
             axisLabel: {
             axisLabel: {
               show: true,
               show: true,
-              textStyle: {
+              // textStyle: {
                 color: "rgba(250,250,250,0.6)",
                 color: "rgba(250,250,250,0.6)",
                 fontSize: 16,
                 fontSize: 16,
-              },
+              // },
             },
             },
           },
           },
           {
           {
@@ -449,10 +449,10 @@ export default {
             axisLabel: {
             axisLabel: {
               show: true,
               show: true,
               formatter: "{value} %", //右侧Y轴文字显示
               formatter: "{value} %", //右侧Y轴文字显示
-              textStyle: {
+              // textStyle: {
                 color: "rgba(250,250,250,0.6)",
                 color: "rgba(250,250,250,0.6)",
                 fontSize: 16,
                 fontSize: 16,
-              },
+              // },
             },
             },
           },
           },
         ],
         ],
@@ -498,7 +498,7 @@ export default {
             type: "bar",
             type: "bar",
             barWidth: 15, //增加柱子的宽度
             barWidth: 15, //增加柱子的宽度
             itemStyle: {
             itemStyle: {
-              normal: {
+              // normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                   {
                     offset: 0,
                     offset: 0,
@@ -526,7 +526,7 @@ export default {
                 barMinHeight: 5, // 设置柱子最小高度
                 barMinHeight: 5, // 设置柱子最小高度
                 barWidth: "50%", // 设置柱子宽度
                 barWidth: "50%", // 设置柱子宽度
                 barShape: "diamond", // 设置柱状图顶部为菱形
                 barShape: "diamond", // 设置柱状图顶部为菱形
-              },
+              // },
             },
             },
             data: result.data.sourceList.map(o=>o.orderNum),
             data: result.data.sourceList.map(o=>o.orderNum),
           },
           },
@@ -677,9 +677,9 @@ export default {
             axisLabel: {
             axisLabel: {
               show: true,
               show: true,
               align: "left",
               align: "left",
-              textStyle: {
+              // textStyle: {
                 color: "#66cc00",
                 color: "#66cc00",
-              },
+              // },
               formatter: function (value, index) {
               formatter: function (value, index) {
                 var num = "";
                 var num = "";
                 var str = "";
                 var str = "";
@@ -782,10 +782,10 @@ export default {
             axisLine: "none",
             axisLine: "none",
             show: true,
             show: true,
             axisLabel: {
             axisLabel: {
-              textStyle: {
+              // textStyle: {
                 color: "#ffffff",
                 color: "#ffffff",
                 fontSize: "12",
                 fontSize: "12",
-              },
+              // },
             },
             },
             data: getValue,
             data: getValue,
           },
           },
@@ -796,8 +796,9 @@ export default {
             type: "bar",
             type: "bar",
             zlevel: 1,
             zlevel: 1,
             itemStyle: {
             itemStyle: {
-              normal: {
-                barBorderRadius: 5, // Adjusted to 5
+              // normal: {
+              //   barBorderRadius: 5, // Adjusted to 5
+              borderRadius: 5, // Adjusted to 5
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   {
                   {
                     offset: 0,
                     offset: 0,
@@ -808,7 +809,7 @@ export default {
                     color: "rgb(46,200,207,1)",
                     color: "rgb(46,200,207,1)",
                   },
                   },
                 ]),
                 ]),
-              },
+              // },
             },
             },
             barWidth: 5, // Adjusted to 5
             barWidth: 5, // Adjusted to 5
             data: getValue,
             data: getValue,
@@ -820,10 +821,11 @@ export default {
             barGap: "-50%", // Adjusted to "-50%"
             barGap: "-50%", // Adjusted to "-50%"
             data: getMax,
             data: getMax,
             itemStyle: {
             itemStyle: {
-              normal: {
+              // normal: {
                 color: "rgba(24,31,68,1)",
                 color: "rgba(24,31,68,1)",
-                barBorderRadius: 5, // Adjusted to 5
-              },
+                // barBorderRadius: 5, // Adjusted to 5
+              borderRadius: 5, // Adjusted to 5
+              // },
             },
             },
           },
           },
         ],
         ],
@@ -890,8 +892,8 @@ export default {
               length: 0,
               length: 0,
               length2: 20
               length2: 20
             },
             },
-            itemStyle: {
-              emphasis: {
+            emphasis: {
+              itemStyle: {
                 shadowBlur: 10,
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
@@ -954,9 +956,9 @@ export default {
             axisLabel: {
             axisLabel: {
               show: true,
               show: true,
               align: "left",
               align: "left",
-              textStyle: {
+              // textStyle: {
                 color: "#66cc00",
                 color: "#66cc00",
-              },
+              // },
               formatter: function (value, index) {
               formatter: function (value, index) {
                 var num = "";
                 var num = "";
                 var str = "";
                 var str = "";
@@ -1059,10 +1061,10 @@ export default {
             axisLine: "none",
             axisLine: "none",
             show: true,
             show: true,
             axisLabel: {
             axisLabel: {
-              textStyle: {
+              // textStyle: {
                 color: "#ffffff",
                 color: "#ffffff",
                 fontSize: "12",
                 fontSize: "12",
-              },
+              // },
             },
             },
             data: getValue,
             data: getValue,
           },
           },
@@ -1073,8 +1075,9 @@ export default {
             type: "bar",
             type: "bar",
             zlevel: 1,
             zlevel: 1,
             itemStyle: {
             itemStyle: {
-              normal: {
-                barBorderRadius: 5, // Adjusted to 5
+              // normal: {
+              //   barBorderRadius: 5, // Adjusted to 5
+              borderRadius: 5, // Adjusted to 5
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   {
                   {
                     offset: 0,
                     offset: 0,
@@ -1085,7 +1088,7 @@ export default {
                     color: "rgb(46,200,207,1)",
                     color: "rgb(46,200,207,1)",
                   },
                   },
                 ]),
                 ]),
-              },
+              // },
             },
             },
             barWidth: 5, // Adjusted to 5
             barWidth: 5, // Adjusted to 5
             data: getValue,
             data: getValue,
@@ -1097,10 +1100,11 @@ export default {
             barGap: "-50%", // Adjusted to "-50%"
             barGap: "-50%", // Adjusted to "-50%"
             data: getMax,
             data: getMax,
             itemStyle: {
             itemStyle: {
-              normal: {
+              // normal: {
                 color: "rgba(24,31,68,1)",
                 color: "rgba(24,31,68,1)",
-                barBorderRadius: 5, // Adjusted to 5
-              },
+                // barBorderRadius: 5, // Adjusted to 5
+                borderRadius: 5, // Adjusted to 5
+              // },
             },
             },
           },
           },
         ],
         ],
@@ -1156,9 +1160,9 @@ export default {
             axisLabel: {
             axisLabel: {
               show: true,
               show: true,
               align: "left",
               align: "left",
-              textStyle: {
+              // textStyle: {
                 color: "#66cc00",
                 color: "#66cc00",
-              },
+              // },
               formatter: function (value, index) {
               formatter: function (value, index) {
                 var num = "";
                 var num = "";
                 var str = "";
                 var str = "";
@@ -1261,10 +1265,10 @@ export default {
             axisLine: "none",
             axisLine: "none",
             show: true,
             show: true,
             axisLabel: {
             axisLabel: {
-              textStyle: {
+              // textStyle: {
                 color: "#ffffff",
                 color: "#ffffff",
                 fontSize: "12",
                 fontSize: "12",
-              },
+              // },
             },
             },
             data: getValue,
             data: getValue,
           },
           },
@@ -1275,8 +1279,9 @@ export default {
             type: "bar",
             type: "bar",
             zlevel: 1,
             zlevel: 1,
             itemStyle: {
             itemStyle: {
-              normal: {
-                barBorderRadius: 5, // Adjusted to 5
+              // normal: {
+              //   barBorderRadius: 5, // Adjusted to 5
+              borderRadius: 5, // Adjusted to 5
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   {
                   {
                     offset: 0,
                     offset: 0,
@@ -1287,7 +1292,7 @@ export default {
                     color: "rgb(46,200,207,1)",
                     color: "rgb(46,200,207,1)",
                   },
                   },
                 ]),
                 ]),
-              },
+              // },
             },
             },
             barWidth: 5, // Adjusted to 5
             barWidth: 5, // Adjusted to 5
             data: getValue,
             data: getValue,
@@ -1299,10 +1304,11 @@ export default {
             barGap: "-50%", // Adjusted to "-50%"
             barGap: "-50%", // Adjusted to "-50%"
             data: getMax,
             data: getMax,
             itemStyle: {
             itemStyle: {
-              normal: {
+              // normal: {
                 color: "rgba(24,31,68,1)",
                 color: "rgba(24,31,68,1)",
-                barBorderRadius: 5, // Adjusted to 5
-              },
+                // barBorderRadius: 5, // Adjusted to 5
+              borderRadius: 5, // Adjusted to 5
+              // },
             },
             },
           },
           },
         ],
         ],
@@ -1364,9 +1370,9 @@ export default {
             axisLabel: {
             axisLabel: {
               show: true,
               show: true,
               align: "left",
               align: "left",
-              textStyle: {
+              // textStyle: {
                 color: "#66cc00",
                 color: "#66cc00",
-              },
+              // },
               formatter: function (value, index) {
               formatter: function (value, index) {
                 var num = "";
                 var num = "";
                 var str = "";
                 var str = "";
@@ -1469,10 +1475,10 @@ export default {
             axisLine: "none",
             axisLine: "none",
             show: true,
             show: true,
             axisLabel: {
             axisLabel: {
-              textStyle: {
+              // textStyle: {
                 color: "#ffffff",
                 color: "#ffffff",
                 fontSize: "12",
                 fontSize: "12",
-              },
+              // },
             },
             },
             data: getValue,
             data: getValue,
           },
           },
@@ -1483,8 +1489,9 @@ export default {
             type: "bar",
             type: "bar",
             zlevel: 1,
             zlevel: 1,
             itemStyle: {
             itemStyle: {
-              normal: {
-                barBorderRadius: 5, // Adjusted to 5
+              // normal: {
+              //   barBorderRadius: 5, // Adjusted to 5
+              borderRadius: 5, // Adjusted to 5
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   {
                   {
                     offset: 0,
                     offset: 0,
@@ -1495,7 +1502,7 @@ export default {
                     color: "rgb(46,200,207,1)",
                     color: "rgb(46,200,207,1)",
                   },
                   },
                 ]),
                 ]),
-              },
+              // },
             },
             },
             barWidth: 5, // Adjusted to 5
             barWidth: 5, // Adjusted to 5
             data: getValue,
             data: getValue,
@@ -1507,10 +1514,11 @@ export default {
             barGap: "-50%", // Adjusted to "-50%"
             barGap: "-50%", // Adjusted to "-50%"
             data: getMax,
             data: getMax,
             itemStyle: {
             itemStyle: {
-              normal: {
+              // normal: {
                 color: "rgba(24,31,68,1)",
                 color: "rgba(24,31,68,1)",
-                barBorderRadius: 5, // Adjusted to 5
-              },
+                // barBorderRadius: 5, // Adjusted to 5
+              borderRadius: 5, // Adjusted to 5
+              // },
             },
             },
           },
           },
         ],
         ],