路线图

描述:当前是关于Echarts图表中的 路径图 示例。
 
            //var phone = "/asset/get/s/data-1479698110623-HyvpIklzx.svg";

//var sms = "/asset/get/s/data-1479698126037-BJIR8ygfe.svg";

//var weibo = "/asset/get/s/data-1479698136548-rJZ1Dyezx.svg";

//var weixin = "/asset/get/s/data-1479698146250-rkqyPJeMg.svg";

var uploadedDataURL = "/asset/get/s/data-1479697763933-ByhDrJlGx.json";



$.get(uploadedDataURL, function (data) {
    echarts.registerMap('wuhan', data);

    var geoCoordMap = {
        '牵头医院': [113.3432, 30.62063],
        '基层医疗机构': [115.00717, 30.62063],
        //'热线': [115.00461, 30.08395],
        //'短信': [113.8432, 30.08395],
        //'武汉交管局': [115.00717, 30.62063]
    };

    var data = {
        '牵头医院': 20,
        '基层医疗机构': 30
        //'热线': 44,
        //'短信': 30
    };


    //var 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';
    var planePath = 'path://M196.608 348.16h206.336l65.024 120.832 62.464 75.776L660.992 348.16H890.88l69.632 198.656-30.72 106.496-39.936-1.024 10.752-90.624-26.112-68.608-5.12 158.208-32.768 299.52H783.36l-3.584-274.432h-30.208l-50.688 275.968h-59.392l18.432-301.568V501.76l-131.584 112.64-102.912-73.216-3.584 110.08-34.816 301.568H325.12v-275.968h-30.208L240.64 950.784H187.392l20.48-299.52-5.12-137.216-77.312 93.184v40.448h25.088v207.872H69.632v-207.872h25.088v-41.984l-17.92-7.68L196.608 348.16z m607.744-225.28c-47.104-28.672-108.544-13.312-137.216 33.792-28.672 47.104-13.312 108.544 33.792 137.216s108.544 13.312 137.216-33.792c28.672-47.104 13.312-108.544-33.792-137.216zM256 122.88c47.104-28.672 108.544-13.312 137.216 33.792 28.672 47.104 13.312 108.544-33.792 137.216S250.88 307.2 222.208 260.096C194.048 212.992 208.896 151.552 256 122.88z'
    option = {
        backgroundColor: '#FFFFFF',
        tooltip: {
            trigger: 'item',
            formatter: function (o) {

                return o.name + ":" + o.value[2] + "起";
            }
        },

        geo: {
            map: 'wuhan',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    color: 'rgba(22,22,2,0)',
                    areaColor: 'rgba(22,22,2,0)',
                    borderColor: 'rgba(22,22,2,0)'

                },
                emphasis: {

                    color: 'rgba(22,22,2,0)',
                    areaColor: 'rgba(22,22,2,0)',
                    borderColor: 'rgba(22,22,2,0)'
                }
            }
        },
        series: [{
            type: 'lines',//箭头
            zlevel: 1,
            effect: {
                show: true,
                period: 5,
                trailLength: 0.1,
                color: '#8C88FF',
                symbolSize: 12
            },
            lineStyle: {
                normal: {
                    color: '#8C88FF',
                    width: 0,
                    curveness: 0.1
                }
            },
            data: [{
                coords: [geoCoordMap['牵头医院'], geoCoordMap['基层医疗机构']]
            }]
        }, {
            type: 'lines',//线
            zlevel: 2,
            effect: {
                show: true,
                period: 5,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 30
            },
            lineStyle: {
                normal: {
                    color: '#8C88FF',
                    width: 2,
                    opacity: 0.4,
                    curveness: 0.1
                }
            },
            data: [{
                coords: [geoCoordMap['牵头医院'], geoCoordMap['基层医疗机构']]
            }]
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                period: 4,
                scale: 1.5,
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },

            symbolSize: '80',
            itemStyle: {
                normal: {
                    color: '#5A65E2',
                }
            },
            data: [{
                name: '牵头医院',
                value: geoCoordMap['牵头医院'].concat(data.牵头医院),
                //symbol: 'path://M266.048,191.088c50.663,0,92.957,30.761,102.883,71.688c-1.659-0.072-3.339-0.104-5.021-0.104c-55.207,0-99.959,38.572-99.959,86.153c0,7.81,1.204,15.359,3.465,22.554c-0.456,0-0.922,0.011-1.369,0.011c-13.611,0-26.619-2.21-38.559-6.256l-37.043,18.925l10.373-32.126c-24.295-16.517-39.875-42.044-39.875-70.698C160.943,231.442,207.999,191.088,266.048,191.088L266.048,191.088z M360.747,271.463c48.777,0,88.31,33.899,88.31,75.746c0,24.128-13.153,45.62-33.65,59.509l8.132,26.194L393.735,417.5l0.031-0.021c-10.208,3.535-21.349,5.475-33.02,5.475c-48.775,0-88.319-33.909-88.319-75.744C272.428,305.362,311.972,271.463,360.747,271.463L360.747,271.463z M392.864,310.91c6.494,0,11.773,5.287,11.773,11.813c0,6.549-5.279,11.847-11.773,11.847s-11.774-5.298-11.774-11.847C381.09,316.197,386.37,310.91,392.864,310.91L392.864,310.91z M334.513,310.91c6.493,0,11.774,5.287,11.774,11.813c0,6.549-5.281,11.847-11.774,11.847c-6.504,0-11.763-5.298-11.763-11.847C322.75,316.197,328.009,310.91,334.513,310.91L334.513,310.91z M229.523,234.299c8.081,0,14.637,6.58,14.637,14.704c0,8.112-6.556,14.702-14.637,14.702c-8.081,0-14.627-6.59-14.627-14.702C214.896,240.879,221.442,234.299,229.523,234.299L229.523,234.299z M302.055,234.299c8.08,0,14.626,6.58,14.626,14.704c0,8.112-6.546,14.702-14.626,14.702c-8.082,0-14.637-6.59-14.637-14.702C287.418,240.879,293.973,234.299,302.055,234.299L302.055,234.299z'
                symbol: 'path://M899.011 339H756v121h81v62h-81v73h81v64h-81v68h81v63h-81v98h203V401.868C959 367.139 932.688 339 899.011 339zM270 790h-82v-63h82v-68h-82v-64h82v-73h-82v-62h82V339H126.632C92.955 339 65 367.139 65 401.868V888h205v-98z" fill="#BDCCD4" p-id="14979"></path><path d="M756 789.646V125.883C756 91.154 727.684 63 692.955 63h-359.83C298.396 63 270 91.154 270 125.883V888H65v70h894v-70H756v-98.354zM401 192h77v-77h70v77h77v70h-77v76h-70v-76h-77v-70z m26 219h69v70h-69v-70z m173 70h-70v-70h70v70z m103 0h-70v-70h70v70z m-379-70h69v70h-69v-70z m103 139h69v70h-69v-70z m173 70h-70v-70h70v70z m103 0h-70v-70h70v70z m-379-70h69v70h-69v-70z m103 138h69v70h-69v-70z m173 70h-70v-70h70v70z m103 0h-70v-70h70v70z m-379-70h69v70h-69v-70z m69 199h-69v-69h69v69z m103 0h-69v-69h69v69z m104 0h-70v-69h70v69z m103 0h-70v-69h70v69z" fill="#F45656" p-id="14980"></path><path d="M324 411h69v70h-69zM427 411h69v70h-69zM530 411h70v70h-70zM633 411h70v70h-70zM324 550h69v70h-69zM427 550h69v70h-69zM530 550h70v70h-70zM633 550h70v70h-70zM324 688h69v70h-69zM427 688h69v70h-69zM530 688h70v70h-70zM633 688h70v70h-70zM324 818h69v69h-69zM427 818h69v69h-69zM530 818h70v69h-70zM633 818h70v69h-70z'
                // symbol: 'image:'+weixin
            }/*,{
                name: '基层医疗机构',
                value: geoCoordMap['基层医疗机构'].concat(data.基层医疗机构),
                //symbol: 'path://M124.302,345.927c0.08,59.373,76.261,95.476,150.779,95.476c97.736,0,162.761-56.793,162.761-101.885 c0-27.233-22.951-42.698-43.563-49.094c-5.053-1.503-8.537-2.54-5.877-9.188c5.73-14.441,6.329-26.901,0.106-35.783 c-11.676-16.662-43.589-15.771-80.184-0.452c0-0.014-11.489,5.026-8.551-4.083c5.625-18.098,4.774-33.243-3.976-42.006 c-19.854-19.854-72.644,0.758-117.922,46.009c-33.815,33.828-53.482,69.679-53.575,100.701V345.927L124.302,345.927z M275.268,420.101c-59.493,5.864-110.848-21.023-114.717-60.092c-3.856-39.055,41.262-75.476,100.754-81.354 c59.493-5.891,110.848,20.997,114.704,60.052C379.865,377.788,334.773,414.209,275.268,420.101L275.268,420.101z M459.185,181.664 c-23.604-26.17-58.416-36.143-90.569-29.308l0,0c-7.433,1.582-12.181,8.909-10.585,16.329c1.583,7.42,8.896,12.181,16.33,10.585 c22.871-4.854,47.604,2.247,64.386,20.837c16.768,18.59,21.329,43.948,14.135,66.168l0.014,0.014 c-2.34,7.233,1.609,14.986,8.856,17.326c7.233,2.327,14.999-1.622,17.34-8.843c0-0.014,0-0.04,0-0.053 C489.17,243.443,482.787,207.807,459.185,181.664L459.185,181.664z M422.936,214.376c-11.489-12.739-28.443-17.579-44.107-14.255 c-6.409,1.356-10.479,7.659-9.109,14.068c1.37,6.383,7.673,10.479,14.056,9.096v0.013c7.646-1.622,15.943,0.731,21.568,6.955 c5.611,6.236,7.128,14.72,4.708,22.18h0.026c-2.021,6.21,1.383,12.898,7.605,14.906c6.237,1.995,12.912-1.396,14.92-7.632 C437.522,244.481,434.451,227.114,422.936,214.376L422.936,214.376z M278.565,349.345c-2.088,3.563-6.688,5.279-10.292,3.79 c-3.537-1.463-4.654-5.439-2.633-8.937c2.074-3.471,6.488-5.173,10.025-3.763C279.257,341.738,280.547,345.768,278.565,349.345 L278.565,349.345z M259.604,373.679c-5.758,9.188-18.085,13.204-27.366,8.976c-9.149-4.175-11.835-14.84-6.091-23.789 c5.691-8.909,17.606-12.885,26.808-9.016C262.289,353.813,265.255,364.41,259.604,373.679L259.604,373.679z M281.225,308.708c-28.311-7.367-60.317,6.741-72.617,31.688c-12.513,25.438-0.412,53.682,28.19,62.923c29.64,9.548,64.56-5.093,76.7-32.552C325.479,343.919,310.519,316.273,281.225,308.708L281.225,308.708z'
                symbol: 'path://M527.57504 71.91552 24.38144 417.75616 24.38144 512l94.24384 0 0 440.0896 786.75456 0L905.37984 512l94.23872 0L999.61856 417.75616 527.57504 71.91552zM752.3072 660.17792l-174.67392 0 0 174.67392L446.05952 834.85184l0-174.67392L272.52224 660.17792l0-130.432 174.67392 0L447.19616 355.07712l130.43712 0 0 174.67392 174.67392 0L752.3072 660.17792z'
                    // symbol: 'image://'+weibo
            }*/]
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                period: 4,
                scale: 1.5,
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },

            symbolSize: '70',
            itemStyle: {
                normal: {
                    color: '#5A65E2',
                }
            },
            data: [{
                name: '基层医疗机构',
                value: geoCoordMap['基层医疗机构'].concat(data.基层医疗机构),
                //symbol: 'path://M124.302,345.927c0.08,59.373,76.261,95.476,150.779,95.476c97.736,0,162.761-56.793,162.761-101.885 c0-27.233-22.951-42.698-43.563-49.094c-5.053-1.503-8.537-2.54-5.877-9.188c5.73-14.441,6.329-26.901,0.106-35.783 c-11.676-16.662-43.589-15.771-80.184-0.452c0-0.014-11.489,5.026-8.551-4.083c5.625-18.098,4.774-33.243-3.976-42.006 c-19.854-19.854-72.644,0.758-117.922,46.009c-33.815,33.828-53.482,69.679-53.575,100.701V345.927L124.302,345.927z M275.268,420.101c-59.493,5.864-110.848-21.023-114.717-60.092c-3.856-39.055,41.262-75.476,100.754-81.354 c59.493-5.891,110.848,20.997,114.704,60.052C379.865,377.788,334.773,414.209,275.268,420.101L275.268,420.101z M459.185,181.664 c-23.604-26.17-58.416-36.143-90.569-29.308l0,0c-7.433,1.582-12.181,8.909-10.585,16.329c1.583,7.42,8.896,12.181,16.33,10.585 c22.871-4.854,47.604,2.247,64.386,20.837c16.768,18.59,21.329,43.948,14.135,66.168l0.014,0.014 c-2.34,7.233,1.609,14.986,8.856,17.326c7.233,2.327,14.999-1.622,17.34-8.843c0-0.014,0-0.04,0-0.053 C489.17,243.443,482.787,207.807,459.185,181.664L459.185,181.664z M422.936,214.376c-11.489-12.739-28.443-17.579-44.107-14.255 c-6.409,1.356-10.479,7.659-9.109,14.068c1.37,6.383,7.673,10.479,14.056,9.096v0.013c7.646-1.622,15.943,0.731,21.568,6.955 c5.611,6.236,7.128,14.72,4.708,22.18h0.026c-2.021,6.21,1.383,12.898,7.605,14.906c6.237,1.995,12.912-1.396,14.92-7.632 C437.522,244.481,434.451,227.114,422.936,214.376L422.936,214.376z M278.565,349.345c-2.088,3.563-6.688,5.279-10.292,3.79 c-3.537-1.463-4.654-5.439-2.633-8.937c2.074-3.471,6.488-5.173,10.025-3.763C279.257,341.738,280.547,345.768,278.565,349.345 L278.565,349.345z M259.604,373.679c-5.758,9.188-18.085,13.204-27.366,8.976c-9.149-4.175-11.835-14.84-6.091-23.789 c5.691-8.909,17.606-12.885,26.808-9.016C262.289,353.813,265.255,364.41,259.604,373.679L259.604,373.679z M281.225,308.708c-28.311-7.367-60.317,6.741-72.617,31.688c-12.513,25.438-0.412,53.682,28.19,62.923c29.64,9.548,64.56-5.093,76.7-32.552C325.479,343.919,310.519,316.273,281.225,308.708L281.225,308.708z'
                symbol: 'path://M527.57504 71.91552 24.38144 417.75616 24.38144 512l94.24384 0 0 440.0896 786.75456 0L905.37984 512l94.23872 0L999.61856 417.75616 527.57504 71.91552zM752.3072 660.17792l-174.67392 0 0 174.67392L446.05952 834.85184l0-174.67392L272.52224 660.17792l0-130.432 174.67392 0L447.19616 355.07712l130.43712 0 0 174.67392 174.67392 0L752.3072 660.17792z'
                // symbol: 'image://'+weibo
            }]
        }]
    };


    myChart.setOption(option);

    var currentIndex = -1;
    var timeTicket = setInterval(function () {
        var dataLen = option.series[2].data.length;

        currentIndex = (currentIndex + 1) % dataLen;

        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 2,
            dataIndex: currentIndex
        });
    }, 1000);

});