echarts的示例二:饼图(南丁格尔图)
简介: 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,与柱状图和折线图不同,不需要 xAxis,yAxis。
(一)
效果图一:饼图
效果图二:南丁格尔图
效果图三:带阴影的南丁格尔图
(二)代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts-柱状图</title><!-- 第一步:引入 echarts.js --><!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> --><script src="package/dist/echarts.js"></script> <!-- 备注:不同版本的echarts.js会导致生成的图形有所改变 -->
</head>
<body><!-- 第二步:为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 第三步:基于准备好的dom,初始化echarts实例,这里需要绑定div的idvar myChart = echarts.init(document.getElementById('main'));// 第四步:指定图表的配置项和数据,也可以合并四五为一步,直接写成myChart.setOption({...})形式var option = {title: { // 为图表配置标题text: '王者荣耀段位'},legend: { // 图例组件展现了不同系列的标记(symbol),颜色和文字,可以通过点击图例控制系列显示与否data:['人数'] //这里data的内容要与series中的name对应},xAxis: { // 配置要在x轴上显示的项data: ["王者","星耀","钻石","铂金","黄金","白银",'青铜','废铁'],axisLine: { // 坐标轴线show: true, // 默认显示,属性show控制显示与否lineStyle: { // 属性lineStyle控制线条样式color: '#ccc',width: 1,type: 'solid',},symbol:['none', 'arrow'],//轴线两边的箭头symbolSize:[8, 12]},},yAxis: { // 配置要在y轴上显示的项}, series : [{name: '人数', // 系列名称type: 'pie', // 设置图表类型为饼图radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。roseType: 'angle', // 用于将饼图显示承南丁格尔图data:[ // 数据数组,name 为数据项名称,value 为数据项值{value:235, name:'王者'},{value:274, name:'星耀'},{value:310, name:'钻石'},{value:335, name:'铂金'},{value:400, name:'黄金'},{value:400, name:'白银'},{value:400, name:'青铜'},{value:400, name:'废铁'},],itemStyle: { // itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等:normal: {shadowBlur: 200, // 阴影的大小shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影的颜色shadowOffsetX: 0, // 阴影水平方向上的偏移shadowOffsetY: 0, // 阴影垂直方向上的偏移}}}]};// 第五步:使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
echarts的示例二:饼图(南丁格尔图)相关推荐
- Echarts南丁格尔图.
项目场景: 通过Echarts修改南丁格尔图js文件,修改轮盘颜色.使项目更加美观 文本标签自定义 问题描述 不知道为什么自定义函数使饼图图形上的文本标签label标签显示在内部且,获得对应标签的数据 ...
- python_绘制玫瑰图_南丁格尔图
python_绘制玫瑰图_南丁格尔图 通过加载execel文件绘制 通过直接造数看这: https://blog.csdn.net/kaikai_sk/article/details/10495430 ...
- 从南丁格尔图到医学发展史
可视化中,前端用于表现不同类目的数据在总和中的占比的场景,往往会采用饼图. 针对数据大小相近,南丁格尔图的呈现会更加美观. 南丁格尔图,又称玫瑰图,是由弗罗伦斯·南丁格尔发明. 弗洛伦斯·南丁格尔 开 ...
- Echarts --- 可视化练习(pie01 --- 南丁格尔玫瑰图)
Echarts - 可视化练习(pie01) 不乱于心,不困于情,吾随波逐流,困囿于万世红尘深海中,一路奔波,一路烟花交错.只见一只飞蛾孤身万灯丛中迷失了身影,臃肿身躯拖累了幼稚的翅膀,苦命挣扎失落茫 ...
- echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
文末附带github本文所有源代码,以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图 先来看看效果啦 重要代码如下所示,必须引入e ...
- 【Python数据分析——使用matplotlib制作南丁格尔玫瑰图】
目录 一.介绍 二.相关库 三.数据准备 四.pyecahrts代码实现 五.matplotlib代码实现 一.介绍 玫瑰图是弗罗伦斯·南丁格尔所发明的.又名为极坐标面积图,是一种圆形的直方图. 南丁 ...
- Python数据可视化之南丁格尔玫瑰图(亲测)
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图 央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
- Python数据可视化之南丁格尔玫瑰图
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图 央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
- 教你做超惊艳的南丁格尔玫瑰图
其实早在今年初,疫情还很严重的时候,人民日报发布的这个图就吸引了广大数据分析者的注意. 今天我们就把这个图的前因后果以及怎么做一次性讲清楚. 玫瑰图的前世今生 这个图学名:南丁格尔玫瑰图,是弗罗伦斯· ...
- echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式(普通设置颜色和渐变色设置)
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
最新文章
- C++类模版------STL的原理
- idea编译工程时出现Error:java: 无效的目标发行版: 1.8
- java 字符串构造函数,java构造函数示例(构造方法)
- 嵌入式基础之----C++
- 2021高考成绩查询大连,2021年大连高考各高中成绩及本科升学率数据排名及分析...
- OCP之5 管理数据库存储结构
- 利用python绘制雪景图_python绘制雪景图
- Laravel5.1 目录结构解析
- excel两列相同匹配第三列_Vlookup函数解决Excel大量数据匹配问题
- mysql数据库名长可为64字符,MySQL学习笔记1_MySQL
- 用Nginx作反向代理简单多了
- 诺顿企业版10.0 简体中文版
- 去掉iview中模态框中的确定取消按钮
- matlab如何提取文本词干,英文词干提取(stemming)算法 - Lovins, Porter
- php 人物换装原理,装备库解析——换装机制,宝石选择原理
- Linux 打开 Xbrowser 可视化操作界面
- 微信扫描二维码无法下载文件的解决办法
- 华硕x580nv拆机_华硕x550v怎么拆机 华硕x550v拆机教程【图文步骤】
- CF1765M Minimum LCM
- TP5 未定义变量:XXX