charts饼图折线标签内容覆盖

得得得得得得得得。

已于 2022-05-07 14:24:19 修改

阅读量987

点赞数 1

文章标签： echarts 前端 javascript

于 2022-05-07 14:22:56 首次发布

本文链接：https://blog.csdn.net/wangxu133061/article/details/124629958

版权

本文介绍了ECharts中通过设置属性`avoidLabelOverlap`为`true`来防止饼图和折线图的标签内容发生重叠，确保图表的清晰易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts属性值avoidLabelOverlap：true

会自动避免标签重叠

purchasing_quantity_option: {
        title: { text: '食品采购量构成分析',subtext: '下单时间内所有订单不同类别下单数量', x: 'left', y: 'top', align: 'center' },
        tooltip: {//提示框，可以在全局也可以在
          trigger: 'item', //提示框的样式
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          color: '#000', //提示框的背景色
          textStyle: { //提示的字体样式
            color: 'black'
          }
        },
        legend: { //图例
          orient: 'vertical', //图例的布局，竖直    horizontal为水平
          x: 'right', //图例显示在右边
          y: 'center', //图例显示在中间
          data: [],
          textStyle: { //图例文字的样式
            color: '#000000', //文字颜色
            fontSize: 12 //文字大小
          }
        },
        series: [{
          name: '构成比例',
          type: 'pie', //环形图的type和饼图相同
          radius: ['50%', '70%'], //饼图的半径，第一个为内半径，第二个为外半径
          avoidLabelOverlap: true, //解决折现内容覆盖
          color: [],
          label: {
            normal: { //正常的样式
              show: true,
              position: 'left',
              formatter: '{b},{c},{d}%'
            },
            emphasis: { //选中时候的样式
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold'
              }
            }
          },
          itemStyle: {
            borderWidth: 2, //设置border的宽度有多大
            borderColor: '#fff'
          },
          data: []
        }]
      }