echarts最简单的南丁格尔玫瑰图+图例

//图标写在方法里面（然后在mounted里展示）
getEcharts(){
var myChart = document.getElementById(‘echarts’);
let echarts = echarts.init(myChart);
var option;
var legends = this.getlowIncomeData_xData; //图例名字（在这里作修改）
// var colors = [‘#138FEF’, ‘#FE79EA’, ‘#27EFA0’, ‘#EEEE80’, ‘#611EA8’]; //可以在这里写全部颜色，也可以在series下面具体到每条数据里写颜色，方法很多种
var data = this.getlowIncomeData //饼图数据（在这里作修改）
option = {
title: {
text: this.getlowIncomeDataNumber_name,//饼图的标题
top: ‘4%’, //标题上边距
left: 10, //标题左边距
textStyle: {
color: ‘#23F0FD’, //标题颜色
fontSize: 24,// 标题字体大小
}
},
// color: colors,
legend: { //图例的属性
orient: ‘vertical’, //图例垂直显示，默认为水平布局“horizontal”
top: “center”, //图例顶部居中
right: “5%”, //图例靠右边距离
itemGap: 50, //每个图例之间的间距
itemWidth: 21, //每个图例的宽度
itemHeight: 16, //每个图例的高度
textStyle: {
color: “#fff”, //图例文字的颜色
fontSize: 22 //图例字体的大小
},
data: legends, //图例显示的名字list数据
},
tooltip: {
trigger: ‘item’, //提示框
formatter: ‘{b} ({d}%)’, //提示框显示顺序
},
series: [{
name: ‘’,
type: ‘pie’, //图标类型是饼图
minAngle: 15, //最小的扇区角度，用于防止某个值过小导致扇区太小影响交互
radius: [‘10%’, ‘60%’], //图标的半径大小
center: [‘44%’, ‘50%’], //图标居中显示的大小
roseType: ‘radius’, //区域突出显示
label: {
show: true, //标签显示
normal: {
position: ‘outside’, //标签向外显示，可选inside（向内）
textStyle: {
// color: ‘#fff’, // 改变标示文字的颜色
fontSize: 22,
},
formatter: (params) => {
return params.name + params.value + ‘人’;
}
}
},
// data: data
data: [{
name: data[0].name,
value: data[0].value,
label: {
color: ‘#138FEF’, //标签字体颜色
},
itemStyle: {
normal: {
color: " #138FEF" //标签区域颜色
}
}
}, {
name: data[1].name,
value: data[1].value,
label: {
color: ‘#FE79EA’
},
itemStyle: {
normal: {
color: " #FE79EA"
}
}
}, {
name: data[2].name,
value: data[2].value,
label: {
color: ‘#27EFA0’
},
itemStyle: {
normal: {
color: " #27EFA0"
}
}
}, {
name: data[3].name,
value: data[3].value,
label: {
color: ‘#EEEE80’
},
itemStyle: {
normal: {
color: " #EEEE80"
}
}
}, {
name: data[4].name,
value: data[4].value,
label: {
color: ‘#611EA8’
},
itemStyle: {
normal: {
color: " #611EA8"
}
}
}]
}]
}
option && echarts.setOption(option)
}

echarts最简单的南丁格尔玫瑰图+图例相关推荐

关于Echarts南丁格尔玫瑰图的部分解释
<template><div id="easyEcharts" style="height: 600px;width: 800px">& ...
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置 1.认识使用可以参考之前文章,会使用直接跳过1 引入官网的南丁格尔玫瑰图效果如下: 使用函数配置分为三个部分:初始化=> 设置 ...
echarts绘制嵌套环形图(南丁格尔玫瑰图)
根据专业总人数和学院总人数绘制嵌套环形图首先,echarts的基本步骤引入js,准备容器,初始化实例, <script src="lib/echarts.min.js"& ...
echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
staruml顺序图生成协作图_一个工具箱之南丁格尔玫瑰图生成器
南丁格尔玫瑰图是一种圆形的直方图,由弗罗伦斯·南丁格尔所发明,又名为极区图.出于对资料统计的结果会不受人重视的忧虑,她发展出一种色彩缤纷的图表形式,让数据能够更加让人印象深刻. 南丁格尔玫瑰图将柱图转 ...
R语言-南丁格尔玫瑰图
简介南丁格尔玫瑰图(Nightingale rose chart)即极坐标柱形图,是一种圆形的柱形图.由弗罗伦斯-南丁格尔所发明,普通柱形图的坐标系是直角坐标系,而南丁格尔玫瑰图的坐标系是极坐标系. ...
【Python数据分析——使用matplotlib制作南丁格尔玫瑰图】
目录一.介绍二.相关库三.数据准备四.pyecahrts代码实现五.matplotlib代码实现一.介绍玫瑰图是弗罗伦斯·南丁格尔所发明的.又名为极坐标面积图,是一种圆形的直方图. 南丁 ...
python+matplotlib绘制南丁格尔玫瑰图
实验:绘制南丁格尔玫瑰图本实验有一定难度,有人说matplotlib绘图和matlab大同小异,我看除了一些函数名相同之外,其他的像参数和使用方法很不一样.另外我不知道是不是在matlab中画玫 ...
教你做超惊艳的南丁格尔玫瑰图
其实早在今年初,疫情还很严重的时候,人民日报发布的这个图就吸引了广大数据分析者的注意. 今天我们就把这个图的前因后果以及怎么做一次性讲清楚. 玫瑰图的前世今生这个图学名:南丁格尔玫瑰图,是弗罗伦斯· ...
一个与战争、瘟疫、感染、死亡率有关的图形——南丁格尔玫瑰图
众所周知,世界上第一个护士便是弗洛伦斯·南丁格尔,她是护理事业的创始人和现代护理教育的奠基人.但也许大家不知道,她也是个伟大的统计学家. 19世纪50年代,在克里米亚战争中,南丁格尔主动申请,自愿担任 ...

echarts最简单的南丁格尔玫瑰图+图例

echarts最简单的南丁格尔玫瑰图+图例相关推荐

最新文章

热门文章