fix

src/components/lifecycle/index.vue

@@ -3,20 +3,22 @@
     <div class="content">
       <!-- <img src="../../assets/images/arrow.png"/> -->
       <div class="items">
-        <img
-          class="animate__animated animate__fadeInDown"
-          :src="require(`./images/${index + 1}.png`)"
-          v-for="(item, index) in items" :key="index"
-          :style="{top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': (!inited ? index * 0.3 + 's' : '0s')}"
-        />
-      </div>
-      <div class="lines">
-        <img
-          class="animate__animated animate__fadeInDown"
-          :src="require(`./images/a${index + 1}.png`)"
-          v-for="(item, index) in lines" :key="index"
-          :style="{top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': (index + 1) * 0.3 + 's'}"
-        />
+        <template v-for="(item, index) in items">
+          <img
+            :key="index"
+            v-if="index % 2 === 0"
+            class="animate__animated animate__fadeInDown"
+            :src="require(`./images/${index}.png`)"
+            :style="{top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': (index * 0.3) + 's'}"
+          />
+          <img
+            v-else
+            class="animate__animated animate__fadeInDown"
+            :src="require(`./images/a${index}.png`)"
+            :key="index"
+            :style="{top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': index * 0.3 + 's'}"
+          />
+        </template>
       </div>
     </div>
   </div>
@@ -24,18 +26,16 @@
 <script>
 const items = [
   [80, -115, false],
-  [-50, 130, false],
-  [-50, 400, false],
-  [80, 620, false],
-  [240, 400, false],
-  [240, 130, false],
-]
-const lines = [
   [20, -5],
+  [-50, 130, false],
   [-25, 265],
+  [-50, 400, false],
   [5, 520],
+  [80, 620, false],
   [190, 520],
+  [240, 400, false],
   [285, 275],
+  [240, 130, false],
   [220, 20],
 ]
 export default {
@@ -43,7 +43,6 @@ export default {
   data() {
     return {
       items,
-      lines,
       inited: false,
     }
   },

src/components/map-data.js

@@ -76,7 +76,7 @@ const getItemStyle = (opacity) => {
     normal: {
       areaColor: '#96CFC6',
       borderColor: '#fff',
-      borderWidth: 0.5,
+      borderWidth: 1,
       show: false,
       opacity,
     },
@@ -94,29 +94,29 @@ const areas = [
   { name: '重庆', value: randomData(), itemStyle: getItemStyle(.3) },
   { name: '河北', value: randomData(), itemStyle: getItemStyle(.3) },
   { name: '河南', value: randomData(), itemStyle: getItemStyle(.2) },
-  { name: '云南', value: randomData(), itemStyle: getItemStyle(.6) },
-  { name: '辽宁', value: randomData(), itemStyle: getItemStyle(.5) },
+  { name: '云南', value: randomData(), itemStyle: getItemStyle(.37) },
+  { name: '辽宁', value: randomData(), itemStyle: getItemStyle(.85) },
   { name: '黑龙江', value: randomData(), itemStyle: getItemStyle(.8) },
-  { name: '湖南', value: randomData(), itemStyle: getItemStyle(.6) },
-  { name: '安徽', value: randomData(), itemStyle: getItemStyle(.7) },
+  { name: '湖南', value: randomData(), itemStyle: getItemStyle(.71) },
+  { name: '安徽', value: randomData(), itemStyle: getItemStyle(.21) },
   { name: '山东', value: randomData(), itemStyle: getItemStyle(.4) },
-  { name: '新疆', value: randomData(), itemStyle: getItemStyle(4) },
+  { name: '新疆', value: randomData(), itemStyle: getItemStyle(.37) },
   { name: '江苏', value: randomData(), itemStyle: getItemStyle(.6) },
   { name: '浙江', value: randomData(), itemStyle: getItemStyle(.8) },
   { name: '江西', value: randomData(), itemStyle: getItemStyle(.5) },
-  { name: '湖北', value: randomData(), itemStyle: getItemStyle(.9) },
-  { name: '广西', value: randomData(), itemStyle: getItemStyle(.3) },
-  { name: '甘肃', value: randomData(), itemStyle: getItemStyle(.5) },
+  { name: '湖北', value: randomData(), itemStyle: getItemStyle(.47) },
+  { name: '广西', value: randomData(), itemStyle: getItemStyle(.8) },
+  { name: '甘肃', value: randomData(), itemStyle: getItemStyle(.73) },
   { name: '山西', value: randomData(), itemStyle: getItemStyle(.3) },
-  { name: '内蒙古', value: randomData(), itemStyle: getItemStyle(.6) },
+  { name: '内蒙古', value: randomData(), itemStyle: getItemStyle(.56) },
   { name: '陕西', value: randomData(), itemStyle: getItemStyle(.4) },
-  { name: '吉林', value: randomData(), itemStyle: getItemStyle(.6) },
+  { name: '吉林', value: randomData(), itemStyle: getItemStyle(.54) },
   { name: '福建', value: randomData(), itemStyle: getItemStyle(.7) },
-  { name: '贵州', value: randomData(), itemStyle: getItemStyle(.8) },
+  { name: '贵州', value: randomData(), itemStyle: getItemStyle(.56) },
   { name: '广东', value: randomData, itemStyle: getItemStyle(.3) },
-  { name: '青海', value: randomData, itemStyle: getItemStyle(.6) },
-  { name: '西藏', value: randomData, itemStyle: getItemStyle(.4) },
-  { name: '四川', value: randomData, itemStyle: getItemStyle(.7) },
+  { name: '青海', value: randomData, itemStyle: getItemStyle(.37) },
+  { name: '西藏', value: randomData, itemStyle: getItemStyle(.57) },
+  { name: '四川', value: randomData, itemStyle: getItemStyle(.58) },
   { name: '宁夏', value: randomData, itemStyle: getItemStyle(.5) },
   { name: '海南', value: randomData, itemStyle: getItemStyle(.5) },
   { name: '台湾', value: randomData, itemStyle: getItemStyle(.4) },
@@ -179,9 +179,9 @@ export default activeName => ({
       animationDurationUpdate: 1000,
       lineStyle: {
         normal: {
-          color: '#96CFC6',
+          color: '#93C8BE',
           width: 2,
-          opacity: 0.6,
+          opacity: 1,
           curveness: 0.05
         }
       },
@@ -218,7 +218,10 @@ export default activeName => ({
           }
         },
       }],
-      data: areas,
+      data: areas.map(item => {
+        item.selected = item.name === activeName
+        return item
+      }),
     },
     {
       type: 'effectScatter',
@@ -227,18 +230,23 @@ export default activeName => ({
       symbolSize: 5,
       showEffectOn: 'render',
       rippleEffect: {
-        brushType: 'stroke'
+        brushType: 'stroke',
+        scale: 6,
+        period: 6,
       },
       hoverAnimation: true,
       label: {
+        show: true,
         normal: {
           formatter: '{b}',
           position: 'left',
           show: true,
           color: '#808080',
+          opacity: 1,
         }
       },
       itemStyle: {
+        show: true,
         normal: {
           color: '#52C88D',
         }

src/components/map.vue

@@ -82,8 +82,7 @@ export default {
   mounted() {
     const { map } = this.$refs
     if (map && map.chart) {
-      map.chart.on('click', evt => {
-        console.log(evt)
+      map.chart.on('mousemove', evt => {
         if (evt.name && evt.name !== '南海诸岛') {
           this.activeName = evt.name
         }
@@ -94,13 +93,13 @@ export default {
 </script>
 <style lang="less" scoped>
   .viewmap{
-    width: 895px;
+    width: 1100px;
     margin: auto;
-    margin-top: -20px;
+    margin-top: -120px;
     position: relative;
     .chart{
       width: 100%;
-      height: 750px;
+      height: 900px;
     }
     img{
       max-width: 100%;