Categories
Mastering Development

Is there any zoom in and zoom out feature like plus, minus magnifying icon to show the echarts?

I have a echart which is in radial form (circular form), as the data grows then the graph becomes too busy that the end user cant be able to see whats there in the graph. For that i have checked the documentation of echarts. I got one property which is actually working for mouse scroll (zoom in and out). But for me its not working. The issue with it is when i scroll with the mouse then its not zooming in and out instead of the actual scroll applies to the entire body and the scroll applies to the scroll bar.

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

In the above example, if i add in series:[{roam=true}] then on mouse scroll in and out the zoom in and out works but for me in my code its not working.

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
                }
            ]
        };
    }

template.html

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


Can anybody suggest me why there is a strange behaviour?

Leave a Reply

Your email address will not be published. Required fields are marked *