echarts绘制百家姓饼状图_echart 旋转姓氏图-优快云博客

本文链接：https://blog.youkuaiyun.com/yf19990720/article/details/108079862

本文介绍了如何利用JavaScript库Echarts来绘制百家姓的饼状图。Echarts是一个开源的可视化库，适用于各种浏览器和设备。文章展示了效果图，并详细解释了代码实现过程，包括设置容器、定义图表和构建随机属性的步骤。最后提供了完整的源代码供读者参考和交流。

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

echarts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

效果图

进去随机加载6个，每个姓的数值随机
在这里插入图片描述
点击右侧的图例，显示隐藏饼状图

代码分析

先设置一个容器

<style>
        div {
            width: 1500px;
            height: 800px;
        }
    </style>
    <div class="div"></div>

定义echarts

 var mycharts = echarts.init($('.div').get(0));

定义图表

 mycharts.setOption({
            title: {
                text: '百家姓',
                textStyle: {
                    color: 'red',
                    fontSize: 20
                }
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.legenddata,
                selected: data.selected,
                pageIconColor: 'pink',
                pageIconSize: '25',
                pageButtonPosition: 'start'
            },

            series: [{
                name: '百家姓',
                type: 'pie',
                data: data.seriesdata
            }]

        })

构建随机属性

function show() {
            var name = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危']
            var legenddata = [];
            var seriesdata = [];
            var selected = {};

            name.sort(function() {
                return Math.random() - 0.5;
            });
            for (var i = 0; i < 70; i++) {
                var make = name[0] + name[1];
                legenddata.push(make);
                seriesdata.push({
                    name: make,
                    value: Math.floor(Math.random() * 10000)
                });
                selected[make] = i < 6;
                console.log(make);
                console.log(selected[make]);
                name.shift();
                name.shift();
            }
            console.log(selected);
            return {
                legenddata: legenddata,
                seriesdata: seriesdata,
                selected: selected
            }

            console.log(selected[make])


        }
        show()

完整源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>
    <script src="./jquery.js"></script>
    <title>百家姓</title>
</head>

<body>
    <style>
        div {
            width: 1500px;
            height: 800px;
        }
    </style>
    <div class="div"></div>

    <script>
        var mycharts = echarts.init($('.div').get(0));
        var data = show();
        mycharts.setOption({
            title: {
                text: '百家姓',
                textStyle: {
                    color: 'red',
                    fontSize: 20
                }
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.legenddata,
                selected: data.selected,
                pageIconColor: 'pink',
                pageIconSize: '25',
                pageButtonPosition: 'start'
            },

            series: [{
                name: '百家姓',
                type: 'pie',
                data: data.seriesdata
            }]

        })

        function show() {
            var name = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危']
            var legenddata = [];
            var seriesdata = [];
            var selected = {};

            name.sort(function() {
                return Math.random() - 0.5;
            });
            for (var i = 0; i < 70; i++) {
                var make = name[0] + name[1];
                legenddata.push(make);
                seriesdata.push({
                    name: make,
                    value: Math.floor(Math.random() * 10000)
                });
                selected[make] = i < 6;
                console.log(make);
                console.log(selected[make]);
                name.shift();
                name.shift();
            }
            console.log(selected);
            return {
                legenddata: legenddata,
                seriesdata: seriesdata,
                selected: selected
            }

            console.log(selected[make])


        }
        show()
    </script>
</body>

</html>