echarts+vue 圆环内圈隔断百分比图表

效果图

代码实现

1. main.js引入echarts (版本要大于5.0.0)

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

2. js配置echarts 这里有几个配置点 主要借助仪表盘进行配置项的修改 配置的是效果图第一个图表

const option = {
  series: [
    {
      type: 'gauge', // echart的仪表盘
      startAngle: 90, // 仪表盘的开始位置
      endAngle: 450, // 仪表盘的结束位置 （为了实现满圆）
      splitNumber: 10, // 圆圈一共分割成多少个小方块 10也就是每个方块代表百分之10，20是每个方块代表百分之5
      axisLine: {
        lineStyle: {
          width: 10,
          color: [
            [0.85, 'orange'], // 数据的颜色以及数据的百分比
            [1, '#080c17'], // 整个表盘圆环的颜色 这里是和背景颜色一样达到隐藏的效果
          ]
        }
      },
      pointer: { // 隐藏仪表盘的箭头
        show:false,
      },
      axisTick: { // 隐藏刻度
        show:false
      },
      splitLine: { 
        distance: -10,
        length: 10, // distance和length的值是相反数 axisLine的width要和length相等
        lineStyle: {
          color: '#080c17', // 背景色
          width: 4 // 空隙的宽度
        }
      },
      axisLabel: { // 隐藏刻度
        show: false
      },
      detail: { // 隐藏仪表盘中间的文案数据
        show:false,
      },
      data: [
        {
          value: 85
        }
      ]
    }
  ]
}
export {
  wasteOption
}

3. dom绘制渲染

<template>
    <div class="circle">
        <div id='echart'></div>
        <span>85%</span>
      </div>
</template>

<script>
    mounted () {
        this.$nextTick(() => {
            let chart = this.$echarts.init(document.getElementById('echart'));
            chart.setOption(option);
        })
    }
</script>

<style>
    .circle{
        width: 4vw;
        height: 4vw;
        border: 1px solid #ddd;
        color: #fff;
        font-size: 12px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        span{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        div{
          width: 110%;
          height: 110%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
</style>

4. 下面附上echarts官方文档配置编辑示例的地址 和 配置参数 https://echarts.apache.org/examples/zh/editor.html?c=gauge

over 祝福大家发大财