美文网首页
Echarts模板(六):馅饼图

Echarts模板(六):馅饼图

作者: ZhenKuanJiang | 来源:发表于2019-04-28 18:21 被阅读0次

    本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤繁琐,最后我选择使用Echarts画图,它不仅操作简单,而且图像美观,只需要一点点代码基础就能实现。接下来,我向大家分享以下我用到的几个图的模板代码,你在使用的时候均可通过以下代码进行修改,由于本人没有学过JS,不对的地方还请大家多多指教

    option = {
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        backgroundColor: '#FDFEFE',
        title: {
            text: '',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },
    
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
    
        visualMap: {
            show: false,
            min: 30,
            max: 130,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '75%',
                center: ['50%', '50%'],
                
                data:[
                    {value:93, name:'年卡'},
                    {value:82, name:'季卡'},
                    {value:62, name:'半年卡'},
                    {value:62, name:'月卡'},
                    {value:53, name:'单次体验卡'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        formatter: '{b}({d}%)',
                        textStyle: {
                            color: 'rgba(0, 0, 0)',
                            fontSize:20
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };
    

    以下是效果图

    相关文章

      网友评论

          本文标题:Echarts模板(六):馅饼图

          本文链接:https://www.haomeiwen.com/subject/hfvjnqtx.html