Echarts实战案例代码(27)：地理坐标图视觉引导线及富文本提示框的案例

项目要点

1. 使用如何注册地理坐标图；
2. 带有起点和终点信息的线数据的路径图的使用；
3. 使用富文本表现文本框；
4. 多组数据在文本内如何使用 formatter回调函数；
5. 区域鼠标事件变化文本框样式；

geoJSON数据

调用geoJSON，设置区域中心点坐标和显示文本框位置的经纬度坐标；

myChart.showLoading();
var uploadedDataURL = "/asset/get/s/data-1593486529294-SRyGZ7brP.json";
const COORDS_LINE = {
    '海淀区': [
        [116.301234,39.967085],
        [117.2, 39.94]
    ],
    '丰台区': [
        [116.283699,39.866367],
        [115.6, 40.8]
    ]
}

展示数据

let data = [{
    name: '海淀区',
    value: 500,
    group: '隆科多'
}, {
    name: '丰台区',
    value: 600,
    group: '成文运'
}];

注册地图

$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('beijing', geoJson);
    handleChangeOption();
    myChart.hideLoading();
});

核心代码

function handleChangeOption() {
    option = {
        backgroundColor: '#ccc',
        series: [{
                type: 'map',
                zoom: 1.2,
                z: 2,
                mapType: 'beijing',
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: false
                    },
                    itemStyle: {
                        borderColor: '#EBF3F3',
                        borderWidth: 2,
                        areaColor: '#fff'
                    }
                },
                itemStyle: {
                    borderColor: '#ccc',
                    borderWidth: 2,
                    areaColor: '#fff'
                },
                data: data
            },
            {
                type: 'lines',
                z: 3,
                coordinateSystem: 'geo',
                symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
                symbolSize: [10,0],//只保留地图端标记
                opacity: 1,
                label: {
                    show: true,
                    position: 'end',
                    formatter: function(params) {//文本提示框
                        return '{title|' + params.name + '}\n{value| 成员人数：' + params.value + '}\n{value| 责任人：' + params.data.group + '}'
                    },
                    backgroundColor: '#eee',
                    borderColor: '#FF0033',
                    borderWidth: 1,
                    borderRadius: 4,
                    align: 'center',
                    width: 100,
                    rich: { //标题样式
                        title: {
                            align: 'center',
                            lineHeight: 17,
                            fontSize: 12,
                            color: '#fff',
                            backgroundColor: '#FF0033',
                            width: 100,
                            height: 25,
                            borderRadius: [4, 4, 0, 0]
                        },
                        value: { //内容样式
                            height: 25,
                            width: 100,
                            color: '#FF0033',
                            backgroundColor: '#fff',
                            borderRadius: [0, 0, 4, 4]
                        }
                    }
                },
                lineStyle: { //视觉引导线属性
                    type: 'solid',
                    opacity: 1,
                    color: '#FF0033', //引导线颜色
                    curveness: 0.1
                },
                data: data.map((item) => {
                    let label = {};
                    if (item.name === activeAreaName) {
                        let width = 92;
                        label = {
                            formatter: function(params) {
                                return '{title|' + params.name + '}\n{value| 成员人数：' + params.value + '}\n{value| 责任人：' + params.data.group + '}'
                            },
                            backgroundColor: '#FFB569',
                            borderColor: '#FFB569',
                            width: 100,
                            rich: {
                                title_active: {
                                    align: 'center',
                                    lineHeight: 17,
                                    fontSize: 12,
                                    color: '#fff',
                                    backgroundColor: '#FFB569',
                                    width: 100,
                                    height: 25,
                                    borderRadius: [4, 4, 0, 0]
                                },
                                value_active: {
                                    height: 25,
                                    width: 100,
                                    color: '#FFB569',
                                    backgroundColor: '#fff',
                                    borderRadius: [0, 0, 4, 4]
                                }
                            }
                        };
                    }
                    return Object.assign({
                        coords: COORDS_LINE[item.name],
                        label
                    }, item);
                })
            }
        ],
        geo: {
            geoIndex: 1,
            map: 'beijing',
            label: {
                show: false
            },
            zoom: 1.2
        }
    };
    myChart.setOption(option, true);
}

鼠标事件

//鼠标事件;
let activeAreaName = '';

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

myChart.on('globalout', () => {
    activeAreaName = '';
    handleChangeOption();
});

LOCKDATAV DONE！