echarts 饼图/环形图鼠标经过显示文本标签图例icon

文章目录

鼠标经过显示文本标签
- 效果
- 关键部分
图例 icon
- 效果
- 关键部分
完整实现

鼠标经过显示文本标签

效果

关键部分

label: { // 饼图图形上的文本标签normal: { // 默认样式show: false,position: 'center'},emphasis: { // 强调样式 show: true,textStyle: {fontSize: '20',fontWeight: 'bold'}}
},

图例 icon

效果

关键部分

icon文档

icon: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

legend: { align:'right', //图标相对文字位置orient: 'vertical',
//              x: 'left', // legend相对整体位置
//              y: 'bottom',left:10,bottom:10,itemWidth: 15,itemHeight: 10,data:[{name:"水泥",//icon:"triangle", //形状三角icon:'image://image/up.png'},{name:'混凝土',//icon:"triangle",icon:'image://image/down.png'//icon:'image://data:image/jpg;base64,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PSIyMDIwLTA2LTA0VDA5OjIxOjQ3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMC0wNi0wNFQwOToyMTo0NyswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplOWM3MWY4MC0xMzI5LWIxNDgtOTQyZC0xYjk1MjU0YWRiYTgiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiNTVjOWQ3OS1hZjc4LTY5NDgtYjRlZC1hMDQ1MjVkOGI1NWMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MTAwZGJiZC1iNTcxLWFmNDYtOWFhOC1hNDMwMzg5ZDc5NWQiIGRjOmZvcm1hdD0iaW1hZ2UvanBlZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzEwMGRiYmQtYjU3MS1hZjQ2LTlhYTgtYTQzMDM4OWQ3OTVkIiBzdEV2dDp3aGVuPSIyMDIwLTA2LTA0VDA5OjIxOjQ3KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU5YzcxZjgwLTEzMjktYjE0OC05NDJkLTFiOTUyNTRhZGJhOCIgc3RFdnQ6d2hlbj0iMjAyMC0wNi0wNFQwOToyMTo0NyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+4ADkFkb2JlAGRAAAAAAf/bAIQAAQEBAQEBAQEBAQIBAQECAgEBAQECAgICAgICAgMCAwMDAwIDAwQEBAQEAwUFBQUFBQcHBwcHCAgICAgICAgICAEBAQECAgIEAwMEBwUEBQcICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI/8AAEQgADwAKAwERAAIRAQMRAf/dAAQAAv/EAaIAAAAGAgMBAAAAAAAAAAAAAAcIBgUECQMKAgEACwEAAAYDAQEBAAAAAAAAAAAABgUEAwcCCAEJAAoLEAACAQIFAgMEBgYFBQEDBm8BAgMEEQUGIRIABzFBEwhRImEUcYEykQmhI/DBQrEV0Rbh8VIzFyRiGEM0JYIKGXJTJmOSRDWiVLIaczbC0idFN0bi8oOTo7NkVSjD0yk44/NHSFZlKjk6SUpXWFlaZnR1hIVndndohoeUlaSltLXExdTV5OX09ZaXpqe2t8bH1tfm5/b3aWp4eXqIiYqYmZqoqaq4ubrIycrY2dro6er4+foRAAEDAgMEBwYDBAMGBwcBaQECAxEABCEFEjEGQfBRYQcTInGBkaGxwQgy0RThI/FCFVIJFjNi0nIkgsKSk0MXc4OismMlNFPiszUmRFRkRVUnCoS0GBkaKCkqNjc4OTpGR0hJSlZXWFlaZWZnaGlqdHV2d3h5eoWGh4iJipSVlpeYmZqjpKWmp6ipqrW2t7i5usPExcbHyMnK09TV1tfY2drj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A2ieqX4n+Y+kXUbMvTHNfppmizHlyrOGlIM07lqo3IaCeH/fPdknRldPGxt35E2adprlpcqZXbeJJj7tvQR4eNdA9xfoes94cmZzK1zsFl1OrFj7T/ElX7bApMg+XRRvf89HqJ/7hbX/mFP8AOL/zFq/8lD/pif8AJI/3t/5M+PBd/Ocx/wCZX+DV9/H+j9v3e6sev9jXc/8A5zv/ADE9z/xP/B/x/wDu39z/AN66q//Q3KOsnTL0yZn9RPR/PvUfPuX8A6n5GsMLyVjeJ4VTVWOfMSFcM8ynqpUmf5ep3PBsU7n93UC3AZnGWZY7mLLrziUuo2JJAKv6OBxwOzrrJPs43233sdz8xscutHnLG4+51KHFJagftYUkFI1ogLk4Jxw20dDgzrGyv//Z'//icon:"image://data:image/png;base64,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"}],formatter:function(name){var total = 0,target;for (var i = 0, l = data.length; i < l; i++) {total += data[i].value;if (data[i].name == name) {target = data[i].value;}}name = name == "水泥" ? name + "   ":namename += "  " return name + target + "吨   ";}},

完整实现

var data = [{id:1,title:"今日榜单",data:[{value:180000, name:'水泥'},{value:120000, name:'混凝土'}]},{id:2,title:"昨日榜单",data:[{value:150000, name:'水泥'},{value:150000, name:'混凝土'}]},{id:3,title:"本周榜单",data:[{value:250000, name:'水泥'},{value:150000, name:'混凝土'}]},{id:4,title:"本月榜单",data:[{value:190000, name:'水泥'},{value:150000, name:'混凝土'}]}
]
loadList(data)
function loadList(data){// 加载榜单  也可以使用echarts title解决data.forEach(function(item){var card = document.createElement("div")card.className = "chy-card card flex"var num = 0item.data.forEach(function(val){num += Number(val.value)})card.appendChild(loadleft(num,item.title))var ele = document.createElement("div")ele.addEventListener("load",function(){console.log("ele-onload")})ele.id = "canvas"+item.idele.style = 'width: 320px;height:150px'card.appendChild(ele)$(".headCard").append(card)setTimeout(function(){loadCharts(ele,item.data,item.id)},0)})    function loadleft(number,title){var div = document.createElement("div")div.className = "card-l"div.innerHTML = '<div xid="div7" class="weight">'+title+'</div><div xid="div8" class="weight card-p">'+number+'吨</div>'return div}function loadCharts(ele,data,id){var el = document.getElementById("canvas"+id)var myChart = echarts.init(el);var option = {tooltip: { // 鼠标hover 弹窗trigger: 'item',formatter: "{b}: {c} ({d}%)" //"{a} <br/>{b}: {c} ({d}%)"},color:["#1AABFD","#FF615E"],legend: { align:'right', //图标相对文字位置orient: 'vertical',
//              x: 'left', // legend相对整体位置
//              y: 'bottom',left:10,bottom:10,itemWidth: 15,itemHeight: 10,data:[{name:"水泥",//icon:"triangle", //形状三角icon:'image://image/up.png'},{name:'混凝土',//icon:"triangle",icon:'image://image/down.png'//icon:'image://data:image/jpg;base64,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PSIyMDIwLTA2LTA0VDA5OjIxOjQ3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMC0wNi0wNFQwOToyMTo0NyswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplOWM3MWY4MC0xMzI5LWIxNDgtOTQyZC0xYjk1MjU0YWRiYTgiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiNTVjOWQ3OS1hZjc4LTY5NDgtYjRlZC1hMDQ1MjVkOGI1NWMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MTAwZGJiZC1iNTcxLWFmNDYtOWFhOC1hNDMwMzg5ZDc5NWQiIGRjOmZvcm1hdD0iaW1hZ2UvanBlZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzEwMGRiYmQtYjU3MS1hZjQ2LTlhYTgtYTQzMDM4OWQ3OTVkIiBzdEV2dDp3aGVuPSIyMDIwLTA2LTA0VDA5OjIxOjQ3KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU5YzcxZjgwLTEzMjktYjE0OC05NDJkLTFiOTUyNTRhZGJhOCIgc3RFdnQ6d2hlbj0iMjAyMC0wNi0wNFQwOToyMTo0NyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+4ADkFkb2JlAGRAAAAAAf/bAIQAAQEBAQEBAQEBAQIBAQECAgEBAQECAgICAgICAgMCAwMDAwIDAwQEBAQEAwUFBQUFBQcHBwcHCAgICAgICAgICAEBAQECAgIEAwMEBwUEBQcICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI/8AAEQgADwAKAwERAAIRAQMRAf/dAAQAAv/EAaIAAAAGAgMBAAAAAAAAAAAAAAcIBgUECQMKAgEACwEAAAYDAQEBAAAAAAAAAAAABgUEAwcCCAEJAAoLEAACAQIFAgMEBgYFBQEDBm8BAgMEEQUGIRIABzFBEwhRImEUcYEykQmhI/DBQrEV0Rbh8VIzFyRiGEM0JYIKGXJTJmOSRDWiVLIaczbC0idFN0bi8oOTo7NkVSjD0yk44/NHSFZlKjk6SUpXWFlaZnR1hIVndndohoeUlaSltLXExdTV5OX09ZaXpqe2t8bH1tfm5/b3aWp4eXqIiYqYmZqoqaq4ubrIycrY2dro6er4+foRAAEDAgMEBwYDBAMGBwcBaQECAxEABCEFEjEGQfBRYQcTInGBkaGxwQgy0RThI/FCFVIJFjNi0nIkgsKSk0MXc4OismMlNFPiszUmRFRkRVUnCoS0GBkaKCkqNjc4OTpGR0hJSlZXWFlaZWZnaGlqdHV2d3h5eoWGh4iJipSVlpeYmZqjpKWmp6ipqrW2t7i5usPExcbHyMnK09TV1tfY2drj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A2ieqX4n+Y+kXUbMvTHNfppmizHlyrOGlIM07lqo3IaCeH/fPdknRldPGxt35E2adprlpcqZXbeJJj7tvQR4eNdA9xfoes94cmZzK1zsFl1OrFj7T/ElX7bApMg+XRRvf89HqJ/7hbX/mFP8AOL/zFq/8lD/pif8AJI/3t/5M+PBd/Ocx/wCZX+DV9/H+j9v3e6sev9jXc/8A5zv/ADE9z/xP/B/x/wDu39z/AN66q//Q3KOsnTL0yZn9RPR/PvUfPuX8A6n5GsMLyVjeJ4VTVWOfMSFcM8ynqpUmf5ep3PBsU7n93UC3AZnGWZY7mLLrziUuo2JJAKv6OBxwOzrrJPs43233sdz8xscutHnLG4+51KHFJagftYUkFI1ogLk4Jxw20dDgzrGyv//Z'//icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAALFElEQVRo3s2ae5AU1RXGf90MXBeIyIDArkFBFAKiyzQGReXhA0WNAcUKPoBEpdSKr6GNGHwFIQqK1YwCESxM4sYCHwTFKNkqwAC+sBJ6FvEFKQWCLmtFB0UULuxO549zdhnWGXYWMMmpmqrd7tv3fufe8/y6HQ6DmESqGzAUGAj0AnoCRwJtdMg3wA5gI7ABeAtYadPJzYe6tnMIoLsA44AxQCmwElgNvC9Ao29tesIXOrYt0F4V6wMMVoW3AU8DFTadrPmvKGASqeOAScCVwGKgAif7MRAD4sDDutPjgFuBT4EA+BOwFdhrQ3+h8WYaIucMHXcZsBCYZtPJLc3B4zYD+BEmkZoMpIEvIToNJ1uJkx0N/AGYAhwFnISYztfAD4Hj9IRAzKu98YIBEG3FyXbFyS7R618CaZNITTaJ1BGHVQGTSJ0MhIAHnI6TXYETHQ/8ETGLToiNfwW8p8A/APoC5cBeoAdiPpuBljr2GmAmTrY3TvZ+nd8DQl3z0BUwidRVwCogwMnOxslWAE8gZrIC6AhsAs4DztTd36k/V38W6Ax00/tPATOACDG7DcCTONmFONkbEZNbpWsfUA7oAyaRmgD8CrgYJzsKsdX2QCvgdeAT3VkXMMDdeq+z7vQ7QK0+kwEu1tO4BngFmK87ngAmI/5SDUwncut0zCM2nZxZCGOLJsDfBNEVOFFroAoYAPRDIs0PkMjTAagAJhO57cA5CZy24HQEpxycfuD0BOfH4BhwNuDwO8TuM8CHwCxgrf4vEcuJXgFnEfBorHR4i7qayjVFn4Ae3QyIfooT3aGmcRNwDDAKccwFwDwidw/wMyQKhcAam07WFpg3Bpyuu14LPIeT7QT0Bi5VU7tAf48DnxC59yLh+Q6bTi5oUgF1nlUK/gYkqqwFBgEp4FyggshdrqawC3jGppO7aIaYRKoEuAIoQez/biQ3LASuVTPcCawmcuch/jbEppPrCyqg4StEHLYzkqQ+0hP4DHgDuInI7QGMAObadDLTHOB5FIkDNwJLcLIbgWWIeVUj5vkx8DKRuwPwAc+mk7vrn9/PB2Klw+8BDE72PeBVJH53BLYgzncrkdsP6G3Tydl1NZXN2vV8UldTuauupvK1WOnwi8A5CiearMCPAXYjgeIBm57wRqx0+AXA8XU1lau+cwKaYdMQXYgTHYFEiJeRqHIOcAmReywQt+nkomLATSwd2erhbS/uacZpXA5kcLItgDsRB5+HmG1E5C4F3gYS9Rk7Nw9MAp7AiVoCv0Gc7APgBOBsItcAXYsBb7ygu/GCmc93KH+9mvjSauKJYhTQubsSudXAvUgYPlVP5CucbAckB02qf8ZVzbsAV0L0OHAX4lhvA1cDE4jc7cAIm04+1QTwwcYLFiN+k9zrtGgNXAiE1cRnFanEU8AIIjdkX8Qr1TnvQwLJlYq54QTGAYttesIWJHG1RWzwTqRivA6YWwB0K+MFY40XrEUy9qWoabaM6nbnDB1UjAIqc3XNiUjZ8SxSGN6tVetixdygwBhggfGCGcBI3flfAG2I3BbArsbRxnhBR+MF9yAZtwKJ7fWyHhj3yofzpzcDdO4pZIBdRO6nSKlxKXC7rjtG1xsDENNmpBQnuxO4SLW7FjhNd+16pNqsB94XuE0naFw1LkdqnGU29KOjiI88GAVUnkHyzD1IbVQJ1ACbcbIPEbmlJpHqFkOSx0rgFODfSKx9B5ii9UisPkkZLxgIvNlooTo94hk29KsOBmk18bZlZHY2OoVdJpGKEbkZnOy3iu85vX2BYh4aQ9rA1cD5SPlrgJORKFSOJLaGA8j5O4s41KM29P91CDsN8Hw18TeAGWVkbM71UDG8BiwCjkaaojMU80AXyXrvA7cgjvEskv3WAf2BNQUW/dqG/u2HATxI1JsKvFtNvFvO9TWKYTXSY5QgReQCxdwrhjQkG23oVyPpe6nxghY29OtMItWqUGH2PckJSM+wGcCmk7UmkWplQ/8T4wXn29BvCCQmkeoK9HQR9mB77iw29Ov0z73NWd14wVnGC4puU4uUvYqpcc21HTjSBdrYdHJngYebC+YRIDRecHaee52riZ94EArkxaCY2xzu3WqHON2rxgtefDHetyznXhdgXTXxidXEY4drQRf4RnmbfJI9wLO781xrnfP3iAndRqbG9xi91rqxelMsAR4C1lQT71ckxrwYFPM3LsImtC/wcMtmKjAUSYQNz69od2L/OZ3PHAYsybneH/h7NfEHq4k3RaEUwtAe2OEi7ELPAoP2aBtYlNjQ32RDfxQwDGgoo2eVDtpSRmYkkmve1csxpKqsQgq2fLscy52nkfQENroIpdGnwKC1SA+bT0qMF7QroMhypNXcT8rILEMYiF8Cn+vlXkjozCenK4Z80gfY4CJE6+ACg9axf5GWK52AfxovuMF4QUF2I48StWVkHtcdfBTJ+PVSBeQmRk8x5JPBwFsuWlOYROo7EcmmkxFQqw04SIe0PGfI0Ujpu9Z4wdBGj+9oQpHtZWSSSPkyBzivjEyijMzH0ND01yqG/USxDgVWukpxbwOG7DfIC1obL7gFJ6pC2ANs6NfY0B+GEFybc4aXA38zXrDIeEF3vXagCJaryIYyMjeXkVnR6NYVEC0zXjDVeEG58YLSnHtDgG02ndxcv+tPow2Cgr8FcbDzIPoHUKLsAarIC4gN3sf+tj4K+MB4wYNIL31QomuV4ESXANOBy4H7c4aMU8wNWa4CuKy+TUMa+jTC0dyGE/0ZoT4axIb+Lhv6UxEnfC53fVU+d8eaKzcCTyJlRB+k0Muocl0QC6hoUEDbtIVAsh4c0s4dLwOj3cBfTCL188Yr2dDfakN/NGKT6zlE0TWW4GQHIJXnaQhvOk+HJIGF9S9Ech13GnC9dmgA45HMeRewGCe7Hdiq1Md3xIb+KiRq3My+4rASONeG/uYiwV8ObMXJWt39j4DhwO9t6G9SbNcrVvZTQHmWx/SHPjwV6bj+CpyCk20FZPKdhCpRa0N/DnAi0NeG/oU29F9txs5ncLKfIkzgFCSJzWdf1n8MeCz3LU5BatGmk/MBjBfM0129BBgNzCZyM3wP1KJNJ98zXjAeYcGfBMYCk23of24SqfHkoRYPQO5yjk0nq4wXtAd+ApTY0H9CmYhZRO5uhPo4XORuB4R/vR2YjZTm0xCGuhyhOg9M7uZMrvQ6Z9l0cpPxgn429KuMF1yN8Knd9VjnE7kOh0avf6snvAVhwnsBVyHmnVU683WKpddzFtMXHAxTJY5F4nE7hLv/GiHBKm3ov20SKQdJaP2RHLCXfT6WRarKPUhts86mk5HxglOBOxACLWFD/wXjBb2Bk2zoLzKJVHeErZ5T6C1N0a+YbDpZBWC84H7EwXohfnAdUqANsqG/9IDzeUEb5B3ZABv6LxsvmAx8gcT63wIdbeiv07X7UcQrpibfE6s5zQYm2nRyvpYKY5EXdNsQcmsr0MeG/jTjBTcg8fszYKfu6ligK5KMfoTki1qEdZuFxPgvgMU29Neowz4M3JzPbHKlyZZSJxgC+CaReonIjWzoT9EsHEMy4nQ0tSO+0Rop/Mr1Wg9V8ljEzp9FXiedaUO/FilJJhG5NSaRegmJNkOaAl+UAqrEevT9LfIOd7pJpLrY0J9rQ38HENjQ36rDOyEU+Mic+V2E7d4I/Br4jQ39ZxDaECK3jsh9oH5+JFQWldUPz6cGsMqmk1kA4wVDEOZsMdL2DUM4zfnAQBv6b+o8rp7sIX1q8D1+7MH2errm/+pjjwLKdON/9LnNfwBpyjmV42DvuQAAAABJRU5ErkJggg=="}],formatter:function(name){var total = 0,target;for (var i = 0, l = data.length; i < l; i++) {total += data[i].value;if (data[i].name == name) {target = data[i].value;}}name = name == "水泥" ? name + "   ":namename += "  " return name + target + "吨   ";}},series: [{name:'访问来源',type:'pie',radius: ['65%', '80%'], //内 外 半径avoidLabelOverlap: false, //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠label: { // 饼图图形上的文本标签normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '20',fontWeight: 'bold'}}},center : [ '75%', '50%' ], // 位置设置labelLine: {normal: {show: false}},data:data}]}myChart.setOption(option);return myChart}
}

echarts 饼图/环形图鼠标经过显示文本标签图例icon相关推荐

Echarts饼图,环形图,鼠标触碰后取消默认放大效果
项目场景: 项目场景:使用ecahrts 做一个环形图,但是鼠标触碰图例会有放大效果,根据高保真这个效果需要取消问题描述问题1我想把这个放大效果取消,让后翻阅echarts的文档让后发现 let ...
【ECharts】环形图、饼状图
目录 color设置的颜色环形渐变色圆环中间显示文字悬浮显示中间文字悬浮显示中间文字,默认显示第一个循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置内容为0 ...
echarts之环形图
echarts中环形图就是饼图,区别在于是否定义了图形内部镂空的半径而已,就像下图: 那么现在有了一个圆环,中间如果空着的话就太难看了,所以给了如下的样式: 就是要给圆环中心添加内容.如果是单纯的添加 ...
chart.js使用学习——饼图/环形图
饼图/环形图能够展示数据集中各项的大小与各项总和的比例.chart.js中创建饼图/环形图,只需在chart构造函数中指定图表类型为pie/doughnut即可. 基本用法创建饼图/环形图主 ...
echarts通用环形图
echarts通用环形图效果如下: <div class="chart-box"><div ref="pieChart" id=" ...
echars 饼图环形图组件修改自定义图例重新渲染显示对应颜色对应区域
如图产品有个需求是要做一个环形图点击图例显示具体数字但图例加起来是超过百分百的如图一个范围内有男有女有丑逼点击男的显示男的点击女的显示女的并且显示占总数的百分比并且鼠标悬浮上去显示的 ...
ECharts 之环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
如何用pyecharts绘制柱状图，条形图，折线图，饼图,环形图，散点图
简介 pyecharts是一个由百度开源的数据可视化,凭借着良好的互交性,精巧的图表设计,得到了众多开发者的认可,而python是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可视化时, ...
echarts 圆角环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...

echarts 饼图/环形图鼠标经过显示文本标签图例icon

文章目录

鼠标经过显示文本标签

效果

关键部分

图例 icon

效果

关键部分

完整实现

echarts 饼图/环形图鼠标经过显示文本标签图例icon相关推荐

最新文章

热门文章

echarts 饼图/环形图鼠标经过显示文本标签 图例icon

文章目录

鼠标经过 显示文本标签

效果

关键部分

图例 icon

效果

关键部分

完整实现

echarts 饼图/环形图鼠标经过显示文本标签 图例icon相关推荐

最新文章

热门文章

echarts 饼图/环形图鼠标经过显示文本标签图例icon

鼠标经过显示文本标签

echarts 饼图/环形图鼠标经过显示文本标签图例icon相关推荐