Echarts在线免费图表

 
            var btn = document.createElement('button')
btn.innerText = '播放'
btn.id = 'btnTest'

var arr = [
    [110.6189462165178, 456.64349563895087],
    [124.10988522879458, 450.8570048730469],
    [123.9272226116071, 389.9520693708147],
    [61.58708083147317, 386.87942320312504],
    [61.58708083147317, 72.8954315876116],
    [258.29514854771196, 72.8954315876116],
    [260.75457021484374, 336.8559607533482],
    [280.5277985253906, 410.2406672084263],
    [275.948185765904, 528.0254369698661],
    [111.06907909458701, 552.795792593471],
    [118.87138231445309, 701.365737015904],
    [221.36468155133926, 758.7870354617745],
    [307.86195445452006, 742.164737297712],
    [366.8489324762834, 560.9895157073103],
    [492.8750778390066, 560.9895157073103],
    [492.8750778390066, 827.9639780566406],
    [294.9255269587053, 827.9639780566406],
    [282.79803391043527, 868.2476088113839]
]

$('#chart-panel').prepend(btn)
$(btn).on('click', function() {
   $(this).text() == '暂停' ? $(this).text('播放') : $(this).text('暂停')
   var len = window.op.series[0].data.length
   var zrender = myChart.getZr()
   if(!len) {
        window.op.series[0].markPoint['symbolSize'] = 0
        window.op.series[0].data.push({
            coords: arr
        })
        myChart.setOption(window.op);
   } else {
       !!zrender.animation._paused ? zrender.animation.resume() : zrender.animation.pause()
   }
})

$.get('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/MacOdrum-LV5-floorplan-web.svg', function (svg) {

    echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });

    option = {
        title: {
            text: 'Visit Route',
            left: 'center',
            bottom: 10
        },
        tooltip: {
        },
        geo: {
            map: 'MacOdrum-LV5-floorplan-web',
            roam: true,
            emphasis: {
                itemStyle: {
                    color: null
                },
                label: {
                    show: false
                }
            }
        },
        series: [{
            name: 'Route',
            type: 'lines',
            coordinateSystem: 'geo',
            geoIndex: 0,
            emphasis: {
                label: {
                    show: false
                }
            },
            polyline: true,
            lineStyle: {
                color: '#c46e54',
                width: 5,
                opacity: 1,
                type: 'dotted'
            },
            effect: {
                show: true,
                period: 8,
                color: '#a10000',
                constantSpeed: 80,
                trailLength: 0,
                symbolSize: [20, 12],
                symbol: 'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z'
            },
            markPoint: {
                symbol: 'circle',
                symbolSize: 12,
                itemStyle: {
                  color: 'red'  
                },
                data: [{
                  name: '终点坐标',
                  coord: [282.79803391043527, 868.2476088113839]
                }]
            },
            data: []
            // data: [{
            //     coords: []
            // }]
        }]
    };

    window.op = option

    myChart.setOption(option);

});