echarts绘制百家姓饼状图

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 = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘'