echarts 可视化数据展示 饼图

效果

男女饼图

initChart3() {
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            graphic:[
              {
              type:'text',
              left:'center',  //位置
              top:'25%',      //向下25%
              style:{
                  text:'42%',
                  fill:'#4cfdf7',
                  width:30,
                  height:30,
                  fontSize:14,
            }
          },
          {
              type:'text',
              left:'center',
              top:'50%',
              style:{
                  text:'58%',
                  fill:'#eff425',
                  width:30,
                  height:30,
                  fontSize:14,
              }
          },
        ],
            legend: {                           //下面小按钮
                        orient: 'vertical',
                        x:'center',
                        y: 'bottom',
                        data: ['男', '女'],
                        icon:"circle",
                        textStyle:{
                            fontSize: 14,//字体大小
                            color: '#ffffff'//字体颜色
                        }
            },
            series: [
                {
                    name:'签约老人',
                    type:'pie',
                    radius: ['70%', '58%'],
                    center: ['50%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {     
                        normal: {
                            show: false
                        }
                    },
                    data:[   //饼图数据
                        {value:335, name:'男',itemStyle: { color: '#4cfdf7' } },
                        {value:310, name:'女',itemStyle: { color: '#eff425' } },
                    ]
                }
            ]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main3"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

年龄饼图：

initChart5() {
        var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        //饼图按钮
        legend: [
                {
                    icon : 'circle',  //按钮样式设置成圆的
                    textStyle : {
                        color : "#fff",
                        fontSize: 14,
                    },
                    data : [ '60-70岁', '70-80岁'],
                    x : '10%',
                    y: '80%',
                },{
                    icon : 'circle',
                    textStyle : {
                        color : "#fff",
                        fontSize: 14,
                    },
                    data : [ '80-90岁', '90-100岁' ],
                    x : '10%',
                    y: '90%',
                }   
            ],
      //圆环内文字
        graphic:[{
            type:'text',
            left:'32%',
            top:'27%',
            style:{
                text:'8%',
                fill:'#eff425',
                width:30,
                height:30,
                fontSize:14,
            }
        },{
            type:'text',
            left:'55%',
            top:'27%',
            style:{
                text:'32%',
                fill:'#a430ff',
                width:30,
                height:30,
                fontSize:14,
            }
        },{
            type:'text',
            left:'32%',
            top:'50%',
            style:{
                text:'18%',
                fill:'#4cfdf7',
                width:30,
                height:30,
                fontSize:14,
            }
        },
        {
            type:'text',
            left:'55%',
            top:'50%',
            style:{
                text:'42%',
                fill:'#2a72eb',
                width:30,
                height:30,
                fontSize:14,
            }
        },
        ],
        series: [
            {
                name:'年龄占比',
                type:'pie',
                radius: ['70%', '58%'],
                center: ['50%', '40%'], //圆环位置
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:261, name:'60-70岁',itemStyle: { color: '#a430ff' } },
                    {value:400, name:'70-80岁',itemStyle: { color: '#2a72eb' } },
                    {value:130, name:'80-90岁',itemStyle: { color: '#4cfdf7' } },
                    {value:70, name:'90-100岁',itemStyle: { color: '#eff425' } },
                ]
            }
        ]
    };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main5"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },