echarts结合Animate.css实现入场动画

echarts yekong

wanjunshijie 2021-04-01 at 14.32.19

wanjunshijie 2021-04-01 at 14.33.14

wanjunshijie 2021-04-01 at 14.33.57

drawechart1() {
                this.chart = echarts.init(document.getElementById("echart1"));
                var $animate = $('#echart1');
                $animate.removeClass().addClass('slideInLeft animated infinite echart1');
                setTimeout(removeClass, 600);

                function removeClass() {
                    $animate.removeClass('slideInLeft');
                    $animate.removeClass('animated');
                    $animate.removeClass('infinite');
                }

                var colorArray = [
                    {
                        top: '#00FFEA', //黄
                        bottom: '#0060FF'
                    }, {
                        top: '#00FFEA', //黄
                        bottom: '#0060FF'
                    }, {
                        top: '#00FFEA', //黄
                        bottom: '#0060FF'
                    }, {
                        top: '#00FFEA', //黄
                        bottom: '#0060FF'
                    },
                ];
                var option = {
                    tooltip: {
                        show: true,
                        formatter: "{b}:{c}"
                    },
                    grid: {
                        left: '5%',
                        top: '0%',
                        right: '8%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        show: false,
                        position: 'top',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                        splitLine: {
                            show: false
                        },
                    },
                    yAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false,
                            alignWithLabel: false,
                            length: 5,
                        },
                        "splitLine": { //网格线
                            "show": false
                        },
                        inverse: 'true', //排序
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#98DEFF',
                                fontSize: '12'
                            }
                        },
                        data: ['地区生产总值', '第一产业', '第二产业', '第三产业']
                    }

                    ],
                    series: [{
                        name: '能耗值',
                        type: 'bar',
                        animationDuration: 2800,
                        animationEasing: 'cubicInOut',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}' + '%',
                                textStyle: {
                                    color: '#00EAED' //color of value
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: function (params) {
                                    let num = colorArray.length;
                                    return {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: colorArray[params.dataIndex % num].top
                                        }],
                                        //globalCoord: false
                                    }
                                },
                                barBorderRadius: 70,
                                borderWidth: 0,
                                borderColor: '#333',
                            }
                        },
                        barWidth: 9,
                        barGap: '0%',
                        barCategoryGap: '50%',
                        data: [19.85, 13.85, 17.62, 22.21]
                    }
                    ]
                };
                this.chart.clear();
                this.chart.resize();
                this.chart.setOption(
                    option
                );
            },
喜欢