利用markPoint做商场的人数随天气变化去曲线echarts 折线配置项内容和展示

天气折线图

       let pathes = [
          'M511.4 383.79999999999995m-246.6 0a246.6 246.6 0 1 1 493.2 0 246.6 246.6 0 1 1-493.2 0ZM520.4 684.2h-16.7c-9 0-16.3 7.3-16.3 16.3V854.7c0 9 7.3 16.3 16.3 16.3h16.7c9 0 16.3-7.3 16.3-16.3v-154.1c0-9-7.4-16.4-16.3-16.4zM304.1 600.7l-11.8-11.8c-6.3-6.3-16.7-6.3-23.1 0l-109 109c-6.3 6.3-6.3 16.7 0 23.1l11.8 11.8c6.3 6.3 16.7 6.3 23.1 0l109-109c6.3-6.3 6.3-16.7 0-23.1zM210.2 388.8v-16.7c0-9-7.3-16.3-16.3-16.3H39.8c-9 0-16.3 7.3-16.3 16.3v16.7c0 9 7.3 16.3 16.3 16.3h154.1c9 0 16.3-7.3 16.3-16.3zM293.7 172.5l11.8-11.8c6.3-6.3 6.3-16.7 0-23.1l-109-109c-6.3-6.3-16.7-6.3-23.1 0l-11.8 11.8c-6.3 6.3-6.3 16.7 0 23.1l109 109c6.4 6.4 16.7 6.4 23.1 0zM505.6 78.60000000000002h16.7c9 0 16.3-7.3 16.3-16.3v-154.1c0-9-7.3-16.3-16.3-16.3h-16.7c-9 0-16.3 7.3-16.3 16.3V62.299999999999955c0 9 7.4 16.3 16.3 16.3zM721.9 162.10000000000002l11.8 11.8c6.3 6.3 16.7 6.3 23.1 0l109-109c6.3-6.3 6.3-16.7 0-23.1L854 30.100000000000023c-6.3-6.3-16.7-6.3-23.1 0l-109 109c-6.3 6.3-6.3 16.7 0 23zM815.8 374.1v16.7c0 9 7.3 16.3 16.3 16.3h154.1c9 0 16.3-7.3 16.3-16.3v-16.7c0-9-7.3-16.3-16.3-16.3H832.1c-9 0-16.3 7.3-16.3 16.3zM732.3 590.3l-11.8 11.8c-6.3 6.3-6.3 16.7 0 23.1l109 109c6.3 6.3 16.7 6.3 23.1 0l11.8-11.8c6.3-6.3 6.3-16.7 0-23.1l-109-109c-6.4-6.3-16.7-6.3-23.1 0z',
          'M497.95072001 263.43424000000005a20.13184 20.13184 0 0 0 28.672 0l5.72415999-5.76512001a20.5312 20.5312 0 0 0 0-28.86655999l-74.45504-75.04896a20.13184 20.13184 0 0 0-28.672 0l-5.72416 5.76512a20.5312 20.5312 0 0 0 0 28.86656z m97.04447999 209.38752a181.16608 181.16608 0 0 1 65.9968 35.7376 126.45376 126.45376 0 1 0-133.77536-165.5808 239.47264 239.47264 0 0 1 67.77856 129.8432z m50.176-249.06752l10.24 0a19.16928 19.16928 0 0 0 19.16928-19.17952L674.58048 95.97951999999998A19.16928 19.16928 0 0 0 655.43168 76.79999998999995l-10.23999999 1e-8a19.16928 19.16928 0 0 0-19.17952001 19.17952001l0 108.59519999a19.16928 19.16928 0 0 0 19.17952 19.17952z m129.35168 39.68a20.25472 20.25472 0 0 0 28.74367999 0l74.75200001-75.04896a20.48 20.48 0 0 0 0-28.86656l-5.75488-5.76512a20.24448 20.24448 0 0 0-28.73344 0l-74.752 75.04896a20.48 20.48 0 0 0 0 28.86655999zM811.78624001 374.784l-1e-8 8.19200001a20.36736 20.36736 0 0 0 20.31615999 20.40831999L937.76896 403.38432001A20.36736 20.36736 0 0 0 958.08512 382.976l0-8.192a20.35712 20.35712 0 0 0-20.31616001-20.40832l-105.63584 0a20.35712 20.35712 0 0 0-20.34687998 20.40832z m-8.49920001 119.52127999a20.2752 20.2752 0 0 0-28.74368 1e-8l-5.74464 5.77536a20.48 20.48 0 0 0 0 28.86656l74.752 75.04896a20.24448 20.24448 0 0 0 28.73344 0l5.75488-5.77536a20.48 20.48 0 0 0 0-28.86656zM773.76512 691.2l-645.12 0s-153.6-110.08 20.48-204.8c0 0 14.08-184.32 194.56-184.32 0 0 186.88-26.88 204.8 194.56 0 0 139.48928001-11.776 143.36 122.88 92.5696 0.512 105.59488 71.68 81.92 71.68z',
          'M319.19478 244.83881199999996l-104.730542 0c-90.024788 0-162.978115 72.985295-162.978115 163.010084 0 44.980425 18.254316 85.708969 47.729762 115.216385 29.475446 29.475446 70.235959 47.729762 115.24835299 47.729761L809.216072 570.795042c89.992819 0 162.946146-72.98529501 162.946146-162.946146 0-45.01239399-18.222347-85.772907-47.729762-115.280322-29.475446-29.475446-70.235959-47.729762-115.216384-47.729762l-4.923231 0c0-133.918267-108.630764-242.549031-242.54903-242.54903001-133.950236 0-242.549031 108.630764-242.549031 242.54903001zM319.19478 267.217133a22.378321 22.378321 0 0 0 22.378321-22.378321c0-121.402391 98.76831799-220.17071 220.17071-220.17070901s220.17071 98.76831799 220.170709 220.17070901a22.378321 22.378321 0 1 0 44.756642 0c0-146.082483-118.844869-264.927352-264.927351-264.927351s-264.927352 118.844869-264.927352 264.927351a22.378321 22.378321 0 0 0 22.378321 22.378321zM214.464238 593.17336301L809.216072 593.173363c102.185807 0 185.324467-83.135463 185.324467-185.324467 0-49.539209-19.277325-96.102101-54.283413-131.104992-35.006088-35.006088-81.540208-54.283413-131.037857-54.283413a22.378321 22.378321 0 1 0 0 44.756642c37.541232 0 72.838238 14.622634 99.391714 41.172914s41.17611101 61.872861 41.176111 99.455652c0 77.50891299-63.058912 140.56782499-140.567825 140.567825l-594.755031-1e-8c-37.56361 0-72.873404-14.622634-99.423684-41.17610999-26.550279-26.575855-41.176111-61.879254-41.17611-99.391715 0-77.544079 63.071699-140.631763 140.596597-140.631763a22.378321 22.378321 0 1 0 0-44.756642c-102.204989 0-185.353239 83.164235-185.353239 185.388405 0 49.459286 19.274128 95.990209 54.277019 131.031464 35.012482 35.015679 81.559389 54.296201 131.079417 54.29620001zM214.464238 267.217133l179.154444 0a22.378321 22.378321 0 1 0 0-44.756642l-179.154444 0a22.378321 22.378321 0 1 0 0 44.756642zM837.077082 787.768849a22.378321 22.378321 0 0 0 13.733895-40.057195l-142.326122-110.421029a22.378321 22.378321 0 1 0-27.43582101 35.357747l142.32612101 110.42103a22.282414 22.282414 0 0 0 13.701927 4.699447zM629.27838699 787.768849a22.378321 22.378321 0 0 0 13.73389501-40.057195l-142.326122-110.421029a22.378321 22.378321 0 0 0-27.435821 35.357747l142.326121 110.42103a22.282414 22.282414 0 0 0 13.70192699 4.699447zM421.482888 787.768849a22.378321 22.378321 0 0 0 13.73389601-40.057195l-142.32931901-110.421029a22.378321 22.378321 0 0 0-27.435821 35.357747l142.329318 110.42103a22.282414 22.282414 0 0 0 13.701926 4.699447z',
          'M1236.601905 139.215238a255.512381 255.512381 0 0 1 0 511.024762q-140.434286 0-456.411429-265.264762 315.977143-245.76 456.411429-245.76zM473.965714 595.626667c-60.464762 33.158095-120.929524 56.56381-163.84 56.563809a260.388571 260.388571 0 1 1 0-520.777143c144.335238 0 460.312381 259.413333 460.312381 259.413334s-74.118095 60.464762-165.790476 122.88M1072.761905 213.33333300000004m-48.761905 0a48.761905 48.761905 0 1 1 97.52381 0 48.761905 48.761905 0 1 1-97.52381 0ZM756.784762 700.9523810000001m-48.761905 0a48.761905 48.761905 0 1 1 97.52381 0 48.761905 48.761905 0 1 1-97.52381 0ZM756.784762 41.69142899999997m-48.761905 0a48.761905 48.761905 0 1 1 97.52381 0 48.761905 48.761905 0 1 1-97.52381 0ZM317.927619 847.238095m-48.761905 0a48.761905 48.761905 0 1 1 97.52381 0 48.761905 48.761905 0 1 1-97.52381 0ZM317.927619-79.23809500000004m-48.761905 0a48.761905 48.761905 0 1 1 97.52381 0 48.761905 48.761905 0 1 1-97.52381 0ZM1244.40381 847.238095m-48.761905 0a48.761905 48.761905 0 1 1 97.523809 0 48.761905 48.761905 0 1 1-97.523809 0ZM1244.40381-79.23809500000004m-48.761905 0a48.761905 48.761905 0 1 1 97.523809 0 48.761905 48.761905 0 1 1-97.523809 0Z',
          'M516.7-28c-5.5 0-10 4.5-10 10V786c0 5.5 4.5 10 10 10s10-4.5 10-10v-804c0-5.5-4.5-10-10-10zM516.4 608.9c-2.6 0-5.1 1-7.1 2.9L386.5 734.7c-3.9 3.9-3.9 10.2 0 14.1 3.9 3.9 10.2 3.9 14.1 0L523.5 626c3.9-3.9 3.9-10.2 0-14.1-2-2-4.5-3-7.1-3zM516.4 608.9c-2.6 0-5.1 1-7.1 2.9-3.9 3.9-3.9 10.2 0 14.1l122.9 122.9c3.9 3.9 10.2 3.9 14.1 0 3.9-3.9 3.9-10.2 0-14.1L523.5 611.8c-2-1.9-4.5-2.9-7.1-2.9zM393.8 26.5c-2.6 0-5.1 1-7.1 2.9-3.9 3.9-3.9 10.2 0 14.1l122.9 122.9c3.9 3.9 10.2 3.9 14.1 0 3.9-3.9 3.9-10.2 0-14.1L400.9 29.5c-2-2-4.5-3-7.1-3zM639.5 26.5c-2.6 0-5.1 1-7.1 2.9L509.6 152.29999999999995c-3.9 3.9-3.9 10.2 0 14.1 3.9 3.9 10.2 3.9 14.1 0l122.9-122.9c3.9-3.9 3.9-10.2 0-14.1-1.9-1.9-4.5-2.9-7.1-2.9zM864.6 172.89999999999998c-1.7 0-3.4 0.4-5 1.3l-696.2 402c-4.8 2.8-6.4 8.9-3.7 13.7 2.8 4.8 8.9 6.4 13.7 3.7l696.2-402c4.8-2.8 6.4-8.9 3.7-13.7-1.9-3.2-5.2-5-8.7-5zM145.1 446.1c-4.4 0-8.5 2.9-9.7 7.4-1.4 5.3 1.7 10.8 7.1 12.2l167.8 45c5.3 1.4 10.8-1.7 12.2-7.1 1.4-5.3-1.7-10.8-7.1-12.2l-167.8-45c-0.7-0.1-1.6-0.3-2.5-0.3zM313 491.1c-4.4 0-8.5 2.9-9.7 7.4l-45 167.8c-1.4 5.3 1.7 10.8 7.1 12.2 5.3 1.4 10.8-1.7 12.2-7.1l45-167.8c1.4-5.3-1.7-10.8-7.1-12.2-0.8-0.2-1.7-0.3-2.5-0.3zM756 93.79999999999995c-4.4 0-8.5 2.9-9.7 7.4l-45 167.8c-1.4 5.3 1.7 10.8 7.1 12.2 5.3 1.4 10.8-1.7 12.2-7.1l45-167.8c1.4-5.3-1.7-10.8-7.1-12.2-0.8-0.2-1.6-0.3-2.5-0.3zM711 261.6c-4.4 0-8.5 2.9-9.7 7.4-1.4 5.3 1.7 10.8 7.1 12.2l167.8 45c5.3 1.4 10.8-1.7 12.2-7.1s-1.7-10.8-7.1-12.2l-167.8-45c-0.7-0.2-1.6-0.3-2.5-0.3zM168.4 172.70000000000005c-3.5 0-6.8 1.8-8.7 5-2.8 4.8-1.1 10.9 3.7 13.7l696.2 402c4.8 2.8 10.9 1.1 13.7-3.7s1.1-10.9-3.7-13.7L173.4 174c-1.6-0.8-3.3-1.3-5-1.3zM268.3 88.20000000000005c-0.9 0-1.7 0.1-2.6 0.3-5.3 1.4-8.5 6.9-7.1 12.2l45 167.8c1.4 5.3 6.9 8.5 12.2 7.1 5.3-1.4 8.5-6.9 7.1-12.2l-45-167.8a9.91 9.91 0 0 0-9.6-7.4zM313.2 256c-0.9 0-1.7 0.1-2.6 0.3l-167.8 45c-5.3 1.4-8.5 6.9-7.1 12.2 1.4 5.3 6.9 8.5 12.2 7.1l167.8-45c5.3-1.4 8.5-6.9 7.1-12.2-1.1-4.4-5.1-7.4-9.6-7.4zM878.9 441c-0.9 0-1.7 0.1-2.6 0.3l-167.8 45c-5.3 1.4-8.5 6.9-7.1 12.2 1.4 5.3 6.9 8.5 12.2 7.1l167.8-45c5.3-1.4 8.5-6.9 7.1-12.2-1.2-4.4-5.2-7.4-9.6-7.4zM711 486c-0.9 0-1.7 0.1-2.6 0.3-5.3 1.4-8.5 6.9-7.1 12.2l45 167.8c1.4 5.3 6.9 8.5 12.2 7.1 5.3-1.4 8.5-6.9 7.1-12.2l-45-167.8c-1.1-4.4-5.1-7.4-9.6-7.4z'
        ]
let data = JSON.parse('[{"reportDate":"2020-04-24","reportMonth":"202004","weather":"1","visitorCount":10,"tripCount":0,"memberCount":0},{"reportDate":"2020-04-25","reportMonth":"202004","weather":"0","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-04-26","reportMonth":"202004","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-04-27","reportMonth":"202004","weather":"2","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-04-28","reportMonth":"202004","weather":"4","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-04-29","reportMonth":"202004","weather":"2","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-04-30","reportMonth":"202004","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-01","reportMonth":"202005","weather":"2","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-02","reportMonth":"202005","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-03","reportMonth":"202005","weather":"3","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-04","reportMonth":"202005","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-05","reportMonth":"202005","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-06","reportMonth":"202005","weather":"4","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-07","reportMonth":"202005","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-08","reportMonth":"202005","weather":"3","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-09","reportMonth":"202005","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-10","reportMonth":"202005","weather":"1","visitorCount":40,"tripCount":50,"memberCount":0},{"reportDate":"2020-05-11","reportMonth":"202005","weather":"0","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-12","reportMonth":"202005","weather":"0","visitorCount":19,"tripCount":25,"memberCount":0},{"reportDate":"2020-05-13","reportMonth":"202005","weather":"0","visitorCount":20,"tripCount":30,"memberCount":0},{"reportDate":"2020-05-14","reportMonth":"202005","weather":"0","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-15","reportMonth":"202005","weather":"0","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-16","reportMonth":"202005","weather":"1","visitorCount":0,"tripCount":0,"memberCount":0},{"reportDate":"2020-05-17","reportMonth":"202005","weather":"1","visitorCount":20,"tripCount":0,"memberCount":0}]')
 let data1 = [],axisList = [],markPointList = [];
 data.map((item,index)=>{
     let value = Math.random()*100;
     data1.push(value);
     axisList.push(item.reportDate);
     markPointList.push({name:"人次",coord: [ index,value],symbol:'path://' + pathes[item.weather]})
 })
 option = {
  
          xAxis: {
            type: 'category',
            splitLine:{show:true,lineStyle:{ opacity:0.5}},
            axisLine:{show:true,lineStyle:{type:"dashed", opacity:0.5}},
            data: axisList
          },
          yAxis: {
            type: 'value',
            axisLine:{show:false},
            splitLine:{show:false}
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 0,
              end: 30,
              xAxisIndex: [0]
            }
          ],
          series: [{
            data: data1,
            name:"天气",
            type: 'line',
            markPoint: {
              symbolOffset:[0,-20],
              symbolSize:30,
              itemStyle: {
                color: '#56ACEF'
              },
              data: markPointList,
            },
            lineStyle:{
              opacity:0
            },
            itemStyle:{
              opacity:0
            }
          }]
        }