基于Echarts实现饼图效果

2024-04-02 19:04:59 202人浏览独家记忆

摘要

本文实例为大家分享了Echarts实现饼图效果的具体代码，供大家参考，具体内容如下 1 显示数值效果 series 下的label 饼图的文字显示2 半径圆环 radius3 南丁

本文实例为大家分享了Echarts实现饼图效果的具体代码，供大家参考，具体内容如下

1 显示数值效果 series 下的label 饼图的文字显示
2 半径圆环 radius
3 南丁格尔图 roseType: 'radius' 数值越大半径越大
4 选中效果 selectedMode

注意点:

1 不需要设置 x轴和y轴

2 饼图的所需要的数据是个数组数组里面放对象对象则必须包含name和value，

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta Http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
 
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var pieData = [
      {
        name: '伙食费',
        value: 11231
      },
      {
        name: '房贷',
        value: 22673
      },
      {
        name: '交通费',
        value: 6123
      },
      {
        name: '车辆保养费',
        value: 8989
      },
      {
        name: '网购',
        value: 6700
      }
    ]
    var option = {
      legend:{
        show: true,
        icon:'circle',
      },
      color: [
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc',
    ],
      series: [
        {
          type: 'pie',
          data: pieData,
          label: { 
            show: true, 
            // fORMatter: 'test' 
            formatter: function(arg){
              console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          
          // radius: 20, // 饼图的半径
          // radius: '20%', 
          // radius: ['50%', '75%'], // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
          radius: [60, 140],
          // roseType: 'radius', 
          // selectedMode: 'single', // 选中的效果,能够将选中的区域偏离圆点一小段距离(单个)
          selectedMode: 'multiple', // 多个可以选中
          // selectedOffset: 0
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 基于Echarts实现饼图效果

本文链接: https://www.lsjlt.com/news/149385.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341