Echarts polar coordinate histogram label custom example

Effect

insert image description here

example code

<template>
  <div class="echart-app">
    <div id="main"></div>
    <p class="num top1">80.09%</p>
    <p class="num top2">64.34%</p>
    <!-- 数据 -->
    <div class="text">
      <p class="p1">数据1 xxxxxx</p>
      <p class="p2">数据2 xxxxxx</p>
    </div>
  </div>
</template>

<script>
export default {
    
    
  mounted(){
    
    
    this.into()
  },
  methods:{
    
    
    into(){
    
    
      var chartDom = document.getElementById('main');
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
    
    
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        title: {
    
    
          text: '标题'
        },
        legend: {
    
    },
        polar: {
    
    
          radius: [90, '80%']
        },
        angleAxis: {
    
     // 极坐标系的角度轴
          show:false, // 隐藏刻度
          max: 110,
          startAngle: 90 // 角度
        },
        radiusAxis: {
    
    
          type: 'category',
        },
        tooltip: {
    
    
          show: false
        },
        series: [
          {
    
    
            type: 'bar',
            data: [
              {
    
    
                value: 100,
                itemStyle: {
    
    
                  color: '#a90000'
                }
              }, 
              {
    
    
                value: 100,
                itemStyle: {
    
    
                  color: '#006699'
                }
              }
            ],
            coordinateSystem: 'polar',
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.echart-app{
    
    
  position: relative;
  #main{
    
    
    width: 300px;
    height: 300px;
    position: relative;
  }
  .num{
    
    
    position: absolute;
    left: 98px;
    font-size: 14px;
  }
  .top1{
    
    
    top:13px
  }
  .top2{
    
    
    top:28px
  }
  .text{
    
    
    font-size: 14px;
    position: absolute;
    right: 0;
    bottom: 0;
    .p1::before{
    
    
      content: '';
      position: absolute;
      top:20px;
      left: -10px;
      width: 8px;
      height: 8px;
      background-color: red;
      border-radius: 4px;
    }
    .p2::before{
    
    
      content: '';
      position: absolute;
      top:54px;
      left: -10px;
      width: 8px;
      height: 8px;
      background-color: blue;
      border-radius: 4px;
    }
  }
}

</style>

Guess you like

Origin blog.csdn.net/weixin_35773751/article/details/126276488