echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）

本篇博文是记录一下我在开发过程中遇到的一个问题，那就是对于南丁格尔玫瑰图（或者饼图）如何根据百分比大小进行排列，可以很直观的看出数据高低。

首先给大家展示一下官方的样式，具体代码可以去官网上查看：https://www.echartsjs.com/examples/zh/editor.html?c=pie-roseType

其次再看一下我优化后的样式，本节主要讲解这个：

我是在前台页面处理的，后台数据根据自己的实际情况去取数据，我这里是根据服务调用的方式取到的数据，是一个json对象，是下面这种类型的：

其次是我的图例名称，由于不是从后台获取的，是在前台直接写好的，所以这里我声明了一个数组来接收这些数据，但为了不影响图例与数据的对应性，我做了如下操作：将数据的值与我后台拿到的json对象json_data的key值做了比较，如果一样的话，就将数据存到一个新的数组json_arr里，以[name：'图例的name',value : '对应的数据']的格式表示：

eg：[value : '100, name : '初中']。然后对这个数组json_arr进行排序，最后把数组json_arr拆分成两个数组，用来单独显示图例，(json_arr是用来替换标准的数据格式的)，最后分别把处理好的数据放到option中对应的位置中去就可以了，代码截图如下：

具体代码：

//文化程度
var selectNameInChart3 = "";
function initChart3(){$.ajax({type: 'post',url: conUrl+'/suite/data/df/homeService?id=DF00028',dataType: 'json',success: function(result) {var json_data = result.DATA.M000093[0];//json数据后台（从调用服务过来的）var json_arr = [];//声明一个数组用来接收处理过格式的数据var NameArr = ['小学及以下', '初中', '高中', '技工', '中专', '大专', '本科', '硕士', '博士', '其他'];for (var i = 0; i <= NameArr.length-1; i++) {for ( var key in json_data) {if(NameArr[i] == key){//NameArr[i] = key; 条件：把json对象的key值与数组的值相对应var name = NameArr[i];var value = json_data[key];json_arr.push({value: value,name: name});}}}json_arr.sort(compare);var name_list = [];var value_list = [];for (var i = 0; i <= json_arr.length-1; i++) {name_list.push(json_arr[i].name);value_list.push(json_arr[i].value);}chart3 = echarts.init(document.getElementById('chart3'));var option = {title: {text: '文化程度',x: 'center',y: 'center',textStyle: {fontSize: 26,fontWeight: 'bolder',color: '#ffffff'},},tooltip: {trigger: 'item',triggerOn: 'none',hideDelay: 0,formatter: '{a} <br/>{b}: {c} ({d}%)',position: 'inside',backgroundColor: 'rgba(18,79,130,.5)',borderColor: '#3788c4',borderWidth: 2,textStyle: {fontSize: 20,color: "#ffffff"}},legend: {orient: 'horizontal',left: 'center',top: 'bottom',itemWidth: 10,   // 设置图例图形的宽itemHeight: 10,  // 设置图例图形的高icon: "circle",textStyle: {color: '#ffffff',  // 图例文字颜色fontSize:12},data: name_list,//图例数据},//颜色设置第一种方法：//color:['#0bC3F5','#0376E9','#85E9B5','#FBF88D','#FEC34D','#FBBAA6','#9A54C8','#F87E7D','#7E9CD2','#6E83DE'],series: [{name: '文化程度分析',type: 'pie',clockWise : false,startAngle: 90,radius: ['40%', '70%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小roseType: 'radius',selectedMode: 'single',label: {show: false},hoverAnimation: false,data: json_arr,//动态的数据，做了排序等处理//颜色设置第二种方式，设置渐变色（推荐使用）itemStyle: {color: function(params) {var colorList = [{c1: '#0bC3F5', c2: '#0aB3F4',c3: '#0993EC'},{c1: '#0376E9', c2: '#037BEB',c3: '#0481ED'},{c1: '#85E9B5', c2: '#64CF99',c3: '#7BE3AE'},{c1: '#FBF88D', c2: '#F0EF83',c3: '#E4E476'},{c1: '#FEC34D', c2: '#FEC957',c3: '#FDCD5F'},{c1: '#FBBAA6', c2: '#FEA289',c3: '#FE764E'},{c1: '#6E83DE', c2: '#546BD1',c3: '#3B54C8'}]return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上offset: 0,color: colorList[params.dataIndex].c1}, {offset: 0.5,color: colorList[params.dataIndex].c2},{offset: 1,color: colorList[params.dataIndex].c3}])}}}]};chart3.setOption(option,true);chart3.on('pieselectchanged', function (params) {if(selectNameInChart3!=params.name){selectNameInChart3 = params.name;chart3.dispatchAction({type: 'showTip',seriesIndex: 0,name: selectNameInChart3});}else{selectNameInChart3 = "";chart3.dispatchAction({type: 'hideTip'});}});}})
}

最后给大家看一下浏览器上控制台输出的json_arr数据格式，也是最终我们需要的数据格式：

echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）相关推荐

Echarts --- 可视化练习（pie01 --- 南丁格尔玫瑰图）
Echarts - 可视化练习(pie01) 不乱于心,不困于情,吾随波逐流,困囿于万世红尘深海中,一路奔波,一路烟花交错.只见一只飞蛾孤身万灯丛中迷失了身影,臃肿身躯拖累了幼稚的翅膀,苦命挣扎失落茫 ...
python画玫瑰图_央视都在用的“南丁格尔玫瑰图”，原来Python也可以画
前一阵子,我看到央视新闻中,有一张比较好看数据图,如下: 后来才知道这叫"南丁格尔玫瑰图",是南丁格尔护士在克里米亚战争期间提交的一份关于士兵死伤报告时发明的一种图表. 我心想能不 ...
staruml顺序图生成协作图_一个工具箱之南丁格尔玫瑰图生成器
南丁格尔玫瑰图是一种圆形的直方图,由弗罗伦斯·南丁格尔所发明,又名为极区图.出于对资料统计的结果会不受人重视的忧虑,她发展出一种色彩缤纷的图表形式,让数据能够更加让人印象深刻. 南丁格尔玫瑰图将柱图转 ...
利用Python实现新冠疫情数据可视化（获取疫情历史数据，制作南丁格尔玫瑰图、疫情地图、动态疫情组合图、词云）
文章目录前言 1.获取疫情历史数据 2.制作南丁格尔玫瑰图 2.1 全球各国确诊人数玫瑰图 2.2 全国各省市零新增天数玫瑰图 3.制作疫情地图 3.1全国各省市目前确诊总人数疫情地图 3.2全球各 ...
关于Echarts南丁格尔玫瑰图的部分解释
<template><div id="easyEcharts" style="height: 600px;width: 800px">& ...
echarts绘制嵌套环形图(南丁格尔玫瑰图)
根据专业总人数和学院总人数绘制嵌套环形图首先,echarts的基本步骤引入js,准备容器,初始化实例, <script src="lib/echarts.min.js"& ...
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置 1.认识使用可以参考之前文章,会使用直接跳过1 引入官网的南丁格尔玫瑰图效果如下: 使用函数配置分为三个部分:初始化=> 设置 ...
【Python数据分析——使用matplotlib制作南丁格尔玫瑰图】
目录一.介绍二.相关库三.数据准备四.pyecahrts代码实现五.matplotlib代码实现一.介绍玫瑰图是弗罗伦斯·南丁格尔所发明的.又名为极坐标面积图,是一种圆形的直方图. 南丁 ...
26.27.28.29.极区图（南丁格尔玫瑰图）、维恩图（Venn diagram）、面状图（Area chart）、树地图
26.极区图(南丁格尔玫瑰图) 27.维恩图 (Venn diagram) 28.面状图(Area chart) 29.树地图 26.极区图(南丁格尔玫瑰图) 极区图(又名南丁格尔玫瑰图)呈放射延伸状 ...

echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）

echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）相关推荐

最新文章

热门文章