饼图的属性和南丁格尔双图并列显示

刚开始学习echart遇到了许多麻烦，饼图怎么在一个box中并列显示
初学，总是认知不全，很多都不知道怎么回事，知识拿着自己的经验乱布局，我是把box又分了两份，可怜的饼图在二分之一的地方还要居中对齐（这都是前期不会不懂，给自己找麻烦）

希望我遇到的问题解决的办法能帮到你，助你我成长

这篇是对饼图讲解，我每篇ehcart的文章都会有注释，养成习惯真的很重要！！！
我没一篇饼图的文章代码中注释都很少会有重复，中间包括了很多属性的注释，留心的会有新发现

 <!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

给一个有宽高的容器很重要，应为它有用

  <!-- 给一个有宽高的容器 --><div id="app" style="width:1000px;height:400px;margin:300px auto;"></div>

<script type="text/javascript">var myApp = echarts.init(document.getElementById('app'));option = {title: {text: '南丁格尔玫瑰图',subtext: '纯属虚构',left: 'center'},tooltip: {//提示框trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {//图例组件样式设置left: 'center',top: 'bottom',orient:'vertical',align:'auto',// padding:[5,10],itemGap:20,//图例之间间隔itemWidth:20,//图例宽度itemHeight:20,//是否在缩放时保持该图形的长宽比。symbolKeepAspect:false,data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'],//图例的数据数组selected:{//选中的图例'rose4':true,'rose1':false,'rose2':false,'rose3':false,'rose5':false,'rose6':false,'rose7':false,'rose8':false,},textStyle:{//公共选中图例中文字样式color:'#0f0',// italic斜体   normal 正常   oblique倾斜fontStyle:'oblique',fontWeight:'lighter',//lighter400 bolder300 bold200 normal100// fontSize:22 ,//字体大小// lineHeight:80 ,//行高可以改变排列// bakcgroundColor:'red',// borderWidth:200,//文字边框线},// borderRadius:[5,5,5,5],// borderWidth:20, //边框线},toolbox: {// 是否显示工具栏组件feature: {// mark: {show: false},dataView: {show: true, readOnly: false}, //g工具视图  是否显示   是否不可编辑   magicType: {//动态类型切换show: true,type: ['pie', 'funnel']},restore: {show: true},//配置项还原。saveAsImage: {show: true}//保存为图片}},series: [{name: '半径模式',type: 'pie',radius: [20, 110],center: ['25%', '50%'],roseType: 'radius',label: {show: false},emphasis: {label: {show: true}},data: [//系列中的数据内容数组{value: 10, name: 'rose1'},{value: 5, name: 'rose2'},{value: 15, name: 'rose3'},{value: 25, name: 'rose4'},{value: 20, name: 'rose5'},{value: 35, name: 'rose6'},{value: 30, name: 'rose7'},{value: 40, name: 'rose8'}]},{label: {show: false},name: '面积模式',type: 'pie',radius: [30, 110],center: ['75%', '50%'],roseType: 'area',data: [{value: 10, name: 'rose1'},{value: 5, name: 'rose2'},{value: 15, name: 'rose3'},{value: 25, name: 'rose4'},{value: 20, name: 'rose5'},{value: 35, name: 'rose6'},{value: 30, name: 'rose7'},{value: 40, name: 'rose8'}]},{name:'外边距',type:'pie',clockWise:true,//顺时加载   加载页面时外圈的加载方向   false逆时针hoverAnimation:false,// true鼠标移入变大   不变 falsecenter:['25%','50%'],radius:['80%','80%'],label:{normal:{show:false//好像是引线}},data:[{value:1,name:'111',itemStyle:{//单个拐点标志的样式设置normal:{borderWidth:2,borderColor: '#61bad3'}}}]}]
};myApp.setOption(option);

希望对初学者有帮助

饼图的属性和南丁格尔双图并列显示相关推荐

echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
利用Python实现新冠疫情数据可视化（获取疫情历史数据，制作南丁格尔玫瑰图、疫情地图、动态疫情组合图、词云）
文章目录前言 1.获取疫情历史数据 2.制作南丁格尔玫瑰图 2.1 全球各国确诊人数玫瑰图 2.2 全国各省市零新增天数玫瑰图 3.制作疫情地图 3.1全国各省市目前确诊总人数疫情地图 3.2全球各 ...
tableau实战系列（三十九）-教你如何优雅的做图表展示-南丁格尔玫瑰图
前言饼图是常用的分析图表之一,但当分析的数据类别过多时,饼图就会因为分区密集,大大降低其可视化效果(如下图). 遇到这种情况,可以考虑使用南丁格尔玫瑰图.事实上,它的可视化呈现很不错. 如果觉得玫瑰 ...
26.27.28.29.极区图（南丁格尔玫瑰图）、维恩图（Venn diagram）、面状图（Area chart）、树地图
26.极区图(南丁格尔玫瑰图) 27.维恩图 (Venn diagram) 28.面状图(Area chart) 29.树地图 26.极区图(南丁格尔玫瑰图) 极区图(又名南丁格尔玫瑰图)呈放射延伸状 ...
Python数据可视化之南丁格尔玫瑰图(亲测)
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
staruml顺序图生成协作图_一个工具箱之南丁格尔玫瑰图生成器
南丁格尔玫瑰图是一种圆形的直方图,由弗罗伦斯·南丁格尔所发明,又名为极区图.出于对资料统计的结果会不受人重视的忧虑,她发展出一种色彩缤纷的图表形式,让数据能够更加让人印象深刻. 南丁格尔玫瑰图将柱图转 ...
Python数据可视化之南丁格尔玫瑰图
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
【Python数据分析——使用matplotlib制作南丁格尔玫瑰图】
目录一.介绍二.相关库三.数据准备四.pyecahrts代码实现五.matplotlib代码实现一.介绍玫瑰图是弗罗伦斯·南丁格尔所发明的.又名为极坐标面积图,是一种圆形的直方图. 南丁 ...
python+matplotlib绘制南丁格尔玫瑰图
实验:绘制南丁格尔玫瑰图本实验有一定难度,有人说matplotlib绘图和matlab大同小异,我看除了一些函数名相同之外,其他的像参数和使用方法很不一样.另外我不知道是不是在matlab中画玫 ...
【Python绘图】pyecharts绘制南丁格尔玫瑰图
from pyecharts.charts import Pie from pyecharts import options as opts import random# 随机颜色生成 def ran ...

饼图的属性和南丁格尔双图并列显示

饼图的属性和南丁格尔双图并列显示相关推荐

最新文章

热门文章