Một dự án gần đây yêu cầu tôi triển khai chức năng cho phép điều khiển chọn các vùng cụ thể trên bản đồ thông qua dữ liệu từ API. Người dùng có thể nhấp vào các vùng để xem chi tiết, nhưng trạng thái chọn của các vùng này sẽ không thay đổi khi người dùng tương tác.

Tham khảo:

Tùy chọn cấu hình selectedMode: https://echarts.apache.org/zh/option.html#legend.selectedMode API on: https://echarts.apache.org/zh/api.html#echartsInstance.on dispatchAction: https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction

Triển khai mã nguồn

// Chỉ trích dẫn phần cấu hình trong series
	let mapInstance = echarts.init(document.getElementById('map_container'));
	let config = {
		series: [{
		    title: 'Bản đồ khu vực',
		    chartType: 'map',
		    regionKey: 'VN', // Tên khu vực đã đăng ký
		    regionData: mapData,
		    selectionMode: 'multiple', // Cho phép chọn nhiều
		    navigationControl: false, // Tắt tính năng zoom và di chuyển
		}]
	}
	mapInstance.setOption(config);
	mapInstance.on('click', function (elementInfo) {
		// Kiểm tra trạng thái chọn dựa trên thuộc tính selected trong dữ liệu
	        if (elementInfo.data.selected) {
	        	 // Dữ liệu quyết định chọn hay không
	             mapInstance.dispatchAction({
	                 actionType: 'select',
	                 seriesIndex: 0,
	                 regionName: elementInfo.data.name
	             })
	         } else {
	         	// Hoặc bỏ chọn
	             mapInstance.dispatchAction({
	                 actionType: 'unselect',
	                 seriesIndex: 0,
	                 regionName: elementInfo.data.name
	             })
	         }
	         // Tránh thay đổi trạng thái chọn khi người dùng nhấp
	         // Hiển thị thông tin chi tiết về vùng được chọn
	     })

Tôi cũng đã sử dụng hiệu ứng chuyển màu cho các vùng bản đồ, cấu hình như sau:

	regionStyle: {
       default: { // Đường viền bản đồ
            label: { display: true },
            fillColor: '#fceeed',
            strokeColor: '#ec7d7b',
            lineWidth: 1.3,
        },
        highlight: { // Vùng được chọn
            label: { display: true },
            // fillColor: '#ed4040',
            fillColor: new echarts.graphic.LinearGradient(
                0, 1, 0, 0, 
                // 4 tham số cấu tạo vị trí bắt đầu và kết thúc của gradient
                // 0 0 0 1 có nghĩa gradient bắt đầu từ phía trên
                [
                    { offset: 1, color: '#ff7e4c' },
                    { offset: 0.5, color: '#fea173' },
                    { offset: 0, color: '#ff7e4c' }
                ]
            )
        },
    },