Echarts饼图常用效果

最新推荐文章于 2025-03-11 18:31:37 发布

Akimoto Hiroshi

最新推荐文章于 2025-03-11 18:31:37 发布

阅读量1.4k

点赞数 1

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.youkuaiyun.com/dyw3390199/article/details/120596015

版权

echarts 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用Echarts库创建饼图，包括基本的饼图实现、显示文字、控制半径、设置圆环样式以及实现南丁格尔图效果。通过实例代码展示了各种特效的配置方法，帮助读者掌握Echarts饼图的高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

基本实现

<!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>饼图</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var pieData = [
      {
        name: 'shanghai',
        value: 157279
      },
      {
        name: 'hefei',
        value: 115623
      },
      {
        name: 'wuxi',
        value: 180044
      },
      {
        name: 'nanjing',
        value: 165681
      },
      {
        name: 'hangzhou',
        value: 152465
      },
      {
        name: 'suzhou',
        value: 179174
      },
    ]

    var option = {
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }

    myCharts.setOption(option)
  </script>
</body>
</html>

在这里插入图片描述

常用特效

1.显示文字

在这里插入图片描述
看一下这里面是什么：

好了，现在我们可以自定义显示文字了：

<!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>饼图</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var pieData = [
      {
        name: 'shanghai',
        value: 157279
      },
      {
        name: 'hefei',
        value: 115623
      },
      {
        name: 'wuxi',
        value: 180044
      },
      {
        name: 'nanjing',
        value: 165681
      },
      {
        name: 'hangzhou',
        value: 152465
      },
      {
        name: 'suzhou',
        value: 179174
      },
    ]

    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
          label: {
            show: true,
            formatter: function (args) {
              return `${args.name}\n\n人均GDP: ${args.value}`
            }
          }
        }
      ]
    }

    myCharts.setOption(option)
  </script>
</body>
</html>