echart饼图数据渲染

最新推荐文章于 2024-05-09 00:18:05 发布

倔强小李

最新推荐文章于 2024-05-09 00:18:05 发布

阅读量436

点赞数

分类专栏： echart

本文链接：https://blog.csdn.net/love_yourself_ok/article/details/112918738

版权

js ajax

echart 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

echart饼图数据渲染

html

 <div id="data_statistics"></div>


function circle() {

    const params = {};
    params.areaId = areaId;
    params.year = $("#year").val();

    $.ajax({
        cache: true,
        type: "POST",
        url: "/sdc/jiekou",
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(params),
        async: true,
        success: function (r) {
            if (r.code === 0) {
                var vos = r.data;

                let colors = getCustomizeColor();

                for (let i = 0; i < vos.harmList.length; i++) {
                    vos.harmList[i].itemStyle = colors[i]
                }

                var dataChart = echarts.init(document.getElementById('data_statistics'));
                var dataStatistics = {
                    title: [
                        {
                            text: '统计',
                            left: 'center',
                        },
                    ],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        left: 'center',
                        top: 40,
                        data: vos.harmName,
                    },
                    series: [
                        {
                            name: '接触危害因素职工统计',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            top: 70,
                            center: ['50%', '50%'],
                            avoidLabelOverlap: true,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            label: {
                                formatter: '{b|{b}：}{per|{d}%} ',
                                normal:{
                                //避免数据重叠
                                    formatter(v) {
                                        let text = Math.floor(v.percent * 100) / 100 +'%' + '' + v.name
                                        if(text.length <= 8)
                                        {
                                            return text;
                                        }else if(text.length > 8 && text.length <= 16){
                                            return text = `${text.slice(0,8)}\n${text.slice(8)}`
                                        }else if(text.length > 16 && text.length <= 24){
                                            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
                                        }else if(text.length > 24 && text.length <= 30){
                                            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
                                        }else if(text.length > 30){
                                            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
                                        }
                                    },
                                },
                                rich: {
                                    a: {
                                        color: '#1F282D',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#1F282D',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        color: '#1F282D',
                                        fontSize: 14,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#1F282D',
                                        padding: [2, 4],
                                        fontSize: 14,
                                        borderRadius: 2
                                    }
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: vos.harmList
                        },
                    ],
                };
                dataChart.setOption(dataStatistics);
            }
            //饼图的跳转
            dataChart.on('click', function (params) {
                var val = params.data.value;
                var name = params.data.name;
                if (val > 0) {
                    window.location = '/supervise/harmData?areaId=' + areaId + '&name=' + name + "&year=" + $("#year").val();
                }
            })
        }
    });
}