tooltip: { padding: 0, enterable: true, transitionDuration: 1, textStyle: { color: '#000', decoration: 'none', }, // position: function (point, params, dom, rect, size) { // return [point[0], point[1]]; // }, formatter: function(params) { // console.log(params) var tipHtml = ''; tipHtml = '<div style="width:300px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +'<div style="width:86%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">'+'</i>' +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.name+'</span>'+'</div>' +'<div>' +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>' +'单位总数：'+'<span style="color:#11ee7d;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>' +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>' +'总人数：'+'<span style="color:#f48225;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>' +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>' +'总人数：'+'<span style="color:#f4e925;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>' +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">'+'</i>' +'总人数：'+'<span style="color:#25f4f2;margin:0 6px;">'+toolTipData.length+'</span>'+'个'+'</p>' +'</div>'+'</div>'; return tipHtml; } },
tooltip: { padding: 0, enterable: true, transitionDuration: 1, textStyle: { color: '#000', decoration: 'none', }, // position: function (point, params, dom, rect, size) { // return [point[0], point[1]]; // }, formatter: function(params) { // console.log(params) var tipHtml = ''; tipHtml = '<div style="height:360px;width:400px;border-radius:5px;background:#fff;box-shadow:0 0 10px 5px #aaa">' + ' <div style="height:50px;width:100%;border-radius:5px;background:#F8F9F9;border-bottom:1px solid #F0F0F0">' + ' <span style="line-height:50px;margin-left:18px">' + params.name + '</span>' + ' <span style="float:right;line-height:50px;margin-right:18px;color:#5396E3;cursor:pointer" οnclick="mapTooltipClick(this);">点击查看详情</span>' + ' </div>' + ' <div style="height:110px;width:100%;background:#fff">' + ' <div style="padding-left:18px;padding-top:22px">' + ' <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(92,169,235,1)"></span> ' + ' <span>上传表格数量</span>' + ' <span style="float:right;margin-right:18px">' + params.data.tipData[0] + '万</span>' + ' </div>' + ' <div style="padding-left:18px;padding-top:14px">' + ' <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:rgba(92,169,235,1)"></span> ' + ' <span>上传数据条数</span>' + ' <span style="float:right;margin-right:18px">' + params.data.tipData[1] + '条</span>' + ' </div>' + ' </div>' + ' <div id="tooltipBarId" style="height:200px;width:100%;border-radius:0 0 5px 0;background:#fff"></div>' + '</div>'; setTimeout(function() { tooltipCharts(params.name); }, 10); return tipHtml; } },
function tooltipCharts() { console.log(arguments[0]); var myChart1 = echarts.init(document.getElementById('tooltipBarId')); var option = { tooltip: {}, dataset: { source: [ ['xAxis', '201701', '201702', '201703', '201704', '201705', '201706', '201707', '201708', '201709', '20170', '201710', '20170', '201801'], ['amount', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1, 53.3, 83.8] ] }, xAxis: { type: 'category', interval: true, axisLabel: { rotate: 45 }, axisTick: { show: false } }, yAxis: {}, color: ['#4FA8F9', '#F5A623'], grid: { show: true, backgroundColor: '#FAFAFA', left: 30, right: 20, top: 20 }, series: [{ type: 'bar', smooth: true, seriesLayoutBy: 'row', barWidth: 10 }] }; myChart1.setOption(option); }
Done!
