echarts 饼图

该段代码主要展示了如何根据类型获取不同时间段的供水分布数据,并利用ECharts库进行饼图渲染。通过uniPost方法从服务器获取数据,根据type参数判断返回的是日、月还是年的数据,然后设置不同颜色的itemStyle,并将数据传递给gszEcharts函数进行图表显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 获取饼图数据
function getWaterPercentOfArea(type) {
    console.log(type+"被点击")
    var echartsData=[];
    var url = window.serverConfig.server + window.serverConfig.getWaterPercentOfArea;
    uniPost(url, {}, (res, message) => {
       var pieCountList =[];
       if (type==1){
           pieCountList = res.resp.day;

       }else if (type==2){
            pieCountList = res.resp.month;

       }else if (type==3){
           var pieCountList = res.resp.year;

       }
        var itemStyle= {};
        for (var i = 0; i < pieCountList.length; i++) {
            if (i % 2 == 0) {
                itemStyle = {color: '#73a0fb'};
            } else if (i % 3 == 0) {
                itemStyle = {color: '#73deb4'};
            } else if (i % 5 == 0) {
                itemStyle = {color: '#f78f74'};
            } else {
                itemStyle = {color: '#f7c639'};
            }

            echartsData[i] = {
                value: pieCountList[i].value,
                name:  pieCountList[i].areaName,
                itemStyle: itemStyle
            };
        }
        gszEcharts(echartsData);

    }, (data, message) => {

    });
}
function gszEcharts(echartsData) {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.getInstanceByDom(document.getElementById("gszEcharts"))
    if (myChart == null) { // 如果不存在,就进行初始化
        myChart = echarts.init(document.getElementById("gszEcharts"));
    }
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: [
            {
                top: '80%',
                left: 'center',
                textStyle:{
                    fontSize: 12,//字体大小
                    color: '#fff'
                },
                // data:['四方台镇']
            },
            // {
            //     top: '89%',
            //     left: 'center',
            //     textStyle:{
            //         fontSize: 12,//字体大小
            //         color: '#fff'
            //     },
            //     data:['某某镇3','某某镇4']
            // }
        ],
        series: [
            {
                name: '供水分布',
                type: 'pie',
                radius: '50%',
                center: ["50%", "40%"],
                label: {
                    formatter: '{color|{b}}\n {color|{d}%} ',
                    rich: {
                        color: {
                            color: '#fff',
                            align: 'center'
                        }
                    }
                },
                // data: [
                //     {value: 157, name: '四方台镇',itemStyle: { color: '#f6c318' }},
                //     // {value: 735, name: '某某镇2',itemStyle: { color: '#2d80e8' }},
                //     // {value: 580, name: '某某镇3',itemStyle: { color: '#90ce21' }},
                //     // {value: 484, name: '某某镇4',itemStyle: { color: '#d96f3b' }}
                // ],
                data: echartsData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option,true);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值