echarts饼图中间显示文字,echarts饼图大小设置

 分类:echarts时间:2023-06-24 07:30:06点击:

ECharts饼图中间显示文字可参考如下代码,最简单的方式就是通过title控制

var scale = 1;
    var echartData = [{
      value: 2154,
      name: '曲阜师范大学'
    }, {
      value: 3854,
      name: '潍坊学院'
    }, {
      value: 3515,
      name: '青岛职业技术学院'
    }, {
      value: 3515,
      name: '淄博师范高等专科'
    }, {
      value: 3854,
      name: '鲁东大学'
    }, {
      value: 2154,
      name: '山东师范大学'
    }]

    option = {
      legend: {
        orient : 'vertical',
        x : 'left',
        data:['山东师范大学','鲁东大学','曲阜师范大学'/*,'潍坊学院','青岛职业技术学院','淄博师范高等专科'*/]
      },
      //backgroundColor: '#031f2d',
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      title: {
        text:'总考生数',
        left:'center',
        top:'45%',
        // padding:[24,0],
        textStyle:{
          color:'#031f2d',
          fontSize:20*scale,
          align:'center'
        }
      },

      series: [{
        name: '考生数量',
        type: 'pie',
        //radius: ['45%', '50%'],
        radius : ['50%', '70%'],
        hoverAnimation: true,
        //color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
       /* labelLine: {
          normal: {
            show: false
          }
        },*/
        itemStyle : {
          normal : {
            label : {
              show : false
            },
            labelLine : {
              show : false
            }
          },

        },
        data: echartData
      }]
    };

运行结果如下:

echarts饼图中间显示文字

ECharts饼图的大小设置

可以通过设置series.radius属性进行控制。radius表示饼图的半径大小,可以设置成百分比字符串或者数字。当设置为百分比字符串时,相对于容器宽度计算,例如'55%'表示半径为容器宽度的55%;当设置为数字时,则表示饼图半径的像素值。具体操作如下:

option = {
  // 其他配置项...
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '60%'],
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ],
    label: {
      normal: {
        show: true,
        position: 'center',
        textStyle: {
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
    }
  }]
};

上述代码中的radius属性设置了一个数组,第一个元素表示内径大小,第二个元素表示外径大小,可以根据实际需求进行调整。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: