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

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

首先，echarts的基本步骤

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

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

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

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

tooltip: {  //配置提示框组件
    trigger: 'item',  //设置提示框的触发方式
    formatter: "{a} 
{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-财务管理' }
    ]
},

完整代码如下：