echarts圆角饼状图使用

 1.改变图例排列方式

编辑

编辑

 可以在option下的legend里进行修改 orient用来控制图例的朝向

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    type:'plain', //'plain'默认普通图例,'scroll'可滚动翻页的图例。当图例数量较多时可以使用。
    left:100, //距离左边距离也可以使用 'left' 'center' 'right'
    top:10, //距离顶部距离
    orient: 'vertical', //图例排列方式 'horizontal'默认横向排列 'vertical' 竖向排列
    textStyle:{ 
      color:'#000' //图例字体颜色
    }
  },
}

 2.圈内字体样式修改

option = {
    series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'], // 中心空白厚度占比,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10, //圆角角度
        borderColor: '#fff', //边框颜色
        borderWidth: 2 //边框宽度
      },
      label: {
        show: false,
        position: 'center', //字体居中显示
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20, //字体大小
          fontWeight:500  //字体是否加粗 'normal' 'bold' 'bolder' 'lighter'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'one' },
        { value: 735, name: 'two' },
        { value: 580, name: 'three' },
        { value: 484, name: 'four' },
        { value: 300, name: 'five' },   
   
      ]
    }
  ]
}