Echarts在线免费图表

 
            var estate_investment_count = '123456',
    central_count = '456789',
    finance_investment_count = '789123'

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'horizontal',
        bottom: 10,
        icon: 'circle',
        data: ['央企产业投资企业数量' + estate_investment_count, '央企金融投资企业数量' + finance_investment_count],
        formatter: function(name) {
            var html = ''
            //var str = '<span style = "display: inline-block;background: #14b8d4;width: auto">'
            if (name.indexOf('量') > -1) {
                var inx = name.indexOf('量')
                var text = name.substring(0, inx + 1)
                var nub = name.substring(inx + 1, name.length)
                //html = text + str + '<br/>' + nub + '</span>'
                html = text + ' {num|'+nub+'}';
            }
            return html
        },
      
        textStyle: {
            rich: {
                num:{
                    width: 25,
                    padding: [5, 20, 5, 5],
                    align: 'left',
                    backgroundColor:'#3FA7DC',
                    color:'#fff'
                    // 用下面的方法加图片试试
                    //backgroundColor: {
                    //    image: 'url'
                    //}
               } 
            }
        }
    },
    series: [{
            type: 'pie',
            center: ['40%', '50%'],
            radius: [0, '40%'],
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c}"
            },
            label: {
                show: false,
                normal: {
                    position: 'center',
                    formatter: "{b}\n {c}",
                    textStyle: {
                        color: '#fff',
                        fontSize: 20
                    }
                }
            },
            itemStyle: {
                color: '#aaa'
            },
            data: [{
                name: '央企总数',
                value: central_count
            }]
        },
        {
            type: 'pie',
            center: ['40%', '50%'],
            radius: ['48%', '60%'],
            label: {
                normal: {
                    show: true
                }
            },
            data: [{
                    name: '央企产业投资企业数量' + estate_investment_count,
                    value: estate_investment_count,
                    itemStyle: {
                        color: '#ff6666'
                    },
                },
                {
                    name: '央企金融投资企业数量' + finance_investment_count,
                    value: finance_investment_count,
                    itemStyle: {
                        color: '#fd9b27'
                    },
                }
            ]
        }
    ]
}