饼图-动态-用户模型echarts 饼配置项内容和展示

表示-用户结构的变迁

      //时间轴数据
var timelineData = [2016, 2017];

var user_data = [{
    'user_cnt': 4.52,
    'age_range': [{
        value: 2,
        name: '65以上'
    }, {
        value: 5,
        name: '50-60岁'
    }, {
        value: 20,
        name: '35-50岁'
    }, {
        value: 35,
        name: '25-35岁'
    }, {
        value: 25,
        name: '19-25岁'
    }, {
        value: 12,
        name: '0-18岁'
    }],
    gender_range: [{
        value: 70,
        name: '女-70%'
    }, {
        value: 30,
        name: '男-30%'
    }]

},
{
    'user_cnt': 6.52,
    'age_range': [{
        value: 3,
        name: '65以上'
    }, {
        value: 15,
        name: '50-60岁'
    }, {
        value: 30,
        name: '35-50岁'
    }, {
        value: 25,
        name: '25-35岁'
    }, {
        value: 9,
        name: '19-25岁'
    }, {
        value: 11,
        name: '0-18岁'
    }],
    gender_range: [{
        value: 55,
        name: '女-55%'
    }, {
        value: 45,
        name: '男-45%'
    }]

}


];







option = {
    baseOption: {

        title: {
            subtext: '用户数',
            x: 'center',
            y: 'center',
            textStyle: { //主标题配置
                color: '#FFCC00',
                fontWeight: 'normal',
                fontSize: 16,

            },
            subtextStyle: { //子标题配置
            },
        },

        timeline: {
            show: false, //是否显示
            left:10,
            top:10,
            right:600,
            autoPlay: true, //自动播放
            playInterval: 5000, //播放间隔
            axisType: 'category',
            inverse: false, //是否反向放置 timeline，反向则首位颠倒过来。
            symbol: 'circle',
            symbolSize:0,
            itemStyle: {//轴的图形样式
                normal: {
                    color: '#04a5f1'
                },
                emphasis: {
                    color: '#04a5f1'
                }
            },
            label:{//轴的文本标签样式
            normal: {
                show:true,
                    color: '#04a5f1'
                },
                emphasis: {
                    color: '#04a5f1'
                }
                
            },
            lineStyle: { //轴线控制
                show: false,
                color: '#ddd'
            },
            checkpointStyle: {//当前选择项的样式
                
                symbolSize:0,
                //color: '#04a5f1',
                //borderColor: 'rgba(4, 165, 261, .5)'
            },
            controlStyle:{//控制按钮样式
                show:false,
            },
            data: timelineData,

        },
        backgroundColor: '#333333',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}:({d}%)"
        },
        series: [{
            name: '性别',
            type: 'pie',
            radius: ['20%', '50%'],
            color: ['#FFCCFF', '#59abe1', '#f4cf42', '#3dc6a8'],
            label: {
                normal: {
                    position: 'inner'
                }
            }
        }, {
            name: '年龄结构',
            type: 'pie',
            radius: ['54%', '72%'],
            color: ['#a0dca0', '#60bbb6', '#f78db3', '#feadac', '#fae395', '#91d4e5', '#8eb3e8'],
            label: {
                normal: {
                    //position: 'inner',
                    formatter: '{b}\n{d}%'
                }
            }
        }]
    },
    
    
    options: [{
            title: {
                text: user_data[0].user_cnt + '亿',

            },

            series: [{ //性别结构
                    data: user_data[0].gender_range,
                },
                //年龄结构

                {
                    data: user_data[0].age_range,
                }
            ]

        },{
            title: {
                text: user_data[1].user_cnt + '亿',

            },

            series: [{ //性别结构
                    data: user_data[1].gender_range,
                },
                //年龄结构

                {
                    data: user_data[1].age_range,
                }
            ]

        }

    ]


};