echarts_饼图的动态展示.html

最新推荐文章于 2025-03-26 10:44:31 发布

学无止境慢慢来

最新推荐文章于 2025-03-26 10:44:31 发布

阅读量1.2k

点赞数 1

分类专栏： echarts知识点

echarts知识点专栏收录该内容

5 篇文章

订阅专栏

本文展示了一个使用ECharts库创建动态饼图的例子，通过定时器实现饼图数据项的循环高亮效果，并展示了如何配置标题、图例、工具提示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts1</title>

    <script src="echarts.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title : {  // 标题。
                text: '饼图程序调用高亮示例',  // 标题文本
                x: 'center'  // 水平居中。
            },
            tooltip: {  // 鼠标悬浮时的工具提示。
                trigger: 'item',  // 触发器：饼块。
                // 格式程序。{a}，是series中对象的name属性的值
                // {b}，是series中对象的data中每一条数据的name属性的值。
                // {c}，是series中对象的data中每一条数据的value属性的值。
                // {d}%，是series中对象的data中每一条数据所占的比例。
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  // 图例。
                orient: 'vertical',  // 标定方向：垂直
                left: 'left',  // 图例位于图的左或者右。
                // 图例数据。
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',  // 系列名
                    type: 'pie',  // 图类型。
                    radius : '55%',  // 图半径，占父元素的比例。
                    center: ['50%', '60%'],  // 图的中心位置。
                    data:[  // 饼图的数据
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {  // 饼图的样式。
                        emphasis: {  // 鼠标悬浮时的效果。
                            shadowBlur: 10,  // 阴影大小
                            shadowOffsetX: 0,  // 阴影水平方向偏移。
                            shadowColor: 'rgba(0, 0, 0, 0.5)'  // 阴影颜色。
                        }
                    }
                }
            ]
        };
        var app = {config: null, currentIndex: 0};
        app.currentIndex = -1;

        setInterval(function () {
            // 数据条数，即饼图分成的块数。
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            app.currentIndex = (app.currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            // 显示 tooltip
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
        }, 1000);


        myChart.setOption(option);
    </script>
</body>
</html>