3.echarts的树状图的相关修改：节点样式、颜色、tree组件的高度等的修改
1.修改树状图表的节点为实心或者图片
1.1 空心和实心
symbol: "emptyCircle",// 空心
symbol: "circle",// 实心
1.2 修改为图片并且所有节点的图片都一样
symbol:'image://' + require('@/assets/images/cute.jpg'),
1.3 动态判断修改为不同图片
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");
}
}
2.修改节点的颜色
在需要修改颜色的节点的数据中加itemStyle
itemStyle: { color: "#ff0000" }
2.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 },
],
},
],
},
],
},
3.修改树的显示的层级，tree组件的高度
initialTreeDepth
series.height
4.运用
<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>
5.series参数
- layout：树图的布局，有 正交 和 径向 两种（正交就是水平或垂直；径向就是以根节点为原点，每一层为一环）
- orient：树图中 正交布局 的方向
- symbol：标记的图形（默认：emptyCricle)
- initialTreeDepth：树图初始展开的层级（深度）（默认：2）
- itemStyle：树图中每个节点的样式
- label：每个节点所对应的文本标签的样式
- rich：自定义富文本样式，在标签中做出非常丰富的效果。
- leaves：叶子节点的特殊配置
- emphasis：树图中个图形和标签高亮的样式
- data：数据格式是树状结构
- lineStyle：定义树图边的样式
树结构的所有参数