将echarts图标插入layui弹框，并实现点击跳转页面效果

话不多说，先看效果图，这个是利用layui的弹框，再将echarts的树图插入到弹框内，再给树的根节点也就是flare添加一个点击跳转到百度页面

一、引入相关的文件

<link href="./assets/layui/css/layui.css" />
<script src="./assets/jquery-3.4.1.min.js">script>
<script src="./assets/layui/layui.all.js">script>
<script src="./assets/echarts.js">script>

二、写一个button点击事件，触发弹出层的生成及echarts图的插入与点击跳转百度页面

<div id="wrapper">
	<button type="button">点击button>
div>

$("button[type=button]").click(function() {
				layer.open({//弹框
					title: 'layui弹框',
					area: ['580px','400px'],
					content: '
',
					success: function() {
						var container = document.getElementById('container')//获取echarts图插入的元素
						var conOpt = echarts.init(container)
						var option = {
							tooltip: {
								trigger: 'item',
							},
							series: [{
								type: 'tree',
								id: 0,
								data: [{
									"name": "flare",
									"children": [{
											"name": "data",
											"children": [{
												"name": "Array",
												"value": 4116
											}]
										},
										{
											"name": "display",
											"children": [{
												"name": "flex",
												"value": 4116
											}]
										},
										{
											"name": "Json",
											"children": [{
												"name": "parse",
												"value": 4116
											}]
										}
									]
								}],
								lineStyle: {
									width: 2,
									color:'red'
								},
								label: {
									backgroundColor: '#fff',
									position: 'left',
									verticalAlign: 'middle',
									align: 'right'
								},
								leaves: {
									label: {
										position: 'right',
										verticalAlign: 'middle',
										align: 'left'
									}
								},
							}]
						};
						conOpt.setOption(option)//将echarts图插入
						conOpt.on('click',function(params){//给echarts图添加点击事件
							if(params.data.name == 'flare'){//满足该条件跳转到百度页面
								window.open('https://www.baidu.com/')
							}
						})
					}
				});
			})