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

最新推荐文章于 2024-07-24 23:00:08 发布

忘川之鱼

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量2.9k

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_68618659/article/details/126472464

版权

一、饼状图

饼状图不需要配置坐标轴，而是把数据名称和值都写在系列中，并且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>

最低0.47元/天解锁文章

忘川之鱼

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
echarts的饼状图、圆环图、南丁格尔图、散点图、数据转换、

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

扫一扫