在echarts中实现饼图、圆环过渡动画

一只欢喜

已于 2023-06-20 16:41:14 修改

阅读量1.3k

点赞数 2

文章标签： echarts 前端 javascript

于 2023-06-20 16:30:46 首次发布

本文链接：https://blog.csdn.net/qq_44866810/article/details/131309077

版权

该文章展示了一个使用ECharts库在web页面上生成动态饼图的例子。代码包括HTML结构、CSS样式以及JavaScript脚本，特别是利用ECharts的setOption方法每秒更新数据，实现数据过渡动画效果。

摘要由CSDN通过智能技术生成

1.html

<div class="main">
        <div class="con">
            <div class="left">
                <div class="contain">
                    <div class="pie1" id="pieLeftEcharts"></div>
                </div>
            </div>
        </div>
    </div>

2.css

       .main .con {
            width: 80%;
            margin: 0 auto;
        }

        .main .con .left .contain {
            width: 100%;
            height: 465px;
            background-size: 100% 100%;
        }

        .main .con .contain .pie1 {
            width: 75%;
            height: 400px;
            margin: 30px auto;
        }

3.script

      function chartsFourData() {
            return [
                {
                    value: Math.random(),
                    name: 'A',
                },
                {
                    value: Math.random(),
                    name: 'B'
                },
                {
                    value: Math.random(),
                    name: 'C'
                },
                {
                    value: Math.random(),
                    name: 'D'
                },
            ];
        }



        var charts4 = echarts.init(document.getElementById('pieLeftEcharts'))
        charts4.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                show: true,
                orient: 'vertical',
                align: 'left', //设置图例中文字位置在icon标识符的右侧
                left: '0',
                top: '25%',
                itemGap: 20, //设置图例之间的间距
                padding: [0, 0, 0, 0], //设置图例与圆环图之间的间距
                textStyle: { //图例文字的样式
                    color: 'auto',
                    fontSize: 15
                },
            },
            textAlign: 'center',
            series: [
                {
                    name: 'A',
                    type: 'pie',
                    radius: ['60%', '70%'],//制作饼图
                    data: chartsFourData(),
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center',
                        formatter: '{d}%'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    // data: [
                    //     { value: 1333, name: 'A' },
                    //     { value: 735, name: 'B' },
                    //     { value: 580, name: 'C' },
                    //     { value: 484, name: 'D' },
                    // ]
                }
            ],
        })


        setInterval(function () {
            charts4.setOption({
                series: {
                    data: chartsFourData()
                }
            });
        }, 1000);

如图