先看这个，本篇是根据这个进行升级而来。点击进入
再看效果：
代码如下：
<template>
<div ref="ecs" id="ecs" style="width: 800px;height:800px; background-color:white;"></div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import pause from "@/assets/pause.png"
import play from "@/assets/play.png"
const ecs = ref()
const myChart = ref()
const timestamp = ()=>{
const dateTimestamp = new Date().getTime();
return dateTimestamp+""
}
const my_data = ref(
{
name: "根节点",
url: "",
id: timestamp(),
itemStyle: {
color: "#a53626",
borderColor: "#a53626",
},
label: {
show: true,
position: [ 15, 70],
verticalAlign: "middle",
fontWeight: "bold",
formatter: ["{box|{b}}", "{bg| }"].join("\n"),
rich: {
box: {
height: 50,
color: "#0f0",
padding: [10, -10, 10, -5],
align: "center",
fontWeight: "bold",
fontSize: 16,
},
bg: {
height: 30,
color: "#fff",
padding: [15, -15, 10, 10],
align: "center",
fontWeight: "bold",
fontSize: 16,
backgroundColor:{
image: play,
}
},
},
},
children: [],
}
)
const option = ref({
tooltip: {
trigger: "item",
triggerOn: "click",
enterable: true,
extraCssText: 'z-index: 99;max-width: 100px;white-space:pre-wrap',
formatter: function(params) {
return `<div οnclick="myDialog('${params.data.id}')">添加子节点</div>`
},
backgroundColor: "#dfdfdf",
textStyle: {
color: "black",
},
},
series: [
{
type: "tree",
expandAll: true,
symbolSize: 75,
symbol: "roundRect",
edgeShape: "polyline",
edgeForkPosition: "50%",
initialTreeDepth: 10,
orient: "vertical",
itemStyle: {
color: "black",
borderColor: "black",
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750,
lineStyle: {
color: "#7b7b7b",
width: 3,
},
data: [my_data.value,],
},
],
});
function nodeContainsValue(node, id, i=0) {
i =i+1
if (node.id == id) {
node.children.push(
{
name: `第${i}级节点`,
url: "",
id: timestamp(),
itemStyle: {
color: "#a53626",
borderColor: "#a53626",
},
label: {
show: true,
position: [ 10, 70],
verticalAlign: "middle",
fontWeight: "bold",
formatter: ["{box|{b}}", "{bg| }"].join("\n"),
rich: {
box: {
height: 50,
color: "#0f0",
padding: [10, -10, 10, -5],
align: "center",
fontWeight: "bold",
fontSize: 16,
},
bg: {
height: 30,
color: "#fff",
padding: [15, -15, 10, 10],
align: "center",
fontWeight: "bold",
fontSize: 16,
backgroundColor:{
image: play,
}
},
},
},
children: [],
}
)
return true;
}
if (node.children.length == 0) {
return false;
}
for(let j=0; j< node.children.length; j++){
if(nodeContainsValue(node.children[j], id, i)){
return true
}
}
return false
}
onMounted(() => {
myChart.value = echarts.init(ecs.value);
myChart.value.setOption(option.value);
window.myDialog= function(id) {
nodeContainsValue(my_data.value, id, 0)
myChart.value.setOption(option.value);
}
myChart.value.on("click", (params)=>{
let image_array = params.data.label.rich.bg.backgroundColor.image.split("/")
let my_image = image_array[image_array.length-1]
if (my_image == "play.png"){
params.data.label.rich.bg.backgroundColor.image = pause
}else {
params.data.label.rich.bg.backgroundColor.image = play
}
})
})
</script>
<style >
html, body{
height: 100%;
background-color: pink;
}
</style>
另附formatter里的{a}，{b}，{c}，{d}代表什么：点击可参考
1、折线图、区域图、柱状图、条形图、K线图：
{a}：系列名称（series.name）
{b}：类目值（通常是 x 轴的标签）
{c}：数值（series.data.value）
{d}：无
2、散点图、气泡图：
{a}：系列名称（series.name）
{b}：数据名称（通常是 x 轴的标签）
{c}：数值数组（series.data.value）
{d}：无
3、饼图、雷达图：
{a}：系列名称（series.name）
{b}：数据项名称（series.data.name）
{c}：数值（series.data.value）
{d}：百分比（series.data.percent）
4、地图：
{a}：系列名称（series.name）
{b}：区域名称（region name）
{c}：合并数值（merged value）
{d}：无
下边这个改动点在这， οnclick=‘myDialog(${JSON.stringify(params)})’>添加子节点 // 使用单引号这种方式是可以的
<template>
<div ref="ecs" id="ecs" style="width: 800px;height:800px; background-color:white;"></div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
// import pause from "@/assets/pause.png"
// import play from "@/assets/play.png"
const ecs = ref()
const myChart = ref()
const my_params = ref()
const timestamp = ()=>{
const dateTimestamp = new Date().getTime();
return dateTimestamp+""
}
const my_data = ref(
{
name: "根节点",
url: "",
id: timestamp(),
// 根节点样式设置
itemStyle: {
color: "#a53626",
borderColor: "#a53626",
},
label: {
show: true,
position: [ 15, 70], // 用这个和box的height控制下边按钮的位置
verticalAlign: "middle",
fontWeight: "bold",
formatter: ["{box|{b}}", "{bg| }"].join("\n"),
rich: {
box: {
height: 50,
color: "#0f0",
padding: [10, -10, 10, -5],
align: "center",
fontWeight: "bold",
fontSize: 16,
},
bg: {
height: 30,
color: "#fff",
padding: [15, -15, 10, 10],
align: "center",
fontWeight: "bold",
fontSize: 16,
backgroundColor:{
// image: play,
image: "data:image/png;base64,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"
}
},
},
},
children: [],
}
)
const option = ref({
tooltip: {
trigger: "item",
// 给tooltip绑定click事件
triggerOn: "click",
enterable: true,
extraCssText: 'z-index: 99;max-width: 100px;white-space:pre-wrap',
formatter: function(params) {
console.log("before params", params)
console.log("typeof params", typeof params);
// my_params.value = params // 通过定义变量的方式也可以传递params
return `<div onclick="myDialog('${params.data.id}')">添加子节点</div>`
// return `<div onclick="myDialog('${JSON.stringify(params)}')">添加子节点</div>` // 使用双引号这种方式不行
// return `<div onclick='myDialog(${JSON.stringify(params)})'>添加子节点</div>` // 使用单引号这种方式是可以的
},
backgroundColor: "#dfdfdf",
textStyle: {
color: "black",
},
},
series: [
{
type: "tree",
expandAll: true,
symbolSize: 75,
symbol: "roundRect",
edgeShape: "polyline",
edgeForkPosition: "50%",
initialTreeDepth: 10,
orient: "vertical",
itemStyle: {
color: "black",
borderColor: "black",
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750,
lineStyle: {
color: "#7b7b7b",
width: 3,
},
data: [my_data.value,],
},
],
});
function nodeContainsValue(node, id, i=0) {
i =i+1
if (node.id == id) {
node.children.push(
{
name: `第${i}级节点`,
url: "",
id: timestamp(),
// 根节点样式设置
itemStyle: {
color: "#a53626",
borderColor: "#a53626",
},
label: {
show: true,
position: [ 10, 70],
verticalAlign: "middle",
fontWeight: "bold",
formatter: ["{box|{b}}", "{bg| }"].join("\n"),
rich: {
box: {
height: 50,
color: "#0f0",
padding: [10, -10, 10, -5],
align: "center",
fontWeight: "bold",
fontSize: 16,
},
bg: {
height: 30,
color: "#fff",
padding: [15, -15, 10, 10],
align: "center",
fontWeight: "bold",
fontSize: 16,
backgroundColor:{
// image: play,
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAEQBJREFUeF7tXWnMZUURPWDcIggDoujEYIAgaARcQNlBEI2CKCDIogIuYTEqmwKaKD8UlM0/LFFZlC0ogggJghARBCP8cCAREGEiiZOgCAOBRBOi8R7oZ97AfN+7976u7uruU8nNsPRSdarP9Lt9q6rXgEQICIEFEVhD2AgBIbAwAiKIVocQWAQBEUTLQwiIIFoDQmAcAtpBxuGmXo0gIII04miZOQ4BEWQcburVCAIiSCOOlpnjEBBBxuGmXo0gIII04miZOQ4BEWQcburVCAIiSCOOlpnjEBBBxuGmXo0gIII04miZOQ4BEWQcburVCAIiSCOOlpnjEBBBxuGmXo0gIII04miZOQ4BEWQcbkN7bQZg8/BsAGBdAOuEZ/LPkz859tMAnnrRn5P/9jiAB8Pz0FBF1H4YAiLIMLxmtd4KAJ+3ThGCxFhzVseR//+/U2Qhaf4M4N7wjBxS3aYREEHmWw9vA7AdgN0B7AGAu4MH4S5zC4BbAfwewP0elCpRBxFkmNc2BrBbIMVOAPjTqQThT7E7All+A2B5CUp70FEEme2FtQHsM/W8fHYX1y2eA3Dd1POMa20zKyeCLOyAPadIsTSzn6ymXzFFlJutJil5XBFkVe9tBODwQIytS3bsCN2XBbJc3GHw6Ij+VXYRQV5w65YADgvPkio93d+olQAuCc99/bvV2bJ1gvBFe0IMq6PYUlcOj5AnROELfpPSKkH2CsTYr0mvDzf654EsNwzvWnaP1gjC7xYnhPeMsj2XR3u+n5zZ0neVVgjCo9kTw8OQDsl4BBgCc0Z4eGRctbRAkAPCrrFN1Z5Mb9w9YTf5afqp081YM0F4MnVSF590UDo4m5zpSgCnA6jyxKtWghwS/nbbsMklm97ox8IufXn6qW1nrJEgp4WdwxY5jb46BLiTnFwTNDURhCHmPGHhEa4kHwI8CuZJIUPvi5daCMLvGWcBYKiIJD8CDFU5HgC/nxQtNRDkWwC+WbQX6lX+1M40+qdYKZ0g5wM4slj021D8AgBHlWpqyQS5pkst/XipwDem97XdMfC+JdpcKkHuBLB9iYA3rPNdAHYozf4SCfIwgE1KA1r6Po/AIwA2LQmL0gjC9NC1SgJYur4EgWe7E0emMRchJRHkCQDrFYGqlJyFwJMA1p/VyMP/L4UgdwNQsKGHFRNPBwY7bhtvOJuRSiDIFQo4tHG+g1EZ6HiwAz0WVME7Qc7uym8e6xlA6TY3AucAOG7uUYwG8EwQBR0aOd3hsG6DHL0SROEjDlexsUouw1I8EoSBh1cbO0PD+0Rgf28Bjt4IwpD1mxSV63P1JtCKUcAf9BQq740g1yufI8Ey9D0F80n29qKiJ4LopdzLqsivh5uXdi8EYQ75Zfn9Ig0cIXAogOw57h4IwuojfO9QgQVHq9OBKiwEwfeRrNVSPBBEX8odrEanKmT/0p6bICzqdpVT50gtHwgcCCBbcbqcBGE5UCY+KQjRx0L0qgWDGplolaXMaU6CnALg2169Ir1cIfB1AN/JoVEugrDKOncPFZLO4fXy5mTBbO4iyW/rzUWQi3QFQXmrNLPGvHrhiNQ65CAIKx/yi7lECAxFgF/Yk17ik4MgDETUzU5Dl4baEwFWamRAYzJJTRDeCXh7Mus0UY0I7Awg2Z2JqQlyYY7fkTWukoZt4vvrZ1PZn5IgDCn5IwDdJpvKu3XOw9t335kqBCUlQZRfXueCzWFVsjz2VAThtQTcPZbkQFNzVofAyrCLMMHKVFIRRDnmpm5scvAkOeypCMLdY+sm3SijrRBYFnYRq/GfHzcFQfYM+R6mhmjwJhFgvsjNlpanIMi5AI62NMLp2Lyjj8+DAF4L4C0APuRU11LVOg/AMZbKWxOEVbwfALDU0ghnY/N6hi8BuHE1eq0TSm2ykmBR1wA4w3iizooun2iL7j5EVv03EWuCMK/4UhPNfQ56Sc8gzDcCYLj/F32aUZRWn7KsZ2BNkJ+ljp3J6FraygzJIfLhQJTibl4aYqRxW8b2fcJqDkuCbBx+fzNzsHb5WzhR+ecIQxlZwN2Ez6tH9G+9CzMNNwew3AIIS4J8HsAPLJR2OObXAHxvTr3eE0iii0mHA/mF7j33h8O7ze5hSZAfd6z+9GwVqmjBG1x5k2sMobNPDqdeMcZrYYyfAPiMhaGWBOGFjfyZ1YLwRIr2xpI3h91Ed8D3Q5Q/r0wudrUiCL+a8+t5K2KF4z6BKO6vKnPgaEb48ut6VLFy7FcAMOKyFbHCkfi9MpCEP7taOPAYu2Z4E9n3x3ZeqJ+VY/l7/GOxlXU8nhWO0ya/LxDFTeVzZ/74BYDoBxxWjuVxZxHX/EZyshWOq1OPYTs8Em4pOqGPm3hN+Ov6NBzSxsKxrb1/EG8LHBfzIw8/SJJkqadDFlXGttHfQywcy6NdHvG2JBY49sGP1WFIlHf1adxAGx718sg3mlg4luVE6bSWxALHvvi9ZupLfN8+tbZjeVKWKY0mFo5l7SJ+OGtJLHAcih9LKvEvppZD6q+JXXPNwrF/6srVs/ZuS2KB41j8vhy+xL9h7AAF92Pt3rfH1N/Csf9psLSPBY7z+HmzsJuYhF/Mo5hxX5YEelnMOWI7lo5hFl1rEhvHWPh9MhDlHbEGLGAcXiX+UCw9Yzv2o13Y93WxlCtonNg4xjSdV0zw3eTEmIM6HovhOb+MpV9sx361y2n4bizlChonNo4Wpu8WiLKHxeCOxoyRevB/c2I79gwAJzgCK5UqsXG01Pv4cFvTKywnyTj2mTF3y9iOZdLK5zKCk2vq2Dha2/GBkMzGSiu1yY8AMFkvisR2LG8jNcsPjmKxzSCxcbTRctVRWVPqVykmSjzHmNoAC6oY27E3AWChuNYkNo6p8OPftrXFc7GQHMkfRWI79g8AWkzuiY1jFOf2GGTHlJfR9NAnRpO7u5pk740xEMeI7VhWEeQ5dGsSG8eU+N3SkWT3lBMaz8XvcKxyEkViO/YxAC2GOMTGMYpzew5SW3GNvwPYsKftM5vFduy/ALxq5qz1NYiNY0qEarua4t8x64vFdqwIknJpx5nrMgCHxBnKxSiuCaKfWC7WyCAlaru7xfVPLL2kD1qb2RuzntdfsmsRVwHXL+k65o3rbOvRLgZwmPUkicd3fcyrD4WJV8Mc07FEDjPwahPXHwoValLGcuOuwd2jRnEdaqJgRd9Ljglt3+jqCPPSmVrFdbCiwt39LjveZkVy1P4h13W4uxKm/BGEsXEshcNszxbEdcKUUm59LUESg7tGS9ENrlNuVbTBB0GYEEVy7OJDnaRauC7aQCRU9ifpelhlMt7Hzh2jlQINL0bafdkfKqzCcXkIsn/YNVg8vFUponCcSo+mXZ68ro27Bu82bF2KKD2q4tXplinTZUmOGosvjEGxiOLVuv5gjGuH9WGlRL6EHzisW/Wti7j+YCuLyxSduzZ2Xs1i5h4Xdo0lzjHJoR7fv+6NObGVY/8BYIOYijofywrHabNZYIG7RsvXGyy2DB4H8PrY68TKsVd0RawPiq2s4/GscKTJvNmW7xl81nSMQW7VruyKVh8cWwkrx/LlkUFjrYgVjh8Ju8Z2rQA5h52s6HnhHP1X29XKsbxAh99DWhG+DzwV0Vje1sodg5fhSPohwItz+B0kqlgRhEoy9ZGhJy1IzNtV+TOB7xqt3dI1zzrhfSAm9dgsCVJjWcuFnHhM94J43jweBrBJ2DVqS4GdE5Ze3fnTyqRouiVBWnoPuQ0A798YK0cFcrxp7ACN9zN5/yCmlgThZfescsJTmBbk1M5IFmEbIu8OP6eYHy4Zh8BzodTo8nHdF+9lSRDOzPxgBtG1Iqxs/+uexp4Udg3ecy4Zj8DVllduWBPk0O639aXjbS+y5+nhuPHhBbTfC8CxAN5fpHX+lGZ+PatDmog1Qdbu4oUeALDURHvfg94IgCVo/ho+8DGgcFcAe/tWuyjtVgDYAsAzVlpbE4R6nwvgaCsDNG7TCPDkkCeIZpKCIPxdzoJyEiEQGwHeJMVd2kxSEITK11Yg2cwhGrg3AssA8AOtqaQiSG13UJg6RYP3QmDMsXqvgacbpSLIRmEXUQ7DYBepw2oQWBl2j0et0UlFENpxdjjetLZJ49ePwDkAmDhmLikJsmXYRZTTYO7WqidgaR++e9yXwsqUBKE9DCo7IoVhmqNaBC5Kebd7aoLs1H1Bvr1a18mwFAjsnPJu99QEIYCMndkvBZKaozoEWHMtaWxfDoIwFun66lwng1IgwDCdG1JMNJkjB0E4N39HHp7SUM1VPAK8ESv5+2sugjCd9E4A6xbvNhmQAgHm++9gkXM+S/lcBKFep3TJVCxTKhECsxBgjj7LiiaXnARhpiF3kW2SW60JS0LgnrB7MHMwueQkCI09oIvnvyq51ZqwJARYf5i3J2eR3ASh0a1VYczi6EInNamWOAQLDwRhCArzRTYcorjaVo/AYwCY75EkpGQhND0QhLodYplXXP1SqtNA1jO4PLdpXghCHE4DwEofEiHAwhcne4DBE0GIB7+w80u7pF0E+KXcTWELbwRhfVW+jzDBStIeAkyA4nsH6zq7EG8EISgMZGRAo6Q9BBiIyIBEN+KRIARHOexulkgyRZLkmA+1xitBaMf5AI4capDaF4nABQBYwNudeCYIweK91yrs7G7ZRFXo2u5bx75RR4w4mHeC0FTGa20f0WYN5QeBu0KclR+NXqRJCQShyiwEzQtmJPUg8Ej3cXhT7+aUQhDiyALFa3kHVPr1QuBZACxs7l5KIgjBfALAeu5RlYKLIfAkgPVLgag0ghDXu5VDUsryeomezO3YtiTtSyQI8VWIfEmr7AVds4euj4GsVILQVpUyHePxPH2SlQqNbV7JBCEWigCOvSLij+cmMneMaaUThDYrLGWM59P0cRk+MsT0GghCexngeJaigIe43rQto3KP9xZ4OMbiWghC2xkqf6byScYsg6h9mM9xgqeQ9Xmsq4kgExz0XjLPipivb9HvG6szvUaC0E7muHM3USGI+RZ8394ssMBdI3sOeV+F+7arlSC0n9VSmON+UF8w1G4UAvy+wZ0ja/WRUZr36FQzQSbmszgd/3ZTBcceC2JAE34V5y6drajbAF1HN22BIASHZU5PDI8KZo9eLs93ZCHpM8KTpRzofOoP690KQSaosKo8dxNdvTBsnUxa8woC7hr3j+teXq/WCDLxEEsLHaabrnovWBZSuCT15TW9tTNs2CpBJpDyzkQShY9u3111ofE2WZKCzx2Ga9D10K0TZOIcnnhNiLLEtcfslVs5RYwqT6aGQCiCrIoWC9bx/WQfAFsPAbKCtsu6+8ev68J1+J7BUBEJABFk4WWwZyAKybK00tWyIpCCxLi5UhvnMksEmQ0fc6dJksnDI+OShUezJMTkYa6/ZAEERJBhS2Pj7oV1dwA7hof/XoIsB/C78NwKgP8u6YGACNIDpEWa8D1lVwC7AOCJmJdiBCxuwZOn33b63QaA7xeSEQiIICNAm0EYnogx9H7zqcfqCJlHsQ9OPayKzpMnESKSX0WQSEDOGGazKbJsEO6HXwcAH4a+TP/JoZ4OIR3Tf07++fEpQjyURv12ZxFB2vW9LO+BgAjSAyQ1aRcBEaRd38vyHgiIID1AUpN2ERBB2vW9LO+BgAjSAyQ1aRcBEaRd38vyHgiIID1AUpN2ERBB2vW9LO+BgAjSAyQ1aRcBEaRd38vyHgiIID1AUpN2ERBB2vW9LO+BgAjSAyQ1aRcBEaRd38vyHgiIID1AUpN2ERBB2vW9LO+BgAjSAyQ1aRcBEaRd38vyHgj8DxY98th/w9RRAAAAAElFTkSuQmCC"
}
},
},
},
children: [],
}
)
return true;
}
if (node.children.length == 0) {
return false;
}
for(let j=0; j< node.children.length; j++){
if(nodeContainsValue(node.children[j], id, i)){
return true
}
}
return false
}
onMounted(() => {
myChart.value = echarts.init(ecs.value);
myChart.value.setOption(option.value);
window.myDialog= function(id) {
// window.myDialog= function(params) {
console.log("my_params.value", my_params.value)
// console.log("params====>", params);
nodeContainsValue(my_data.value, id, 0) // 不通过递归直接在params中push children试试可以不 已经试验过了不可以
// nodeContainsValue(my_data.value, params.data.id, 0)
myChart.value.setOption(option.value);
}
myChart.value.on("click", (params)=>{
let image_array = params.data.label.rich.bg.backgroundColor.image.split("/")
let my_image = image_array[image_array.length-1]
if (my_image == "play.png"){
params.data.label.rich.bg.backgroundColor.image = pause
}else {
params.data.label.rich.bg.backgroundColor.image = play
}
})
})
</script>
<style >
html, body{
height: 100%;
background-color: pink;
}
</style>
