【echarts】三环环形图，在环形图的每个扇形之间加空隙

最新推荐文章于 2024-07-24 14:42:42 发布

thinkasany

最新推荐文章于 2024-07-24 14:42:42 发布

阅读量3.8k

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/daddykei/article/details/122930278

版权

代码还有很多的优化空间，主要也就是环形图的几个配置比较重要，毕竟官方文档太长了（难找），还是记录一下。

配置

1. 实现环形图不同区域之间的空隙
 itemStyle: { normal: { borderColor: "#FFFFFF", borderWidth: 1, }}
2. 显示数据名，这里还是需要看一下官方文档， a系列名 b数据名就是下面data里面的name，c对应value
data: [{
          value: 25,
          name: 'thinker'
        },
        {
          value: 55,
          name: 'wing'
        }
      ]

3. 字体旋转
series-pie.label. rotatebooleannumber
标签旋转：

如果为 true，则为径向排布。
如果为 number ，旋转指定角度，从 -90 度到 90 度。正值是逆时针。
 label: { //饼图图形上的文本标签
        normal: {
          show: true,
          position: 'inner', //标签的位置
          textStyle: {
            fontWeight: 300,
            fontSize: 16, //文字的字体大小
          },
          rotate: 'tangential',
          formatter: '{a}\n{b}'
        }
4.不同层级环的粗细radius: ['93%', '96%'],通过改变这个慢慢微调

在这里插入图片描述

代码部分

可以直接新建一个html文件打开预览

<!DOCTYPE html>
<html lang="en">

<head>
  <script crossorigin="anonymous"
    integrity="sha512-RjdGUelydi9tlywPU+UXK4pTF9zeUAVxnMIvNgy5HJAzCLj/tllE0Z1UxxbemFknstsiKZZXlP/pedzZ86kvFw=="
    src="https://lib.baomitu.com/echarts/5.3.0/echarts.common.js"></script>
  <meta charset="UTF-8">
  <title>echarts.js案例一</title>
</head>

<body>
  <div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
  // 初始化图表标签
  var myChart = echarts.init(document.getElementById('chart'));
  var checkName = ''; //点击柱子的名字

  var BorderWidth = '6';
  //反方向剩下部分的样式
  var placeHolderStyle = {
    normal: {
      label: {
        show: false,
        position: "center"
      },
      labelLine: {
        show: false
      },
      // color: "#3A4154",
      color: "white",
      borderColor: "#3A4154",
      borderWidth: 6
    },
    emphasis: {
      color: "#dedede",
      borderColor: "#dedede",
      borderWidth: 0
    },
    itemStyle: {
      borderWidth: 5, //设置border的宽度有多大
      borderColor: '#fff',
    },
  }
  option = {
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return `${params.name}${params.value} <br/> 占比%`
      }
    },
    color: ['#7B79FF', '#FFB0E2', '#59CFFF', 'red', 'green', 'yellow', 'black', 'pink'],

    series: [{
      name: '入厕人数',
      type: 'pie',
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大

      radius: ['93%', '96%'],
      itemStyle: {
        normal: {
          label: {
            show: false,
            position: 'outside'
          },
          labelLine: {
            show: false,
            length: 100,
            smooth: 0.5
          },
          borderWidth: BorderWidth,
          shadowBlur: 40,
          shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
        }
      },
      data: [{
          value: 7,
          name: '入厕人数',
          itemStyle: placeHolderStyle.itemStyle
        },
        {
          value: 5,
          name: '',
          itemStyle: placeHolderStyle.itemStyle
        },
        {
          value: 4,
          name: '入厕人数',
          itemStyle: placeHolderStyle.itemStyle
        },
        {
          value: 3,
          name: '入厕人数',
          itemStyle: placeHolderStyle.itemStyle
        },
        {
          value: 3,
          name: '',
          itemStyle: placeHolderStyle.itemStyle
        }
      ]
    }, {
      name: '就餐人数',
      type: 'pie',
      clockWise: true,
      hoverAnimation: false,
      radius: ['55%', '92%'],
      itemStyle: placeHolderStyle.itemStyle,
      data: [{
          value: 6,
          name: '就餐人数',
          itemStyle: placeHolderStyle.itemStyle
        },
        {
          value: 4,
          name: '4ren',
          itemStyle: placeHolderStyle.itemStyle
        }
      ]
    }, {
      name: '购物人数',
      type: 'pie',
      clockWise: true,
      hoverAnimation: false,
      radius: ['30%', '54%'],
      itemStyle: placeHolderStyle.itemStyle,
      label: { //饼图图形上的文本标签
        normal: {
          show: true,
          position: 'inner', //标签的位置
          textStyle: {
            fontWeight: 300,
            fontSize: 16, //文字的字体大小
          },
          rotate: 'tangential',
          formatter: '{a}\n{b}'
        }
      },
      data: [{
          value: 25,
          name: 'thinker',
          itemStyle: placeHolderStyle.itemStyle
        },
        {
          value: 55,
          name: 'wing',
          itemStyle: placeHolderStyle.itemStyle
        }
      ]
    }]
  };


  myChart.setOption(option);
</script>

</html>

thinkasany

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
【echarts】三环环形图，在环形图的每个扇形之间加空隙

代码还有很多的优化空间，主要也就是环形图的几个配置比较重要，毕竟官方文档太长了（难找），还是记录一下。配置1. 实现环形图不同区域之间的空隙 itemStyle: { normal: { borderColor: "#FFFFFF", borderWidth: 1, }}2. 显示数据名，这里还是需要看一下官方文档， a系列名 b数据名就是下面data里面的name，c对应valuedata: [{ value: 25, name: 'thinker'.
复制链接

扫一扫