地图功能练习ECharts Gallery

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

myChart.showLoading();

// 散点图数据
let data = [{
        name: "北京",
        value: [116.24, 39.55, 100]
    },
    {
        name: "深圳",
        value: [114.271522, 22.753644]
    },

    {
        name: "重庆",
        value: [106.54, 29.59]
    },
    {
        name: "浙江",
        value: [120.19, 30.26]
    },

]
// 小框数据
let LableData = [{
        name: "北京",
        coords: [
            [116.24, 39.55, 100],
            [105, 51, 100]
        ], // 线条位置[开始位置，结束位置]
        value: [10.21, 1.20]
    },
    {
        name: "深圳",
        coords: [
            [114.271522, 22.753644],
            [116, 18.55, 100]
        ], // 线条位置[开始位置，结束位置]
        value: [10.21, 1.20]
    },
    {
        name: "重庆",
        coords: [
            [106.54, 29.59],
            [97, 17]
        ], // 线条位置[开始位置，结束位置]
        value: [10.21, 1.20]
    },
    {
        name: "浙江",
        coords: [
            [120.19, 30.26],
            [128.24, 35.55, 100]
        ], // 线条位置[开始位置，结束位置]
        value: [10.21, 1.20]
    },
];
let flowLineColor='#ffdb5c';  //流动线条颜色


let activeAreaName = '';
myChart.on('mouseover', ({
    name
}) => {
    if (activeAreaName !== name) {
        activeAreaName = name;
        handleChangeOption();
    }
})
myChart.on('globalout', () => {
    activeAreaName = '';
    handleChangeOption();
});


function handleChangeOption() {
    option = {
        backgroundColor: '#000f1e',
        geo: [
            {
                map: 'china',
                aspectScale: 0.85,
                roam:false,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '100%',
                zlevel:2,
                silent: true,
                itemStyle: {
                    areaColor: {
                        type: 'radial',
                        x: 650,
                        y: 520,
                        r: 300,
                        colorStops: [{
                            offset: 0,
                            color: '#56CCFB' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#0160AD' // 100% 处的颜色
                        }],
                        global: true // 缺省为 false
                    },
                    borderColor: '#37C1FD',
                    borderWidth: 2,
                }
            },
            //底部
            {
                map: 'china',
                aspectScale: 0.85,
                roam:false,
                layoutCenter: ["50%", "52%"], //地图位置
                layoutSize: '100%',
                zlevel:1,
                silent: true,
                itemStyle: {
                    areaColor: '#005DDC',
                    borderColor: '#329BF5',
                    borderWidth: 1,
                },
                regions: [{
                    name: '南海诸岛',
                    itemStyle: {
                        areaColor: 'rgba(0, 10, 52, 1)',
                        borderColor: 'rgba(0, 10, 52, 1)',
                        normal: {
                            opacity: 0,
                            label: {
                                show: true,
                                color: "#009cc9",
                            }
                        },
    
    
                    }
                }],
            }
        ],
        series: [
            // 散点 effectScatter
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                symbolSize: 10,
                rippleEffect: { //坐标点动画
                    period: 3,
                    scale: 5,
                    brushType: 'fill'
                },
                label: {
                    show: false
                },

                data: data,
                itemStyle: { //坐标点颜色
                    normal: {
                        show: true,
                        color:flowLineColor,
                        shadowBlur: 10,
                        shadowColor: '#fff'
                    },
                    emphasis: {
                        areaColor: '#f00'
                    }
                },

            },
            {
                type: 'lines',
                zlevel: 3, //设置这个才会有轨迹线的小尾巴
                polyline: true,
                effect: {
                    show: true,
                    period: 10,
                    trailLength: 0.7,
                    color: flowLineColor, //流动点颜色
                    symbol: 'arrow',
                    symbolSize: 6
                },
                lineStyle: {
                    normal: {
                        color: flowLineColor, //线条颜色
                        width: 1.5,
                        curveness: 0.2,
                        shadowColor: flowLineColor,
                    }
                },
                data: [{

                        fromName: "北京",
                        toName: "深圳",
                        coords: [
                            [116.24, 39.55],
                            [114.271522, 22.753644],
                            [116.24, 39.55]
                        ]
                    },
                    {

                        fromName: "北京",
                        toName: "浙江",
                        coords: [
                            [116.24, 39.55],
                            [120.19, 30.26],
                            [116.24, 39.55],

                        ]
                    },
                    {
                        fromName: "北京",
                        toName: "重庆",
                        coords: [
                            [116.24, 39.55],
                            [106.54, 29.59],
                            [116.24, 39.55],

                        ]
                    }
                ],

            },
            {
                type: 'lines',
                zlevel: 3,
                symbol: 'circle',
                symbolSize: [5, 5],
                color: '#ff8003',
                opacity: 1,
                label: {
                    show: true,
                    padding: [10, 20],
                    color: '#fff',
                    backgroundColor: "#1E62AC",
                    borderColor: '#24CFF4',
                    borderWidth: 2,
                    borderRadius: 6,
                    formatter(params) {
                        console.log(params)
                        let arr = [params.name, "数据一：" + params.value[1], "数据二：" + params.value[0]];
                        return arr.join("\n")
                    },
                    textStyle: {
                        align: 'left',
                        lineHeight: 20,
                    }
                },
                lineStyle: {
                    type: 'solid',
                    color: '#24CFF4',
                    width:1,
                    opacity: 1,

                },
                data: LableData,


            },
        ]
    };
    myChart.setOption(option, true);
}
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('china', geoJson);
    echarts.registerMap('china2', geoJson);
    handleChangeOption();
    myChart.hideLoading();
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
