symbol: "emptyCircle",// 空心
symbol: "circle",// 实心
symbol:'image://' + require('@/assets/images/cute.jpg'),
symbol: function(value, params) {
console.log("params", value, params);
// params.data节点的所有数据
if (params.data.name == "学校") {
return "image://" + require("@/assets/images/cute.jpg");
} else if (params.data.name == "1年级") {
return "image://" + require("@/assets/images/cute1.jpg");
}
}
在需要修改颜色的节点的数据中加itemStyle
itemStyle: { color: "#ff0000" }
data2: {
name: "学校",
value: 2,
children: [
{
name: "1年级",
value: 2,
children: [
{
name: "1班",
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
{
name: "2班",
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
],
},
{
name: "2年级",
children: [
{
name: "1班",
itemStyle: { color: "#ff0000" },
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
{
name: "2班",
itemStyle: { color: "#8AC007" },
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
],
},
],
},
initialTreeDepth
series.height
<template>
<div style="padding:20px;">
<el-card>
<el-tabs type="border-card" v-model="tabName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="用户管理">
<el-button @click="open">{{
initialTreeDepth === 1 ? "展开第二层" : "收起第二层"
}}el-button>
<div id="tree" style="width:100%;height:500px;">div>
el-tab-pane>
<el-tab-pane label="配置管理" name="配置管理">
<div class="echart-top">div>
el-tab-pane>
el-tabs>
el-card>
div>
template>
<script>
export default {
name: "",
data() {
return {
tabName: "用户管理",
initialTreeDepth: 1,
data2: {
name: "学校",
value: 2,
children: [
{
name: "1年级",
value: 2,
children: [
{
name: "1班",
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
{
name: "2班",
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
],
},
{
name: "2年级",
children: [
{
name: "1班",
itemStyle: { color: "#ff0000" },
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
{
name: "2班",
itemStyle: { color: "#8AC007" },
children: [
{ name: "张三", value: 3938 },
{ name: "李四", value: 6714 },
],
},
],
},
],
},
};
},
mounted() {
this.init();
},
watch: {
"$store.state.collapse"(val) {
console.log(val);
setTimeout(() => {
//echarts得重绘方法
this.myChart.resize();
}, 300);
},
},
methods: {
init() {
this.getTree();
},
handleClick(value) {
console.log("value", value);
if (value.name === "用户管理") {
this.getTree()
}
},
open() {
if (this.initialTreeDepth == 1) {
this.initialTreeDepth = 2;
} else {
this.initialTreeDepth = 1;
}
this.getTree();
},
getTree() {
this.$nextTick(() => {
this.$echarts.init(document.getElementById("tree")).dispose()
this.myChart = this.$echarts.init(document.getElementById("tree"));
let option = {
tooltip: {
trigger: "item",
triggerOn: "mousemove",
formatter: function(params) {
return (
params.name +
"
" +
"下属终端个数" +
(params.value || "") +
"
" +
"当前状态" +
"888"
);
},
},
series: [
{
type: "tree",
data: [this.data2],
left: "2%",
right: "2%",
top: "8%",
bottom: "20%",
// symbol: "emptyCircle",
symbol: "circle",
// symbol:'image://' + require('@/assets/images/cute.jpg'),
// symbol: function(value, params) {
// console.log("params", value, params);
// if (params.data.name == "学校") {
// return "image://" + require("@/assets/images/cute.jpg");
// } else if (params.data.name == "1年级") {
// return "image://" + require("@/assets/images/cute1.jpg");
// }
// },
symbolSize: [30, 30],
orient: "vertical",
expandAndCollapse: true,
label: {
position: "top",
rotate: 0,
verticalAlign: "middle",
align: "right",
fontSize: 16,
},
leaves: {
label: {
position: "bottom",
rotate: 0,
verticalAlign: "middle",
align: "left",
},
},
initialTreeDepth: this.initialTreeDepth,
animationDurationUpdate: 750,
},
],
};
this.myChart.setOption(option);
window.addEventListener("resize", () => {
this.myChart.resize();
});
});
},
},
};
script>
<style scoped>
.echart-top {
display: flex;
justify-content: space-between;
width: 100%;
height: 500px;
}
style>
树结构的所有参数