echarts在angular项目中的使用

lhhbk

已于 2023-06-20 10:20:22 修改

阅读量767

点赞数 1

文章标签：前端 echarts scss

于 2023-06-20 09:51:28 首次发布

本文链接：https://blog.csdn.net/Tonghanhan/article/details/131300132

版权

前言

文中所示的是柱状图的一个效果，为增强对该实例的印象，结合工作中所制作的数据大屏来进行联系

一、极坐标下的柱状图堆叠效果

1.1堆叠在一起的效果

图中所示的是界面被分为六分其中第一份中有echarts图形，在工作中总会遇到每一份中的echarts图形不一样的要求，在这里只做第一份的效果演示

HTML：

<div class="container_main">
    <div class="item item1" #barElement></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

SCSS:

.container_main {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    .item {
        background-color: rgb(200, 255, 255);
    }
    .item1 {
        background-color: #fff;
    }
}

TS:

window = <any>window;
    @ViewChild('barElement') barElement!: ElementRef;
    echartsElement: any;

 practiceIfy = {
        onInit: () => {
            this.echarts.requestToInit().subscribe(result => {
                if (result) {
                    this.echartsElement = this.window.echarts.init(this.barElement.nativeElement);
                    const option = {
                        angleAxis: {}, //极坐标系的径向轴。
                        radiusAxis: {//极坐标的角度轴
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu'],
                            z: 10, //半径轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
                        },
                        polar: {},
                        series: [
                            {
                                type: 'bar',
                                data: [1, 2, 3, 4],
                                coordinateSystem: 'polar', //按照极坐标的方式进行堆叠
                                name: 'A',
                                stack: 'a', //数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置 堆叠配置都为a 说明都堆叠在一起
                                emphasis: {
                                    focus: 'series', //高光显示的效果
                                },
                            },
                            {
                                type: 'bar',
                                data: [2, 4, 6, 8],
                                coordinateSystem: 'polar',
                                name: 'B',
                                stack: 'a',
                                emphasis: {
                                    focus: 'series',
                                },
                            },
                            {
                                type: 'bar',
                                data: [1, 2, 3, 4],
                                coordinateSystem: 'polar',
                                name: 'C',
                                stack: 'a',
                                emphasis: {
                                    focus: 'series',
                                },
                            },
                        ],
                        legend: {
                            show: true,
                            data: ['A', 'B', 'C'], //图例
                        },
                    };
                    this.echartsElement.setOption(option);
                }
            });
        },
    };


 ngAfterViewInit(): void {
        fromEvent(window, 'resize')
            .pipe(debounceTime(300))
            .subscribe(result => {
                this.echartsElement.resize();//每次窗口发生变化的时候都会调用ehcarts的重新调整大小的方法
            });
        this.practiceIfy.onInit();
    }

其中series系列中的data 对应的是图像中name为'A‘的一组，data为[1,2,3,4],那么分别对应的是mon为1，在极坐标中根据角度轴可以在下图看到所占的值为1，以此类推，而name为B、C的数据需要和同为stack同为’a'的'A‘进行堆叠。