Echarts 饼图实例

最新推荐文章于 2024-05-14 07:27:34 发布

qiufengwuxiu

最新推荐文章于 2024-05-14 07:27:34 发布

阅读量479

点赞数

文章标签： Echarts饼图实例

本文链接：https://blog.csdn.net/qiufengwuxiu/article/details/79014810

版权

前端：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>图表显示</title>
    <script src="JS/echarts.min.js"></script>
    <script src="JS/jquery-1.8.3.min.js"></script>
    <style>
        .fr_city {
            width: 100%;
            height:900px;
        }
        .fr_css {
            width: 100%;
            height: 650px;
        }
    </style>

</head>
<body>
    
    <center>
        <div id="main" style="width: 600px;height:400px;"></div>
        <iframe src="InCityShow.html" class="fr_city" frameborder="0"></iframe>
        <iframe src="OutCityShow.html" class="fr_css" frameborder="0"></iframe>
    </center>
    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: '疗养人员地区反馈表',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: [],
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: []
                }
            ],
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        //饼图动态赋值
        $.ajax({
            type: "get",
            url: "ASHX/GetRestVoteNum.ashx",
            data: {},
            cache: false,    //禁用缓存
            dataType: "json",
            success: function (result) {
                var names = [];//定义两个数组
                var nums = [];
                $.each(result,function (key, values) { //此处我返回的是list<String,map<String,String>>循环map
                    names.push(values.name + ":" + values.value + "人");
                    var obj = new Object();
                    obj.name = values.name + ":" + values.value + "人",
                    obj.value = values.value
                    nums.push(obj);
                });
                myChart.setOption({ //加载数据图表
                    legend: {
                        data: names
                    },
                    series: {
                        // 根据名字对应到相应的系列
                        name: ['人数'],
                        data: nums
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("查询失败");
            }
        });
    </script>
</body>
</html>