echarts 实现饼图pie渐变色显示

最新推荐文章于 2026-03-22 00:14:53 发布

原创最新推荐文章于 2026-03-22 00:14:53 发布 · 3.5k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

我是唐赢

关注

标签

#echarts #前端 #javascript

分类 it交互设计（ux）

vue.js 同时被 3 个专栏收录

64 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

echarts

7 篇文章

订阅专栏

文章介绍了如何使用ECharts库创建一个带有动态颜色的产品结构饼图，展示了大众、通用和长城在产品中的占比。

实现效果

代码

option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '2%',
            left: 'center',
        },
        series: [
            {
                name: '产品结构',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [{"name":"大众", value:10},
                       {"name":"通用", value:20},
                       {"name":"长城", value:20}
                       ],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = [
                                ['#fab2ff','#9f7ef4'],
                                ['#ffeb90','#ffe25c'],
                                ['#fe6f88','#ffd3a5'],
                            ];
                            var index = params.dataIndex;
                            return new echarts.graphic.LinearGradient(0, 0, 1, 1,
                                [{
                                    offset: 0,
                                    color: colorList[index][0]
                                },
                                    {
                                        offset: 1,
                                        color: colorList[index][1]
                                    }
                                ]);
                        }
                    }
                }
            }
        ]
    };

查看效果地址：

将内容复制到在左边的参数栏

Examples - Apache ECharts