一个div+CSS实现环形图

最新推荐文章于 2024-12-09 14:18:15 发布

Jerry丶Hu_

最新推荐文章于 2024-12-09 14:18:15 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS样式

本文链接：https://blog.csdn.net/weixin_43931876/article/details/117767701

CSS样式专栏收录该内容

8 篇文章

订阅专栏

效果图

仅适合统计两个数据源，多个数据源或者复杂效果请使用ECharts

实现原理

利用CSS锥形渐变conic-gradient，以下是该属性兼容性

代码（Vue）

<template>
  <!-- data-xxx可实现CSS attr(data-xxx)获取值 -->
  <div
    class="circular"
    :style="style"
    :data-percent="percent"
  ></div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      // 进度
      percent: '30%',
      // 底色
      chartColor: '#E6A23C',
      // 进度色
      chartProgressColor: '#F56C6C',
      // 进度宽度
      progressWidth: '50px'
    }
  },
  computed: {
    style () {
      return {
        '--percent': this.percent,
        '--chartColor': this.chartColor,
        '--chartProgressColor': this.chartProgressColor,
        '--progressWidth': this.progressWidth
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.circular {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: relative;
  // 实现饼状图
  background-image: conic-gradient(
    var(--chartProgressColor) var(--percent),
    var(--chartColor) var(--percent)
  );
  // background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, red 0 80%, teal 0 100%);
  // 实现环形图
  &::after {
    // 获取template中声明的变量
    content: attr(data-percent);
    background: #fff;
    width: calc(200px - var(--progressWidth));
    height: calc(200px - var(--progressWidth));
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #333;
  }
}
</style>