Echarts-百家姓-饼状图

最近学习了 Echarts 可视化数据很有意思，于是写了一个百家姓的饼状图，今天就给大家分享一下

因为姓氏比较多，显示出来的为想个姓氏拼接一起的

主要思路：

• 随机生成两个下标（并不重复）
• 四个数组分别用来存放（姓名、不重复的数组、存储所有的数据、存储放在页面上的数据）

<div class="demo"></div>
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>

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

        // 随机生成两个数
        var data_name = [],
            data_index = [],
            data_values = [],
            selected = {};
        var i = 0;
        while (true) {
            var num1 = Math.floor(Math.random() * data.length); // 随机数1
            var num2 = Math.floor(Math.random() * data.length); // 随机数2

            if (data_index.indexOf(num1) == -1 && data_index.indexOf(num2) == -1) {
                data_index.push([num1, num2]); // 去重随机数

                data_name.push(data[num1] + data[num2]); // 存放2个拼接后的 姓

                data_values.push({
                    value: num1 * num2,
                    name: data[num1] + data[num2]
                }); // 存放 series 中的显示的数据
                ++i;
                selected[data[num1] + data[num2]] = i <= 6;
            }
            if (data_index.length == 70) break; // 有70个数据时，退出循环
        }
        // console.log(selected);

        mydemo.setOption({
            title: [{
                text: '饼状图',
                show: false
            }],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                show: true,
                right: '100px',
                type: 'scroll',
                orient: 'vertical',
                data: data_name,
                selected: selected,
                pageIconColor: 'green',
                pageIconSize: 20,
                pageButtonPosition: 'start'
            },
            series: [{
                name: '百家姓',
                type: 'pie',
                data: data_values,
            }]
        })
</script>

附上效果图：

注意：此百家姓中的数据为个人编写，不具备参考价值