06 饼图

1、 基础饼图

Title

【整体】居中显示： le f t:50%

【文字】居中显示： texta lign:center

legend:

      文字和图标的左右位置： align:'left',

      朝向【垂直显示】： orient:'vertical',

      位置【最左边显示】：left:0

饼图

修改圆的半径 radius:“50%”,

1.1charts 饼图的label放置于labelLine引导线上方

一般的饼图基础配置后长这样。

想要实现将文本放置在引导线上方，效果长这样

const options = {
  // ...
  series: [
    {
      label: {
        padding: [0, -40],
      },
      labelLine: {
        length: 10,
        length2: 50,
      },
      labelLayout: {
        verticalAlign: "bottom",
        dy: -10,
      },
    },
  ],
};

label.padding设置是关键，它控制文字块的内边距[上,右,下,左]，取值根据要展示的文本宽度估算一个数值；
labelLine设置引导线的长度，length第一条线、length2第二条线。
以上两种配置完基本可以看到文本与引导线在同一水平位置了

2、 环形图

添加属性： radius:[“40%”,“60%”],

添加提示框

3.1 案例

解析：


格式化数据

 formatter: function (params) {
      // console.log('params', params)
      return `<div>
        ${params.seriesName}
        <br/>
        <div style="display:flex;align-items:center;">
          <div style="width: 10px; height: 10px; background-color: ${params.color}; margin-right: 10px;border-radius:50%;"></div>
        ${params.name}  ${formatNumber(params.value)} ${params.percent}%
          </div>
      </div>`
    } 
  },

option = {
  color: ['#09CCF3', '#FEB62C', '#477FFF', '#31CE81'],
  tooltip: {
    trigger: 'item',//axis显示该列下所有坐标轴对应数据，item只显示该点数据
    backgroundColor: 'rgba(13, 23, 43, 0.74)',
    borderColor: 'rgba(13, 23, 43, 0.74)',
    textStyle: {
      color: '#FFFFFF'
    },
  formatter: function (params) {
      // console.log('params', params)
      return `<div>
        ${params.seriesName}
        <br/>
        <div style="display:flex;align-items:center;">
          <div style="width: 10px; height: 10px; background-color: ${params.color}; margin-right: 10px;border-radius:50%;"></div>
        ${params.name}  ${formatNumber(params.value)} ${params.percent}%
          </div>
      </div>`
    } 
  },
  legend: {
    bottom: '20',
    show: true,
    left: 'center',
    icon: 'circle'
  },
  series: [
    {
      name: '渠道会话占比',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '42%'], //位置：饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
      avoidLabelOverlap: false, //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff'
      },
      label: {//文本标签
        show: true,
        position: 'outside'
      },
      labelLine: {//引导线
        show: true
      },
      emphasis: {//高亮状态的扇区和标签样式
        label: {
          show: true,
          fontSize: 25,
          fontWeight: 'bold'
        }
      },
      data: [
            {
                "name": "IM",
                "value": 18
            },
            {
                "name": "Facebook",
                "value": 5
            },
            {
                "name": "Instagram",
                "value": 7
            },
            {
                "name": "Whatsapp",
                "value": 3
            }
        ]
    }
  ],
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: '35%', // 调整位置到环形图中间的上方
      style: {
        text: '总会话数', // 上方的文字内容
        textAlign: 'center',
        fill: '#909399', // 上方文字颜色
        fontSize: 16
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '41%', // 调整位置到环形图中间的下方
      style: {
        text: '11123', // 下方的文字内容
        textAlign: 'center',
        fill: '#303133', // 下方文字颜色
        fontSize: 18,
        fontWeight: 'bold'
      }
    }
  ]
}

3、南丁格尔图

添加属性roseType

4、 半圆环

步骤1:

步骤二：

将颜色变为透明，形成一个半圆

步骤三：

旋转

5、 案例

部分解析：

添加一个极坐标 ，