人口 占比echarts 饼配置项内容和展示

饼状图统计

      var data = [
    { name: '户籍人口', value: 36889 },
    { name: '流动人口', value: 2450 },
];
var lineColor = "#0042FF"
var numArr = data.map((item) => item.value);
var maxNum = Math.max(...numArr);
var maxArr= [];
data.forEach((item) => {
    maxArr.push(maxNum);
});
var generateDotted = (color = lineColor) => {
    var dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 25,
                itemStyle: {
                    normal: {
                        color: color,
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }

    }

    return dataArr

}
const color = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
            offset: 0,
            color: '#50A459',
        },
        {
            offset: 1,
            color: '#D3FD91',
        },
    ]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
            offset: 0,
            color: '#0056FF',
        },
        {
            offset: 1,
            color: '#01A1FF',
        },
    ]),
];
option={
    backgroundColor: '#0A2E5D',
        color: color,
        title: {
            text: "人口\n占比",
            left: 'center',
            top: "center",
            textStyle: {
                fontWeight: 'bold',
                color: '#F7DC8D',
                fontSize: 18
            },

        },
        grid: {
            top: '15%',
            left: 0,
            right: '1%',
            bottom: 5,
            containLabel: true,
        },
        tooltip: {
            show: true
        },
        series: [{
            name: '周边人口占比',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['45%', '65%'],

            label: {

                padding: [0, -80, 0, -80],
                formatter: function (params) {
                    let total = 0;
                    data.forEach(item => {
                        total += item.value;
                    })
                    let percen = ((Number(params.value) / total) * 100).toFixed(0) + "%";
                    if (params.name !== '') {
                        return '{name|' + params.name + '}' + '\n\n{value|' + percen + '}';
                    } else {
                        return '';
                    }
                },
                align: 'left',
                rich: {
                    name: {
                        fontSize: 14,
                        color: '#fff',

                    },
                    value: {
                        fontSize: 14,
                        color: '#fff',

                    }
                },
            },
            labelLine: {
                show: true,
                length: 20,
                length2: 100
            },
            data: data
        },
        {
            name: "內园1",
            type: 'pie',

            silent: true,
            radius: ['30%', '31%'],
            label: {
                show: false
            },
            labelLine: {
                show: false

            },
            itemStyle: {
                color: lineColor,

            },
            data: maxArr
        },
        {
            name: "內园虚线",
            type: 'pie',

            silent: true,
            radius: ['35%', '36%'],
            label: {
                show: false
            },
            labelLine: {
                show: false

            },
            itemStyle: {
                color: "#0042FF",

            },
            data: generateDotted()
        },
        {
            name: "外圆1",
            type: 'pie',
            zlevel:-1,
            silent: true,
            radius: ['75%', '76%'],
            label: {
                show: false
            },
            labelLine: {
                show: false

            },
            itemStyle: {
                color: lineColor,

            },
            data: maxArr
        },
        {
            name: "外圆虚线",
            type: 'pie',

            silent: true,
            radius: ['85%', '86%'],
            label: {
                show: false
            },
            labelLine: {
                show: false

            },
            itemStyle: {
                color: lineColor,

            },
            data: generateDotted()
        },
        {
            name: "外圆虚线1",
            type: 'pie',

            silent: true,
            radius: ['95%', '96%'],
            label: {
                show: false
            },
            labelLine: {
                show: false

            },
            itemStyle: {
                color: lineColor,

            },
            data: generateDotted('rgba(0,66,255,0.5)')
        },
        ],
    }