Echarts 地圖控件tooltip多行顯示


直接上代碼

var o = {
                "tooltip":
                {
                    trigger: 'item',
                    "formatter": function (params) {
                        var obj = JSON.parse(JSON.stringify(params));
                        var itemName = obj.name;
                        var dataIndex = obj.dataIndex;
                        var str = "<ur style='text-align:left'><li style='color: #da70d6;font:bolder;'>" + itemName + "</li>";
                        for (var i = 0; i < o.series.length;i++) {
                            str = str + "<li>" + o.series[i].name + ":" + o.series[i].data[dataIndex].value + "</li>";
                        }
                        str = str + "</ul>";
                        return str;
                    }
                },
                "series": [{ "mapType": "成都", "name": "登錄人數", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0 }, { "name": "武侯區", "value": 77 }, { "name": "雙流區", "value": 0 }] }, { "mapType": "成都", "name": "登錄次數", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0 }, { "name": "武侯區", "value": 32378 }, { "name": "雙流區", "value": 0 }] }, { "mapType": "成都", "name": "登錄率", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": "0.00%" }, { "name": "武侯區", "value": "62.10%" }, { "name": "雙流區", "value": "0.00%" }] }, { "mapType": "成都", "name": "總學時", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0 }, { "name": "武侯區", "value": 40 }, { "name": "雙流區", "value": 0 }] }, { "mapType": "成都", "name": "學習次數", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0 }, { "name": "武侯區", "value": 186 }, { "name": "雙流區", "value": 0 }] }, { "mapType": "成都", "name": "學習率", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": "0.00%" }, { "name": "武侯區", "value": "16.95%" }, { "name": "雙流區", "value": "0.00%" }] }, { "mapType": "成都", "name": "學習轉換率", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": "0.00%" }, { "name": "武侯區", "value": "0.57%" }, { "name": "雙流區", "value": "0.00%" }] }, { "mapType": "成都", "name": "學員人數", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0 }, { "name": "武侯區", "value": 124 }, { "name": "雙流區", "value": 0 }] }, { "mapType": "成都", "name": "已制作課件數", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0 }, { "name": "武侯區", "value": 644 }, { "name": "雙流區", "value": 0 }] }, { "mapType": "成都", "name": "已制作課件數", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0 }, { "name": "武侯區", "value": 236 }, { "name": "雙流區", "value": 0 }] }, { "mapType": "成都", "name": "課件評分", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新區", "value": 0.00 }, { "name": "武侯區", "value": 3.41 }, { "name": "雙流區", "value": 0.00 }] }]
            }

            setOption(o);

 顯示效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM