饼状图

作者: lu2294 | 来源:发表于2020-02-28 20:56 被阅读0次
createOptions = (data) => {
      const myOptions = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            textStyle:{
                color: '#ffffff'//字体颜色
            },
            right: 10,
            top: 20,
            bottom: 20,
            data: data[0]
        },
        grid: {
            left: '6%',
            // right: '5%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
        series: [
            {
                type: 'pie',
                radius: ['50%', '65%'],
                center: ['40%', '60%'],
                data: data[1],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                     },
                    normal:{
                        label:{ 
                            show: false, 
                            formatter: '{b} : {c} ({d}%)' 
                            }, 
                            labelLine :{show:true} ,
                            color:function(params) {
                              if(params && params.data && params.data.color){
                                return params.data.color
                              }
                            const colorList = [          
                                '#0091FF', '#8EEF24', '#50E3C2', '#F8E71C', '#7A4AA4', '#FE8463','#FE8463','#FE8463','#FE8463'
                            ];
                             return colorList[params.dataIndex]
                         }
                    }
              },
               
            }
        ]
    };
      return myOptions
    }
image.png

相关文章

网友评论

      本文标题:饼状图

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