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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值