Echarts饼图之-玫瑰图数据交互

Bertha 。 2022-10-13 05:06 539阅读 0赞

文档：[https://echarts.apache.org/examples/zh/index.html\#chart-type-pie][https_echarts.apache.org_examples_zh_index.html_chart-type-pie]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>五分钟上手之饼状图</title>
            
            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        </head>
        <body>
            
            <div id="main" style="width: 600px;height:600px;"></div>
            <script type="text/javascript">
               
    
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
               
                    myChart.setOption({
                      
                            legend: {
                                top: 'bottom'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            series: [
                                {
                                    name: '面积模式',
                                    type: 'pie',
                                    radius: [50, 250],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 8
                                    },
                                    data: [
                                        {value: 40, name: 'rose 1'},
                                        {value: 38, name: 'rose 2'},
                                        {value: 32, name: 'rose 3'},
                                        {value: 30, name: 'rose 4'},
                                        {value: 28, name: 'rose 5'},
                                        {value: 26, name: 'rose 6'},
                                        {value: 22, name: 'rose 7'},
                                        {value: 18, name: 'rose 8'}
                                    ]
                                }
                            ]
                        
                    });
              
            </script>
        </body>
    </html>

![e08aa63f78c8596b6ca3361441cdcfcd.png][]

Echarts饼图之-玫瑰图数据交互

test.html

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            
            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        </head>
        <body>
            
            <div id="main" style="width: 600px;height:600px;"></div>
            <script type="text/javascript">
                var names = []; //类别数组(用于存放饼图的类别)
    
                var brower = [];
                $.ajax({
                    url: "test.json",
                    data: {},
                    type: 'GET',
                    success: function(data) {
                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        $.each(data, function(index, item) {
                            names.push(item.value); //挨个取出类别并填入类别数组
                            brower.push({
                                name: item.jobName,
                                value: item.jobNum
                            });
                        });
                        hrFun(brower);
                    },
                });
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                function hrFun(param) {
                    myChart.setOption({
                        legend: {
                            top: 'bottom'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {
                                    show: true
                                },
                                dataView: {
                                    show: true,
                                    readOnly: false
                                },
                                restore: {
                                    show: true
                                },
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'right',
                            y: 'bottom',
                            textStyle: { //图例文字的样式
                                color: '#0b2b5e',
                                fontSize: 12
                            },
                            data: ['在线', '离线']
                        },
                        series: [{
                            name: '面积模式',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: brower,
                        }]
                    });
                }
            </script>
        </body>
    </html>

test.json

[{
        "jobNum": 1,
        "jobName": "设备经理"
    }, {
        "jobNum": 1,
        "jobName": "电气操作"
    }, {
        "jobNum": 0,
        "jobName": "ERP管理"
    }, {
        "jobNum": 1,
        "jobName": "安全经理"
    }, {
        "jobNum": 1,
        "jobName": "生产经理"
    }, {
        "jobNum": 1,
        "jobName": "FKM车间主任"
    }, {
        "jobNum": 5,
        "jobName": "操作工"
    }, {
        "jobNum": 1,
        "jobName": "卸料员"
    }, {
        "jobNum": 2,
        "jobName": "经理"
    }, {
        "jobNum": 5,
        "jobName": "成品检测"
    }, {
        "jobNum": 2,
        "jobName": "电气管理"
    }, {
        "jobNum": 0,
        "jobName": "仓库"
    }, {
        "jobNum": 5,
        "jobName": "主任"
    }, {
        "jobNum": 1,
        "jobName": "设备副总"
    }, {
        "jobNum": 0,
        "jobName": "默认身份"
    }, {
        "jobNum": 2,
        "jobName": "设备管理"
    }, {
        "jobNum": 1,
        "jobName": "统计"
    }, {
        "jobNum": 1,
        "jobName": "组长"
    }, {
        "jobNum": 3,
        "jobName": "仪表"
    }, {
        "jobNum": 1,
        "jobName": "公用"
    }, {
        "jobNum": 6,
        "jobName": "叉车"
    }, {
        "jobNum": 1,
        "jobName": "行政管理"
    }, {
        "jobNum": 2,
        "jobName": "普工"
    }, {
        "jobNum": 1,
        "jobName": "班长"
    }, {
        "jobNum": 2,
        "jobName": "人力资源"
    }, {
        "jobNum": 1,
        "jobName": "销售"
    }, {
        "jobNum": 1,
        "jobName": "聚合技术员"
    }, {
        "jobNum": 1,
        "jobName": "工艺"
    }, {
        "jobNum": 4,
        "jobName": "分析"
    }, {
        "jobNum": 1,
        "jobName": "会计"
    }, {
        "jobNum": 5,
        "jobName": "保洁"
    }, {
        "jobNum": 1,
        "jobName": "技术副总"
    }, {
        "jobNum": 2,
        "jobName": "安全管理员"
    }, {
        "jobNum": 1,
        "jobName": "机修管理"
    }, {
        "jobNum": 2,
        "jobName": "采购"
    }, {
        "jobNum": 2,
        "jobName": "销售后台"
    }, {
        "jobNum": 5,
        "jobName": "值班长"
    }, {
        "jobNum": 12,
        "jobName": "后处理"
    }, {
        "jobNum": 1,
        "jobName": "分析车间主任"
    }, {
        "jobNum": 1,
        "jobName": "FEP车间主任"
    }, {
        "jobNum": 2,
        "jobName": "工艺管理"
    }, {
        "jobNum": 4,
        "jobName": "电工"
    }, {
        "jobNum": 0,
        "jobName": "计量"
    }, {
        "jobNum": 18,
        "jobName": "聚合"
    }, {
        "jobNum": 1,
        "jobName": "仓库管理"
    }, {
        "jobNum": 1,
        "jobName": "后勤管理"
    }, {
        "jobNum": 1,
        "jobName": "总经理"
    }, {
        "jobNum": 1,
        "jobName": "公用工程主任"
    }, {
        "jobNum": 1,
        "jobName": "安全总监"
    }, {
        "jobNum": 6,
        "jobName": "中控分析"
    }, {
        "jobNum": 1,
        "jobName": "成品检测组长"
    }, {
        "jobNum": 2,
        "jobName": "副主任"
    }, {
        "jobNum": 1,
        "jobName": "单体技术员"
    }, {
        "jobNum": 1,
        "jobName": "出纳"
    }, {
        "jobNum": 1,
        "jobName": "技术员"
    }, {
        "jobNum": 2,
        "jobName": "环保管理员"
    }, {
        "jobNum": 2,
        "jobName": "机修"
    }, {
        "jobNum": 2,
        "jobName": "生产副总"
    }, {
        "jobNum": 6,
        "jobName": "外操"
    }, {
        "jobNum": 1,
        "jobName": "总经理助理"
    }, {
        "jobNum": 1,
        "jobName": "计量、ERP管理"
    }]

![4548b9eb3e865203b9b964663dd1ad5e.png][]

[https_echarts.apache.org_examples_zh_index.html_chart-type-pie]: https://links.jianshu.com/go?to=https%3A%2F%2Fecharts.apache.org%2Fexamples%2Fzh%2Findex.html%23chart-type-pie
[e08aa63f78c8596b6ca3361441cdcfcd.png]: /images/20221005/c99a88df839647608b7d584d8d1de868.png
[4548b9eb3e865203b9b964663dd1ad5e.png]: /images/20221005/ff815512e35b40d68dbff94bef5458d6.png