echarts 饼图指导线

weixin_46412709

已于 2022-11-25 08:52:32 修改

阅读量66

点赞数

文章标签： echarts 前端 javascript

于 2020-05-28 17:17:48 首次发布

本文链接：https://blog.csdn.net/weixin_46412709/article/details/106409343

版权

原图：
在这里插入图片描述
需要的状态图：

代码：

itemStyle: {
        normal: {
          label: {
            show: false   //隐藏文字
          },
          labelLine: {
            show: false   //隐藏指示线
          }
        },
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 2, 2, 0.3)'
        }
      }

下面是饼状图内部显示两行文字的方法：

title: {
      text: '12350家',
      x: 'center',
      y: 'center',
      top: '130',
      textStyle: {
        fontSize: 15,
        color: '#020202',
        fontWeight: '400'
      }
    },
    graphic: {       //图形中间文字
      type: "text",
      left: "center",
      top: "156rpx",
      style: {
        text: '占比26%',
        textAlign: "center",
        fill: "#0090C1",
        fontSize: 12
      }
    },