数据可视化工具 - ECharts饼形图的编写

最新推荐文章于 2023-11-14 11:14:37 发布

@Autowire

最新推荐文章于 2023-11-14 11:14:37 发布

阅读量779

点赞数

分类专栏：前端相关知识学习文章标签： echarts 信息可视化 javascript

本文链接：https://blog.csdn.net/zs18753479279/article/details/130599115

版权

前端相关知识学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

1 饼形图 1年龄分布模块制作

1.1 官网找到类似实例，适当分析，并且引入到HTML页面中

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<style>
</style>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
<script type="text/javascript">
    // 1. 实例化对象
    var myChart = echarts.init(document.getElementById("main"));
    // 2. 指定配置和数据
    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

1.2 根据需求定制图表

修改图例组件在底部并且居中显示
每个小图标的宽度和高度修改为 10px
文字大小为12 颜色 rgba(255,255,255,.5)

        legend: {
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: 10,
            itemHeight: 10,
            // 修改图例组件的文字为 12px
            textStyle: {
                color: "rgb(222,15,15)",
                fontSize: "12"
            }
        },

修改水平居中垂直居中
修改内圆半径和外圆半径为 [“40%”, “60%”] ，带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而我们饼形图是通过 radius 修改大小

        series: [
            {

                name: 'Access From',
                type: 'pie',
                avoidLabelOverlap: false,
                // 设置饼形图在容器中的位置
                center: ["50%", "50%"],
                //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
                radius: ["40%", "60%"],
                // 不显示标签文字
                label: {show: false},
                // 不显示连接线
                labelLine: {show: false},
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ]
            }
        ]

更换数据

                data: [
                    {value: 1, name: "0岁以下"},
                    {value: 4, name: "20-29岁"},
                    {value: 2, name: "30-39岁"},
                    {value: 2, name: "40-49岁"},
                    {value: 1, name: "50岁以上"}
                ]

更换颜色

在这里插入图片描述

2 饼形图2 地区分布模块制作（南丁格尔玫瑰图）

2.1 官网找到类似实例，适当分析，并且引入到HTML页面中

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<style>
</style>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
<script type="text/javascript">
    // 1. 实例化对象
    var myChart = echarts.init(document.getElementById("main"));
    // 2. 指定配置和数据
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: [
                'rose1',
                'rose2',
                'rose3',
                'rose4',
                'rose5',
                'rose6',
                'rose7',
                'rose8'
            ]
        },
        series: [
            {
                name: 'Area Mode',
                type: 'pie',
                radius: [20, 140],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    {value: 30, name: 'rose 1'},
                    {value: 28, name: 'rose 2'},
                    {value: 26, name: 'rose 3'},
                    {value: 24, name: 'rose 4'},
                    {value: 22, name: 'rose 5'},
                    {value: 20, name: 'rose 6'},
                    {value: 18, name: 'rose 7'},
                    {value: 16, name: 'rose 8'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

2.2 根据需求定制图表

颜色设置

color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

修改饼形图大小 ( series对象)

	radius: [20, 140],

把饼形图的显示模式改为半径模式

 roseType: "radius",

数据使用更换（series对象里面 data对象）

          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }

字体略小些 10 px ( series对象里面设置 ) 饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置:

    // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
    label: {
        fontSize: 20
    },

防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
连接图表 6 px
连接文字 8 px

 // 引导线调整
 labelLine: {
     // 连接扇形图线长
     length: 50,
     // 连接文字线长
     length2: 20
 },

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<style>
</style>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
<script type="text/javascript">
    // 1. 实例化对象
    var myChart = echarts.init(document.getElementById("main"));
    // 2. 指定配置和数据
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: [
                'rose1',
                'rose2',
                'rose3',
                'rose4',
                'rose5',
                'rose6',
                'rose7',
                'rose8'
            ]
        },
        series: [
            {
                name: 'Area Mode',
                type: 'pie',
                center: ['50%', '50%'],
                // roseType: 'area',
                roseType: "radius",
                radius: ['10%', '70%'],
                // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
                label: {
                    fontSize: 20
                },
                // 引导线调整
                labelLine: {
                    // 连接扇形图线长
                    length: 50,
                    // 连接文字线长
                    length2: 20
                },
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    {value: 20, name: '云南'},
                    {value: 26, name: '北京'},
                    {value: 24, name: '山东'},
                    {value: 25, name: '河北'},
                    {value: 20, name: '江苏'},
                    {value: 25, name: '浙江'},
                    {value: 30, name: '四川'},
                    {value: 42, name: '湖北'}
                ],
                color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

@Autowire

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数据可视化工具 - ECharts饼形图的编写

/// 1. 实例化对象varinit"main";// 2. 指定配置和数据tooltiptrigger'item'legendtop'5%'left'center'seriesnametype'pie'radius'40%''70%'falselabelshowfalseposition'center'labelLineshowfalse。
复制链接

扫一扫