Echarts 树状图修改以及解决数据太多堆挤问题

最新推荐文章于 2024-05-17 15:22:04 发布

啊唒ya~

最新推荐文章于 2024-05-17 15:22:04 发布

阅读量3k

点赞数 11

文章标签： echarts javascript 前端 vue.js css

本文链接：https://blog.csdn.net/weixin_41752213/article/details/135384632

版权

文章详细描述了如何在Echarts中定制树状图的每层节点样式，包括颜色、边框、文本格式和动态调整图表高度以适应数据。同时涉及了动画效果和节点交互设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts树状图每层级样式

效果图

在这里插入图片描述

<template>
    <div :style="{height: chartHeight + 'px'}">
        <div ref="myChart" style="height: 300px" id="chart-tree"></div>
    </div>
</template>
<script>
    export default {
   
        data() {
   
            return {
   
                chartHeight: 1000,
                linkInfoTree:[] //属性数据
            }
        },
        methods:{
   
            getGQRightTree(){
   
                let myChart = echarts.init(this.$refs.myChart);
                for (let i in this.linkInfoTree) {
   
                    // 设置指定节点样式
                    if (this.linkInfoTree[i].id == 1) {
   
                        let arr = this.linkInfoTree[i].children
                        this.linkInfoTree[i].label = {
   
                            color: '#fff',
                            backgroundColor:'#409eff',
                            padding: [6, 12],
                            width:70,
                            overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
                            ellipsis: '...',
                        };
                        for(let k in arr) {
   
                            arr[k].label = {
   
                                color: '#fff',
                                backgroundColor:'#409eff',
                                padding: [6, 12],
                                width:70,
                                overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
                                ellipsis: '...',
                            };
                        }

                    }else {
   
                        this.linkInfoTree[i].label = {
   
                            backgroundColor: '#F0F5FA', 
                            borderColor: '#409eff',