echarts绘制嵌套环形图(南丁格尔玫瑰图)

根据专业总人数和学院总人数绘制嵌套环形图

首先，echarts的基本步骤

引入js，准备容器，初始化实例，

<script src="lib/echarts.min.js"></script>

<style>.box{width: 900px;height: 500px;background-color:#BBFFFF;}
</style>

<div class="box"></div>

var myChart = echarts.init(document.querySelector('.box'));

接下来开始最重要的配置项

title: {text: '某大学三大学院专业分布',x: 'center',  //设置主标题全部居中backgroundColor: 'blue',textStyle: {fontSize: 18,fontFamily: "黑体",color: "pink"},
},

tooltip: {  //配置提示框组件trigger: 'item',  //设置提示框的触发方式formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移入显示文字
},

 legend: {  //配置图例组件//纵向orient: 'vertical',x: 'left',y: 'top',data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术','2-云计算技术与应用', '3-投资与理财', '3-财务管理']},

下面是通过series配置系列列表，这里用的类型是饼图·pie

{name: '专业名称',type: 'pie',selectedMode: 'single', //是否选中radius: ['10%', '30%'], //设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小center: ['50%', 250], //设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位label: { //设置标签位置，默认在饼状图外position: 'inner'},labelLine: { //指示线不显示show: false},data: [{ value: 1200, name: '计算机学院' },{ value: 900, name: '大数据学院' },{ value: 600, name: '财金学院', selected: true }  //初始时为选中状态]
},

{ //设置第二个数据系列格式name: '专业名称',type: 'pie',selectedMode: 'single', //是否选中radius: ['40%', '55%'], //设置半径center: ['50%', 250],  //设置圆心roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式data: [{ value: 800, name: '1-软件技术' },{ value: 400, name: '1-移动应用开发' },{ value: 500, name: '2-大数据技术与应用' },{ value: 200, name: '2-移动互联应用技术' },{ value: 200, name: '2-云计算技术与应用' },{ value: 400, name: '3-投资与理财' },{ value: 200, name: '3-财务管理' }]
},

完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>嵌套环形图</title><!-- 引入 echarts.js --><script src="lib/echarts.min.js"></script><style>.box{width: 900px;height: 500px;background-color:#BBFFFF;}</style></head><body><div class="box"></div><script type="text/javascript">var myChart = echarts.init(document.querySelector('.box'));//指定图表的配置项和数据var option = {title: {text: '某大学三大学院专业分布',x: 'center',  //设置主标题全部居中backgroundColor: 'blue',textStyle: {fontSize: 18,fontFamily: "黑体",color: "pink"},},tooltip: {  //配置提示框组件trigger: 'item',  //设置提示框的触发方式formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {  //配置图例组件//纵向orient: 'vertical',x: 'left',y: 'top',data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术','2-云计算技术与应用', '3-投资与理财', '3-财务管理']},calculable: false,series: [{name: '专业名称',type: 'pie',selectedMode: 'single',radius: ['10%', '30%'], //设置半径center: ['50%', 250],label: {position: 'inner'},labelLine: {show: false},data: [{ value: 1200, name: '计算机学院' },{ value: 900, name: '大数据学院' },{ value: 600, name: '财金学院', selected: true }  //初始时为选中状态]},{name: '专业名称',type: 'pie',selectedMode: 'single',radius: ['40%', '55%'],center: ['50%', 250],  //设置圆心roseType: 'area',data: [{ value: 800, name: '1-软件技术' },{ value: 400, name: '1-移动应用开发' },{ value: 500, name: '2-大数据技术与应用' },{ value: 200, name: '2-移动互联应用技术' },{ value: 200, name: '2-云计算技术与应用' },{ value: 400, name: '3-投资与理财' },{ value: 200, name: '3-财务管理' }]},]};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script></body>
</html>

echarts绘制嵌套环形图(南丁格尔玫瑰图)相关推荐

echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
Echarts --- 可视化练习（pie01 --- 南丁格尔玫瑰图）
Echarts - 可视化练习(pie01) 不乱于心,不困于情,吾随波逐流,困囿于万世红尘深海中,一路奔波,一路烟花交错.只见一只飞蛾孤身万灯丛中迷失了身影,臃肿身躯拖累了幼稚的翅膀,苦命挣扎失落茫 ...
雷达图+南丁格尔玫瑰图
具体实现的效果图: 使用的图表插件是echarts,具体的完整代码如下: import * as echarts from 'echarts';var chartDom = document.getE ...
Python数据可视化之南丁格尔玫瑰图(亲测)
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
Python数据可视化之南丁格尔玫瑰图
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
R语言-南丁格尔玫瑰图
简介南丁格尔玫瑰图(Nightingale rose chart)即极坐标柱形图,是一种圆形的柱形图.由弗罗伦斯-南丁格尔所发明,普通柱形图的坐标系是直角坐标系,而南丁格尔玫瑰图的坐标系是极坐标系. ...
python+matplotlib绘制南丁格尔玫瑰图
实验:绘制南丁格尔玫瑰图本实验有一定难度,有人说matplotlib绘图和matlab大同小异,我看除了一些函数名相同之外,其他的像参数和使用方法很不一样.另外我不知道是不是在matlab中画玫 ...
关于Echarts南丁格尔玫瑰图的部分解释
<template><div id="easyEcharts" style="height: 600px;width: 800px">& ...
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置 1.认识使用可以参考之前文章,会使用直接跳过1 引入官网的南丁格尔玫瑰图效果如下: 使用函数配置分为三个部分:初始化=> 设置 ...

echarts绘制嵌套环形图(南丁格尔玫瑰图)

echarts绘制嵌套环形图(南丁格尔玫瑰图)相关推荐

最新文章

热门文章