首先半径过小的问题是通过我们给他加一个数值,然后图标展示的是showData,但是我们的label和tooltip都要再减去加上的这个值;

然后是再视觉引导线上方和下方展示的问题:

首先延长labelLine中length2的长度,然后通过distanceToLabelLine设置文字和视觉引导线的间距,因为这里的只使用一个/n的话有一点紧密,所以我这里使用两个/n

//初始化饼图
initPie() {
  let chartDom = this.$refs.pie;
  let myChart = echarts.init(chartDom);
  let option;
  let showData =[]
  let sum = 0, max = 0;

  this.pieData.forEach(item => {
    sum += item.value
    if(item.value >= max) max = item.value
  })
  // 放大规则
  let number = Math.round(max * 0.4)
  showData = this.pieData.map(item => {
    return {
      value: number + item.value,
      name: item.name
    }
  })
  option = {
    title: {
      text: '开度值(%)',
      left: 'left',
      textStyle: {
        color: '#ffffff',
        fontSize: 15
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (param){
        return param.name +': '+ (param.value - number) + '%'
      }
    },
    series: [
      {
        type: 'pie',
        minAngle: 10,  // 设置最小角度,确保数据小的扇区可见
        roseType: 'radius',
        radius: ['0%', '80%'],
        data: showData,
        label: {
          show: true,
          position:'outside',
          verticalAlign:'middle',
          color: '#f6f1f1',
          fontSize: 15,
          distanceToLabelLine:-70,//实现上方和下方显示
          formatter: function (params) {
            return ( params.value- number + '% ' + params.name + '').split(" ").join('\n\n');  // 在原来的值上添加 %
          },
        },
        labelLine:{
          minTurnAngle:90,
          maxSurfaceAngle:120,
          length:30,
          length2:80,
        },


        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX:
                0,
            shadowColor:
                'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
  //  随外层div的大小变化自适应
  const _this = this
  let erd = elementResizeDetectorMaker();
  erd.listenTo(this.$refs.pieParent, () => {
    _this.$nextTick(() => {
      myChart.resize();
    })
  })

},

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐