angular - 是否有任何放大和缩小功能，例如加号，减号放大图标来显示 echarts？

问题描述

我有一个径向形式（圆形）的 echart，随着数据的增长，图表变得太忙，最终用户无法看到图表中的内容。为此，我检查了 echarts 的文档。我得到了一个实际上用于鼠标滚动的属性（放大和缩小）。但对我来说它不起作用。它的问题是当我用鼠标滚动时，它不会放大和缩小，而不是实际滚动适用于整个身体，而滚动适用于滚动条。

https://echarts.apache.org/examples/en/editor.html?c=tree-radial

在上面的示例中，如果我添加 series:[{roam=true}] 然后在鼠标滚动进出时放大和缩小工作但对我来说在我的代码中它不起作用。

getCoverageMatrixV2(projectId: string) {
        this.resource.getEndpoint(projectId).subscribe((results) => {
            this.handler.hideLoader();
            if (this.handler.handle(results)) {
                return;
            }
            this.resourceDefinitionList = this.PopulateCoverage(results['data']);
            this.formatJsonObject();
            if (this.resourceDefinitionList == null || this.resourceDefinitionList.length == 0) {
                this.showBtnEndpoint = false;
                this.showErrorMsg = true;
            }
            else {
                this.showErrorMsg = false;
                this.showBtnEndpoint = true;
            }
        }, (error) => {
            this.handler.hideLoader();
            this.handler.error(error);
        });
    }
    showGraph: boolean = false;
    formatJsonObject() {
        let formattedObj = { name: "API", children: [] };
        let childrenObj = this.resourceDefinitionList.map((x) => {
            let obj = {} as any;
            obj.name = x.resourceName;
            obj.children = x.endpoints.map(y => { return { name: y.description } });
            return obj;
        });
        formattedObj.children = childrenObj;
        echarts.util.each(formattedObj.children, function (datum, index) {
            index % 2 === 0 && (datum.collapsed = false);
        });
        this.showGraph = true;
        this.graph1Options = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',
                    data: [formattedObj],
                    top: '8%',
                    bottom: '8%',
                    layout: 'radial',
                    symbol: 'emptyCircle',
                    symbolSize: 7,
                    initialTreeDepth: 3,
                    roam: true,
                    draggable: true,
                    focusNodeAdjacency: true,
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.3)',
                            borderWidth: 1,
                            shadowBlur: 5,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    },
                    label: {
                        position: 'right',
                        formatter: '{b}'
                    },
                    lineStyle: {
                        color: 'source',
                        curveness: 0.3
                    },
                    emphasis: {
                        lineStyle: {
                            width: 10
                        }
                    },
                    expandAndCollapse: true,
                    animationDuration: 450,
                    animationDurationUpdate: 550
                }
            ]
        };
    }

模板.html

<ng-container *ngIf="show; else otherView">
                        <div *ngIf="showGraph" myECharts [EChartsOptions]="graph1Options" style="height: 40rem;"></div>
                </ng-container>
                <ng-template #otherView>
</ng-template>

有人可以建议我为什么会有奇怪的行为吗？

标签： angularecharts

angular - 是否有任何放大和缩小功能，例如加号，减号放大图标来显示 echarts？

问题描述

解决方案

推荐阅读