Echarts之极坐标柱状图标签自定义实例

效果

实例代码

<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>