update--中国地图-路线图调整

report-ui/src/views/bigscreenDesigner/designer/widget/widgetMap.vue

@@ -1,10 +1,11 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 <script>
 import "../../../../../node_modules/echarts/map/js/china.js";
+
 let GZData = [
   [
     {
@@ -17,7 +18,7 @@ let GZData = [
   ],
   [
     {
-      name: "广州"
+      name: "上海"
     },
     {
       name: "太原",
@@ -26,7 +27,7 @@ let GZData = [
   ],
   [
     {
-      name: "广州"
+      name: "上海"
     },
     {
       name: "长春",
@@ -213,9 +214,6 @@ let geoCoordMap = {
   青岛: [120.4651, 36.3373],
   韶关: [113.7964, 24.7028]
 };
-let type = "流出";
-let color = ["#a6c84c", "#ffa022", "#46bee9"];
-let tempData = ["广州", GZData];
 let planePath =
   "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
 export default {
@@ -228,17 +226,14 @@ export default {
     return {
       options: {
         title: {
-          text: "模拟迁徙",
-          subtext: "数据纯属虚构",
           left: "center",
           textStyle: {
             color: "#fff"
           }
         },
-        tooltip: {
+        /*tooltip: {
           trigger: "item",
           formatter: function(params) {
-            console.log(params);
             if (params.seriesType == "effectScatter") {
               if ("流入" == type) {
                 return (
@@ -247,9 +242,8 @@ export default {
                   params.data.name +
                   " ---> " +
                   params.seriesName +
-                  "<br />人数：" +
+                  "<br />" +
-                  params.data.value[2] +
+                  params.data.value[2]
-                  "人"
                 );
               } else {
                 return (
@@ -257,9 +251,8 @@ export default {
                   params.seriesName +
                   " ---> " +
                   params.data.name +
-                  "<br />人数：" +
+                  "<br />" +
-                  params.data.value[2] +
+                  params.data.value[2]
-                  "人"
                 );
               }
             } else if (params.seriesType == "lines") {
@@ -270,9 +263,8 @@ export default {
                   params.data.toName +
                   " ---> " +
                   params.data.fromName +
-                  "<br />人数：" +
+                  "<br />" +
-                  params.data.value +
+                  params.data.value
-                  "人"
                 );
               } else {
                 return (
@@ -281,32 +273,43 @@ export default {
                   params.data.fromName +
                   " ---> " +
                   params.data.toName +
-                  "<br />人数：" +
+                  "<br />" +
-                  params.data.value +
+                  params.data.value
-                  "人"
                 );
               }
             } else {
               return params.name;
             }
           }
+        },*/
+        tooltip: {
+          trigger: 'item',
+          formatter: function (params, ticket, callback) {
+            if (params.seriesType == "effectScatter") {
+              return "线路：" + params.data.name + "" + params.data.value[2];
+            } else if (params.seriesType == "lines") {
+              return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value;
+            } else {
+              return params.name;
+            }
+          }
         },
         legend: {
-          show: false,
+          show: true,
-          orient: "vertical",
+          orient: 'vertical',
-          top: "bottom",
+          top: 'bottom',
-          left: "right",
+          left: 'right',
-          data: ["广州"],
+          //data:['北京 Top10', '上海 Top10', '广州 Top10'],
           textStyle: {
-            color: "#fff"
+            color: '#fff'
           },
-          selectedMode: "single"
+          selectedMode: 'multiple',
+          // selectedMode: "single"
         },
         geo: {
           map: "china",
           label: {
             emphasis: {
-              //show: false,
               show: true,
               color: "white"
             }
@@ -343,22 +346,28 @@ export default {
     value: {
       handler(val) {
         this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
       },
       deep: true
     }
   },
   created() {
     this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsSetup = this.value.setup;
   },
   mounted() {
-    this.initData();
+    this.initData2();
+    this.editorOptions();
   },
   methods: {
     initData() {
       const options = this.options;
       options.series.push(
         {
-          name: tempData[0],
+          //name: tempData[0],
           type: "lines",
           zlevel: 1,
           effect: {
@@ -413,7 +422,7 @@ export default {
               formatter: "{b}"
             }
           },
-          symbolSize: function(val) {
+          symbolSize: function (val) {
             return val[2] / 8;
           },
           itemStyle: {
@@ -421,7 +430,7 @@ export default {
               color: color[0]
             }
           },
-          data: tempData[1].map(function(dataItem) {
+          data: tempData[1].map(function (dataItem) {
             return {
               name: dataItem[1].name,
               value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
@@ -431,7 +440,30 @@ export default {
       );
       this.options = options;
     },
-    convertData(data) {
+    initData2() {
+      const optins = this.options;
+      optins.series.push({
+          type: 'lines',
+          zlevel: 1,
+          effect: {
+            show: true,
+            period: 6,
+            trailLength: 0.7,
+            color: '#fff',
+            symbolSize: 3
+          },
+          lineStyle: {
+            normal: {
+              color: '#a6c84c',
+              width: 0,
+              curveness: 0.2
+            }
+          },
+          data: convertData(GZData)
+        },);
+    },
+
+    /*    convertData(data) {
           let res = [];
           for (let i = 0; i < data.length; i++) {
             let dataItem = data[i];
@@ -451,6 +483,119 @@ export default {
             }
           }
           return res;
+        },*/
+    convertData2(data) {
+      let res = [];
+      for (let i = 0; i < data.length; i++) {
+        let dataItem = data[i];
+        let fromCoord = geoCoordMap[dataItem[0].name];
+        let toCoord = geoCoordMap[dataItem[1].name];
+        if (fromCoord && toCoord) {
+          res.push({
+            fromName: dataItem[0].name,
+            toName: dataItem[1].name,
+            coords: [fromCoord, toCoord],
+            value: dataItem[1].value
+          });
+        }
+      }
+      return res;
+    },
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsData();
+    },
+    // 标题设置
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {};
+      title.show = optionsSetup.isNoTitle;
+      title.text = optionsSetup.titleText;
+      title.left = optionsSetup.textAlign;
+      title.textStyle = {
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    //数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      this.options.series[0]["data"] = val;
+      const optionsSetup = this.optionsSetup;
+      const label = this.options.series[1]["label"];
+      /*const normal = {
+        show: true,
+        color: "#fff",
+        fontWeight: "bold",
+        position: "inside",
+        formatter: function(para) {
+          return "{cnNum|" + para.data.value[2] + "}";
+        },
+        rich: {
+          cnNum: {
+            fontSize: optionsSetup.fontDataSize,
+            color: optionsSetup.fontDataColor,
+            fontWeight: optionsSetup.fontDataWeight
+          }
+        }
+      };
+      const data = convertData(val);
+      this.options.series[1]["data"] = data;
+      label["normal"] = normal;*/
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.series[0]["data"] = val;
+      const optionsSetup = this.optionsSetup;
+      const label = this.options.series[1]["label"];
+      const normal = {
+        show: true,
+        color: "#fff",
+        fontWeight: "bold",
+        position: "inside",
+        formatter: function (para) {
+          return "{cnNum|" + para.data.value[2] + "}";
+        },
+        rich: {
+          cnNum: {
+            fontSize: optionsSetup.fontDataSize,
+            color: optionsSetup.fontDataColor,
+            fontWeight: optionsSetup.fontDataWeight
+          }
+        }
+      };
+      const data = convertData(val);
+      this.options.series[1]["data"] = data;
+      label["normal"] = normal;
     }
   }
 };
@@ -460,6 +605,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .echarts {
   width: 100%;
   height: 100%;