echarts 饼图

最新推荐文章于 2025-05-06 11:16:38 发布

菜蜗牛很菜

最新推荐文章于 2025-05-06 11:16:38 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏： ECharts 文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45010894/article/details/121036334

ECharts 专栏收录该内容

4 篇文章

订阅专栏

该段代码主要展示了如何根据类型获取不同时间段的供水分布数据，并利用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);
}