吉林省车辆通行路线ECharts Gallery

20:11:45图表已生成
代码
var uploadedDataURL = "/asset/get/s/data-1482909832739-rJ-cdy-Hx.json";

$.getJSON(uploadedDataURL, function(geoJson) {

    echarts.registerMap('jilin', geoJson);
    let positionData = [
        [127.2808389302688, 42.30988722890512, "抚松互通至榆树川互通S门架"],
        [125.94983637920117, 42.890404601870685, "西兴隆互通S至一座营互通门架"],
        [125.913469599092, 41.43548701609915, "清河互通至五女峰互通门架"],
        [123.85247350046755, 43.913703494916476, "兴隆互通至新安互通门架"]
    ];
    let len = positionData.length - 1;
    let coorData = []
    positionData.forEach(item => {
        let cooritem = [item[0], item[1]]
        coorData.push(cooritem)
    });
    option = {
        backgroundColor: "#013954",
        geo: {
            map: "jilin",
            show: true,
            aspectScale: 0.75, //长宽比
            zoom: 1,
            roam: 'scale',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: "#1DE9B6",
                    },
                },
                emphasis: {
                    textStyle: {
                        color: "rgb(183,185,14)",
                    },
                },
            },
            itemStyle: {
                normal: {
                    areaColor: {
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                                offset: 0,
                                color: "#09132c", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#072460", // 100% 处的颜色
                            },
                        ],
                        globalCoord: true, // 缺省为 false
                    },
                    shadowColor: "rgb(58,115,192)",
                    shadowOffsetX: 1,
                    shadowOffsetY: 1,
                },


            },
            silent: true, //鼠标经过地图不高亮
        },
        series: [{ //首尾涟漪效果
                type: "effectScatter",
                coordinateSystem: "geo",
                showEffectOn: "render",
                zlevel: 1,
                rippleEffect: {
                    period: 15,
                    scale: 4,
                    brushType: "fill",
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: "{b}",
                        position: "right",
                        offset: [15, 0],
                        color: "#1DE9B6",
                        show: true,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#1DE9B6",
                        shadowBlur: 10,
                        shadowColor: "#333",
                    },
                },
                symbol: "circle",
                symbolSize: 16,
                data: [{
                        value: coorData[0],
                        itemStyle: {
                            color: "#4ab2e5",
                        },
                    },
                    {
                        value: coorData[len],
                    },
                ],
            },
            { //地图线的动画效果
                type: "lines",
                zlevel: 2,
                effect: {
                    show: true,
                    period: 8, //箭头指向速度，值越小速度越快
                    trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
                    symbolSize: 17, //图标大小
                },
                lineStyle: {
                    normal: {
                        color: "#1DE9B6",
                        width: 3, //线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: 0.3, //尾迹线条曲直度
                    },
                },
                polyline: true,
                label: {},
                data: [{
                    coords: coorData,
                    lineStyle: {
                        color: "#4ab2e5",
                    },
                }, ],
            },
            { //气泡点
                type: "scatter",
                symbol: "pin",
                symbolSize: 24,
                zlevel: 3,
                label: {
                    show: true,
                    formatter: (param) => {
                        return param.value[2];
                    },
                    fontSize: 12,
                    position: [15, 15],
                    borderWidth: 1,
                    borderColor: "#1c7baf",
                    borderRadius: 4,
                    color: "#fff",
                    padding: [5, 10],
                },
                emphasis: {
                    label: {
                        backgroundColor: "#0c4fff",
                    },
                },
                itemStyle: {
                    color: "lightskyblue",
                },
                coordinateSystem: "geo",
                data: positionData,
            },
        ]
    };
    myChart.setOption(option);
})
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
