//创建放三级菜单的dom var thirdBox= document.createElement('div'); thirdBox.id= 'thirdBox'; var body = document.querySelector('body'); body.appendChild(thirdBox); //thirdBox的css var boxStyle = document.createElement("style"); var str=` #thirdBox{ background:linear-gradient(0deg,rgba(30,39,87,1) 0%,rgba(0,76,172,1) 100%); box-shadow:1px 2px 5px 0px rgba(6, 1, 0, 0.35); border-radius:2px; position: relative; padding: 15px 0; width: 300px; top: -200px; left: -200px; } #thirdBox ul{ color: #fff; font-size:16px; font-family:SourceHanSansSC-Light; font-weight:300; } #thirdBox ul span{ display: inline-block; padding: 0 6px; } ` if(boxStyle.styleSheet){ //ie下 boxStyle.styleSheet.cssText = str; } else { boxStyle.innerHTML = str; }; document.getElementsByTagName("head")[0].appendChild(boxStyle); option = { backgroundColor:'#1b326a', color: ['#916324', '#7B470F'], xAxis: { show: false, type: 'value', max: 10, min: -10, }, yAxis: { show: false, type: 'value', max: 10, min: -10, }, series: [ { name: '访问来源', type: 'pie', radius: '30%', center: ['50%', '50%'], data: [ {value: 250, name: '增值电信业务', selected: true}, {value: 320, name: '基础电信业务'}, ], roseType: 'angle', label: { normal: { position: 'inner', formatter: '{d}%\n{b}', textStyle: { color: '#fff', fontWeight: 'bold', fontSize: 14 } } }, labelLine: { normal: { show: false } }, }, { type: 'graph', layout: 'force', symbolSize: '140', focusNodeAdjacency: false, coordinateSystem: 'cartesian2d', //roam: true, draggable: false, categories: [{ itemStyle: { normal: { color: "#B08B44", } } }], label: { normal: { show: true, textStyle: { fontSize: 12 }, } }, force: { repulsion: 1000 }, edgeSymbolSize: [4, 50], data: [{ name: '第一类基础电信业务', value: [-4, 5], category: 0 }, { name: '第二类基础电信业务', value: [-4, -5], category: 0 }, { name: '第一类增值电信业务', value: [4, 6], category: 0 }, { name: '第二类增值电信业务', value: [4, -5], category: 0 }], lineStyle: { normal: { opacity: 0.9, width: 1, curveness: 0 } } } ] }; myChart.on('click', function (params) { var position= [ { x: '50px', y: '50px' },{ x: '50px', y: '350px' },{ x: '850px', y: '50px' },{ x: '850px', y: '350px' } ] //判断点击的是二级的圆圈 if(params.seriesIndex === 1){ var html= '

通信业务1(家)
通信业务2(家)
通信业务3(家)

'; console.log(params) var i= params.dataIndex; $('#thirdBox').html(html).css('top',position[i].y); $('#thirdBox').html(html).css('left',position[i].x) } })

Echarts在线免费图表