博客

echart地图,hover到markPoint后,异步加载信息,展示一个table

代码如下:

myChart.setOption(option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            if (params.componentType !== 'markPoint') {
                                return params.name;
                            } else {
                                return params;
                            }
                        },
                        triggerOn: 'click',// 点击MarkPoint出发弹出tooltip
                        position: function (pos, params, dom, rect, size) {
                            if (params.componentType === 'markPoint') {
                                var obj = params.data;
                                var sHtml = $('<div style="width: 549px;" class="tooltip-dom"></div>');// border: solid 1px darkgray;width: 425px;
                                var p = $('<p style="" class="tooltip-title">' + obj.title + '</p>');//background-color: darkgrey;
                                sHtml.append(p);
                                var span = $('<span>' + obj.name + '</span>');
                                sHtml.append(span);
                                var table = $('<table class="table"></table>');
                                var thead = $('<thead><tr><th>粮仓</th><th>行政区域</th><th>粮堆最高温度</th><th>仓内湿度</th></tr></thead>');
                                var tbody;
                                if (!obj.barnList || obj.barnList.length === 0) {
                                    tbody = $('<tbody><tr><td colspan="4" style="text-align: center">没有数据</td></tr></tbody>');
                                } else {
                                    tbody = $('<tbody></tbody>');
                                    for (var i in obj.barnList) {
                                        var barn = obj.barnList[i];
                                        var tr = $('<tr></tr>');
                                        tr.append($('<td><a href="#">' + barn.barnname + '</a></td>'));
                                        tr.append($('<td>' + barn.areaName + '</td>'));
                                        tr.append($('<td>' + barn.heaphighwd + '°C</td>'));
                                        tr.append($('<td>' + barn.barnhighsd + '°C</td>'));
                                        tbody.append(tr);
                                    }
                                }
                                table.append(thead);
                                table.append(tbody);
                                sHtml.append(table);
                                $(dom).addClass('tooltip-style').html(sHtml);
                                // $('#test').addClass('tooltip-style').html(sHtml);
                                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                                // var tooltip = {top: '50%'};
                                // tooltip[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                                return 'bottom';
                            }
                        }
                    },
                    series: [{
                        type: 'map',
                        mapType: name,
                        animation: false,
                        selectedMode: 'single',
                        roam: true,
                        showLegendSymbol: true,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                },
                                areaStyle: {
                                    color: 'green'
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: dataArr,
                        "markPoint": {
                            "symbol": "circle",
                            "symbolSize": 20,
                            "label": {
                                "normal": {
                                    "show": false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#A32D2D', //标志颜色
                                    borderColor: "#fff",
                                    borderWidth: 1
                                },
                                emphasis: {
                                    borderColor: '#A32D2D',
                                    borderWidth: 1
                                }
                            },
                            zlevel: 6,
                            "data": mapPointDataArr
                        }
                    }]
                });