echarts pie饼图  series 修改label标签颜色

echarts pie饼图  series  修改label标签颜色

效果图:

代码:

var datas = [
    [
        { name: '圣彼得堡来客', value: 5.6 },
        { name: '陀思妥耶夫斯基全集', value: 1 },
        { name: '史记精注全译(全6册)', value: 0.8 },
    ]
];

option = {
    title: {
        text: '阅读书籍分布',
        left: 'center',
        textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14
        }
    },
    series: datas.map(function (data, idx) {
        var top = idx * 33.3;
        return {
            type: 'pie',
            radius: [20, 60],
            top: top + '%',
            height: '33.33%',
            left: 'center',
            width: 400,
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            color: ['#E99720', '#17B179', '#3388C9'],
            label: {
                  alignTo: 'edge',
                  minMargin: 20,
                  edgeDistance: 15,
                  lineHeight: 28,
                  formatter: function(data) {
                      if(data.dataIndex == 0) {
                          return '{name1|'+data.data.name+'}\n{time|'+data.data.value+'}';
                      } else if(data.dataIndex == 1) {
                          return '{name2|'+data.data.name+'}\n{time|'+data.data.value+'}';
                      } else {
                          return '{name3|'+data.data.name+'}\n{time|'+data.data.value+'}';
                      }
                  },
                  rich: {
                      name1: {
                          color: '#E99720',
                          fontSize: 13
                      },
                      name2: {
                          color: '#17B179',
                          fontSize: 13
                      },
                      name3: {
                          color: '#3388C9',
                          fontSize: 13
                      },
                      time: {
                          color: '#333',
                          fontSize: 13
                      }
                  },
            },
            labelLine: {
                length: 15,
                length2: 0,
                maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
                var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                var points = params.labelLinePoints;
                // Update the end point.
                points[2][0] = isLeft
                    ? params.labelRect.x
                    : params.labelRect.x + params.labelRect.width;

                return {
                    labelLinePoints: points
                };
            },
            data: data
        }
    })
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值