echarts的饼状图、圆环图、南丁格尔图、散点图、数据转换、

一、饼状图

        饼状图不需要配置坐标轴,而是把数据名称和值都写在系列中,并且value值不需要是百分比数据,echarts会根据所有数据的value,按比例分配他们在饼图中对应的弧度

饼图的半径:

        饼图的半径可以通过 series.radius 设置,可以是诸如 '60%' 这样相对的百分比字符串,或是 200 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/langZH.js"></script>

</head>

<body>
    <div id="main"></div>
    <script>
        //饼状图不需要配置坐标轴,而是把数据名称和值都写在系列中,并且value值
        // 不需要是百分比数据,echarts会根据所有数据的value,按比例分配他们在饼图
        // 中对应的弧度
        var main = document.getElementById("main")
        var myEcharts = echarts.init(main, null, {
            width: 800,
            height: 600
        })
        var option = {
            series: [{
                type: 'pie',
                data: [{
                    value: 335,
                    name: '直接访问'
                }, {
                    value: 234,
                    name: '联盟广告'
                }, {
                    value: 1548,
                    name: '搜索引擎'
                }],
                // radius:如果值是百分比的话,它是以width和height中值较小的为参照物
                radius: '50%'
                    //当radius的值是一个数组时,第一个元素表示的时内圆的半径,第二个元素指
                    // 的是外圆的半径
                    // radius: [50,100]
            }]
        }
        myEcharts.setOption(option)
    </script>
</body>

</html>

 

二、圆环图 

        在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。

从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。

<!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.min.js"></script>
    <!-- 汉化包 -->
    <script src="js/langZH.js"></script>

</head>

<body>
    <div id="main"></div>
    <script>
        var main = document.getElementById("main")
        var myEcharts = echarts.init(main, null, {
            width: 800,
            height: 600
        })
        var option = {
            title: {
                text: '标题',
                left: "center",
                top: 'center'
            },
            series: [{
                type: 'pie',
                label: {
                    show: false
                },
                // 高亮时设置的样式
                emphasis: {
                    label: {
                        show: true,
                        color: 'red'
                    },
                    labelLine: {}
                },
                data: [{
                    value: 335,
                    name: '直接访问'
                }, {
                    value: 234,
                    name: '联盟广告'
                }, {
                    value: 1548,
                    name: '搜索引擎'
                }],
                radius: ['40%', '80%']
            }]
        }
        myEcharts.setOption(option)
    </script>
</body>

</html>

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts饼状图是一种常见的表类型,可以用来展示数据的占比关系。在ECharts中,可以通过设置series中的type为'pie'来创建饼状图饼状图数据可以通过设置series中的data属性来指定,每个数据项包括value和name两个属性,分别表示数据的值和名称。例如,可以使用以下代码创建一个简单的饼状图: ```javascript var option = { series: \[{ type: 'pie', data: \[ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 548, name: '搜索引擎' } \] }\] }; ``` 除了基本的饼状图ECharts还支持南丁格尔的展示方式。南丁格尔是一种特殊的饼状图,可以通过将series中的roseType值设为'area'来实现。南丁格尔的每个扇区的面积大小表示数据的大小,而不仅仅是角度的大小。例如,可以使用以下代码创建一个南丁格尔: ```javascript var option = { series: \[{ type: 'pie', data: \[ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 548, name: '搜索引擎' } \], roseType: 'area' }\] }; ``` 以上是创建饼状图南丁格尔的基本配置,你可以根据自己的需求进行进一步的配置和美化。 #### 引用[.reference_title] - *1* *2* *3* [echarts饼状图圆环南丁格尔散点图数据转换、](https://blog.csdn.net/m0_68618659/article/details/126472464)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值