web数据可视化(Echarts版)2-15嵌套饼图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:44:01 修改

阅读量432

点赞数 1

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-17 23:03:24 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63471474/article/details/130736893

版权

HTML 专栏收录该内容

40 篇文章

订阅专栏

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    var myChart = echarts.init(document.getElementById("main"));
    //指定图表的配置项和数据
    var option = {
       title: {  //配置标题组件
           backgroundColor: 'yellow',  //设置主标题的背景颜色
           text: '某大学三大院的专业分布',  //设置主标题的文字
           textStyle: {  //设置主标题文字样式
               color: 'green',  //设置主标题文字的颜色
               fontFamily: '黑体',  //设置主标题文字的字体
               fontSize: 28,  //设置主标题文字的大小
           },
           x: 'center'   //设置主标题左右居中
       },
       tooltip: {  //配置提示框组件
           trigger: 'item',   //设置提示框的触发方式
           formatter:"{a} <br/>{b} : {c} ({d}%)"
       },
       legend:{  //配置图例组件
               orient:'vertical',  //设置图例垂直方向
               x: 32,   //设置图例的水平方向
               y: 74,   //设置图例的垂直方向
               data:['1-软件技术','1-移动应用开发','2-大数据技术与应用','2-移动互联网技术','2-云计算技术应用','3-投资与理财','3-财务管理']
           },
           toolbox:{    //配置工具箱组件
               show:true,   //设置工具箱是否显示
               x:555,  //设置工具箱的水平位置
               y:74,   //设置工具箱的垂直位置
               feature:{
                   mark:{show:true},
                   dataView:{show:true,readOnly:false},
                   magicType:{
                       show:true,
                       type:['pie','funnel']
                   },
                   restore:{show:true},
                   saveAsImage:{show:true}
               }
           },
           series:[
               {
                   name:'学院名称',
                   type:'pie',
                   selectedMode:'single',
                   radius:['10%','30%'],
                   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%'],
                   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>