echarts实现颜色渐变的环状图（包括自定义各种配置项的属性）

分手后的思念是犯贱 2022-12-15 11:20 579阅读 0赞

# 文章转载自：[https://blog.csdn.net/qq\_27387133/article/details/104775880][https_blog.csdn.net_qq_27387133_article_details_104775880] 仅供学习参考 #

# 实现效果： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzg3MTMz_size_16_color_FFFFFF_t_70][]

# 实现代码： #

option = {
        color: [new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
            offset: 0,
            color: '#F2A635'
        },
        {
            offset: 0.9,
            color: '#ffffff'
        }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
            offset: 0,
            color: '#26DCCE'
        },
        {
            offset: 0.9,
            color: '#ffffff'
        }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
            offset: 0,
            color: '#352CFE'
        },
        {
            offset: 0.9,
            color: '#ffffff'
        }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
            offset: 0,
            color: '#D285FE'
        },
        {
            offset: 0.9,
            color: '#ffffff'
        }])],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
                fontSize: 18
            }
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            y: 'center',
            itemGap: 20,
            itemWidth: 30,
            itemHeight: 20,
            textStyle: {
                color: '#000',
                fontSize: 25
            },
            data: ['初创型<=5年', '成长型5-10年', '发展型10-20年', '老字号>20年']
        },
        toolbox: {
            show: false,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        series: [{
            name: '企业类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '50%'],
            roseType: 'radius',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: true
                    }
                },
                emphasis: {
                    label: {
                        show: false,
                        position: 'outer',
                        textStyle: {
                            fontSize: '15',
                            fontWeight: 'bold',
                            color: 'white'
                        }
                    }
                }
            },
            data: [{
                value: 335,
                name: '初创型<=5年'
            },
            {
                value: 310,
                name: '成长型5-10年'
            },
            {
                value: 234,
                name: '发展型10-20年'
            },
            {
                value: 135,
                name: '老字号>20年'
            }]
        }]
    };

[https_blog.csdn.net_qq_27387133_article_details_104775880]: https://blog.csdn.net/qq_27387133/article/details/104775880
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzg3MTMz_size_16_color_FFFFFF_t_70]: /images/20221123/5dbf9ac5fcfb438cbf4b1b7a9af09b4a.png