大数据可视化-echarts玫瑰图（HBuilderX）_hbuilderx玫瑰花表白代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_64272885/article/details/129900036

效果图：

具体代码：


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts文件-->
  <script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '二级学院分布-南丁格尔玫瑰图',
                x: 'center',  //设置主标题全部居中
                backgroundColor: '#B5A642',  //设置主标题的背景颜色为黄铜色
                textStyle: {  //设置主标题
                    fontSize: 18,  //设置主标题的字号大小
                    fontFamily: "黑体",  //设置主标题的字体
                    color: "#9932CD"  //设置主标题的颜色为深兰花色
                },
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',  //设置提示框的触发方式
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                x: 'center',
                y: 'bottom',
                data: ['计算机', '大数据', '外国语', '机器人', '建工', '机电', '艺术', '财经']
            },
            toolbox: {  //配置工具箱组件
                show: true,
                x: 600,  //设置工具箱的水平位置
                y: 18,  //设置工具箱的垂直位置
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [  //配置数据系列及格式组件
                {  //设置第1个数据系列及格式设置
                    name: '学生人数(半径模式)',
                    type: 'pie',  //南丁格尔玫瑰图属于饼图中的一种
                    radius: ['10%', '50%'],  //设置半径
                    center: ['50%', 180],  //设置圆心
                    roseType: 'radius',  //设置南丁格尔玫瑰图参数：半径模式
                    width: '50%',  // for funnel 漏斗图
                    max: 40,  // for funnel 漏斗图
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        }
                    },
                    data: [
                        { value: 2000, name: '计算机' },
                        { value: 1500, name: '大数据' },
                        { value: 1200, name: '外国语' },
                        { value: 1100, name: '机器人' },
                        { value: 1000, name: '建工' },
                        { value: 900, name: '机电' },
                        { value: 800, name: '艺术' },
                        { value: 700, name: '财经' }
                    ]
                },
                {   //设置第2个数据系列及格式
                    name: '学生人数(面积模式)',
                    type: 'pie',  //南丁格尔玫瑰图属于饼图中的一种
                    radius: ['10%', '50%'],  //设置半径
                    center: ['50%', 180],  //设置圆心
                    roseType: 'area',  //设置南丁格尔玫瑰图参数:面积模式
                    x: '50%',  // for funnel 漏斗图
                    max: 40,  // for funnel 漏斗图
                    sort: 'ascending',  // for funnel 漏斗图
                    data: [
                        { value: 2000, name: '计算机' },
                        { value: 1500, name: '大数据' },
                        { value: 1200, name: '外国语' },
                        { value: 1100, name: '机器人' },
                        { value: 1000, name: '建工' },
                        { value: 900, name: '机电' },
                        { value: 800, name: '艺术' },
                        { value: 700, name: '财经' }
                    ]
                },
                {   //设置第3个数据系列及格式
                    name: '教授人数(面积模式)',
                    type: 'pie',  //南丁格尔玫瑰图属于饼图中的一种
                    radius: ['10%', '50%'],  //设置半径
                    center: ['50%', 420],  //设置圆心
                    roseType: 'area',  //设置南丁格尔玫瑰图参数:面积模式
                    x: '50%',  // for funnel 漏斗图
                    max: 40,  // for funnel 漏斗图
                    sort: 'ascending',  // for funnel 漏斗图
                    data: [
                        { value: 25, name: '计算机' },
                        { value: 15, name: '大数据' },
                        { value: 12, name: '外国语' },
                        { value: 10, name: '机器人' },
                        { value: 8, name: '建工' },
                        { value: 7, name: '机电' },
                        { value: 6, name: '艺术' },
                        { value: 4, name: '财经' }
                    ]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

想要使用该图表,只需要复制以上代码

引入 ECharts 文件可以用上面代码中的方法

<script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>

也可以下载 echarts.js 在页面文件中引入即可.

echarts.js 下载链接: http://echarts.baidu.com/download.html