echarts 圆环图、饼图、环形图

846 阅读1分钟

image.png

option = {
        grid: {
          top: '-4%',
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: ['56%', '86%'],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2
          },
          avoidLabelOverlap: true,
          minAngle:20,
          label: {

            // padding: [5, 8],
            backgroundColor:'#fff',
            // color:'#fff',
            // position:'outer',
            // alignTo: 'edge',
            formatter: '{name|{b}}{time|{c}项}',
            minMargin: 1,
            edgeDistance: 10,
            distanceToLabelLine: 10,
            lineHeight: 26,

            rich: {
              time: {
                fontSize: 14,
                //color: '#999'
                // padding: [4, 1],
                // background:'#000',
              },
            }
          },
          labelLine: {
            length: 10,
            length2: 10,
          },
          data: [150, 230, 224, 218, 135, 147, 260],
        }]
  
};

##echarts@4.8.0

image.png

echarts@5.2.2、vue-echarts@6.0.0

决定标签分散的属性,与data同级

avoidLabelOverlap: true,
minAngle:40, //最小显示角度
// minShowLabelAngle:40,//最小显示标签角度