echarts 可视化数据展示饼图

绝地灬酷狼 2023-06-22 05:20 9阅读 0赞

**效果**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]**

**男女饼图**

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);
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191214105256156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70