04-Echarts饼图的基本实现、常见效果

最新推荐文章于 2022-05-15 20:59:34 发布

请问大家代码怎么敲

最新推荐文章于 2022-05-15 20:59:34 发布

阅读量592

点赞数

分类专栏： Echarts 数据可视化 js

本文链接：https://blog.csdn.net/liumuye88888/article/details/116766531

版权

js 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Echarts

7 篇文章 0 订阅

订阅专栏

数据可视化

7 篇文章 0 订阅

订阅专栏

饼图的特点

饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

饼图的基本实现

不需要配置xAxis和yAxis

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 600px;"></div>
    
</body>
<script>
    //1. ECharts最基本的代码结构
    //2. 准备数据[{name:???, value:??? },{}]
    //   淘宝: 11231  京东: 22673  唯品会: 6123  1号店: 8989   聚美优品: 6700
    //3. 将type的值设置为pie
    // 基于准备好的dom，初始化echarts实例
    var mCharts = echarts.init(document.querySelector("div"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
    var pieData = [
      {
        name: '淘宝',
        value: 11231
      },
      {
        name: '京东',
        value: 22673
      },
      {
        name: '唯品会',
        value: 6123
      },
      {
        name: '1号店',
        value: 8989
      },
      {
        name: '聚美优品',
        value: 6700
      }
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    mCharts.setOption(option)
</script>
</html>

在这里插入图片描述

显示文字格式化

 series: [
        {
          type: 'pie',
          data: pieData,
          label:{// 显示数值
            show:true,
            formatter:function(arg){ //是每条数据的内容
                console.log(arg);
                return arg.name + '平台'+arg.value +'元\n'+arg.percent+"%"
            }
          },

在这里插入图片描述

圆环效果

radius:[‘50%’,‘75%’] //第0个元素代表的是内圆的半径,第1个元素是外圆的半径

  series: [
        {
          type: 'pie',
          data: pieData,
          label:{// 显示数值
            show:true,
            formatter:function(arg){
                console.log(arg);
                return arg.name + '平台'+arg.value +'元\n'+arg.percent+"%"
            }
          },
            // radius:20,//饼图的半径
            // radius:'20%', //百分比参照的宽度和高度中较小的那一部分的一半来进行百分比设置
            radius:['50%','75%'] 
          
        }
      ]

在这里插入图片描述

南丁格尔图(根据百分比展现的图)

roseType
‘radius’ 扇区圆心角展现数据的百分比，半径展现数据的大小。
‘area’ 所有扇区圆心角相同，仅通过半径展现数据大小

 series: [
        {
          type: 'pie',
          data: pieData,
          label:{// 显示数值
            show:true,
            formatter:function(arg){
                console.log(arg);
                return arg.name + '平台'+arg.value +'元\n'+arg.percent+"%"
            }
            roseType:'area',  //南丁格尔图饼图的每一个区域的半径是不同的
          
        }
      ]

在这里插入图片描述

选中效果

```javascript
series: [
        {
          type: 'pie',
          data: pieData,
          label:{// 显示数值
            show:true,
            formatter:function(arg){
                console.log(arg);
                return arg.name + '平台'+arg.value +'元\n'+arg.percent+"%"
            }
          },
         
    
            selectedMode:'multiple',//选中之后偏移 multiple支持多选 single单选
            selectedOffset:30 //选中后的偏移数值
        }
      ]

在这里插入图片描述
更多配置请到Echarts官网学习
请点击:跳转官网

请问大家代码怎么敲

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
04-Echarts饼图的基本实现、常见效果

目录饼图的特点饼图的基本实现显示文字格式化圆环效果南丁格尔图(根据百分比展现的图)选中效果饼图的特点饼图可以很好地帮助用户快速了解不同分类的数据的占比情况饼图的基本实现不需要配置xAxis和yAxis<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
复制链接

扫一扫