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); // 随机数1var num2 = Math.floor(Math.random() * data.length); // 随机数2if (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>

附上效果图：

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

Echarts-百家姓-饼状图相关推荐

echarts制作饼状图如何设置不同类别之间有一定间隔？
解决echarts饼状图不同类之间有一定间隔用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
echarts绘制百家姓饼状图
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
使用echarts画饼状图，设置饼状图颜色
前言: 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. 图表在容器中可以调整位置,让图表显示的更完整. 今日分享重点:画饼状图. 1.引入相关js <script type=& ...
Echarts动态饼状图，柱形图，关系图绘制
1 饼状图代码(动态) //echarts图var chrNumber =[];var chrnum=[];for (var i=0;i<data.chrNum.length;i++){//通过 ...
Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
Echarts百分比饼状图
百分比饼状图两个关键点 1.设置最大值 const maxVal = 100 2.data里两份数据 data: [{value: val, // 原始数据不做展示},{value: maxVal - ...
ECharts之饼状图
效果图背景图片下载ECharts npm install echarts --save 引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ...
Echarts中饼状图的使用
先上效果图: 1.首先去官网下载echarts.min.js,并引入项目 2.为 ECharts 准备一个具备大小(宽高)的容器 3.js构造饼图,js代码如下: var myChart = ech ...
echarts设置饼状图的标示线以及标示文字样式
<div id="main" style="width:33.6979vw;height: 50.8333vh"></div> moun ...

Echarts-百家姓-饼状图

Echarts-百家姓-饼状图相关推荐

最新文章

热门文章