echart环形图图例位置自定义设置

图例:

 示例代码:

patientDistri5(valData, newColor) {
      const option = {
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: '#333',
            fontSize: 14,
            fontWeight: 'normal'
          },
          formatter: (param) => {
            return `
                  <div style="display:flex;height:26px;line-height:26px">
                  <span>${param.marker}${param.name}</span></div>
                  <div style="display:flex;height:26px;line-height:26px;">
                  <span style="font-weight: 700;
                  margin-right:4px;text-indent:14px">${param.data.value}人</span>
                  <span>(${param.data.percentage})</span>
                  </div>`
          }
        },
        color: newColor, //图例颜色
        legend: {
          icon: 'square',
          orient: 'vertical',
          formatter: '{a|{name}}',
          right: '3%',
          top: 'center',
          selectedMode: false,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            padding: [0, 0, 0, 10],
            rich: {
              a: {
                width: 88,
                fontSize: 12,
                color: '#544F4F',
                borderColor: '#fff',
                borderWidth: 1
              }
            }
          },  //图例设置
          itemGap: 30
        },
        series: [
          {
            name: '',
            type: 'pie',
            top: 20,
            right: '30%',
            bottom: 20,
            left: '10%',
            radius: ['45%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 6
              normal: {  //若是柱状图,设置柱状图为椭圆
                barBorderRadius: 16 //
              } //
            },
            label: {
              alignTo: 'edge',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 25,
              formatter: (item) => {
                const { data } = item
                return `{b|${data.name}}\n{c|${data.value}(${data.percentage})}`
              },
              rich: {
                b: {
                  fontSize: 12,
                  color: '#544F4F'
                },
                c: {
                  fontSize: 12,
                  color: '#544F4F'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: (params) => {
              const isLeft = params.labelRect.x < this.myChart5.getWidth() / 2,
                points = params.labelLinePoints
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },  //label线设置
            data: valData
          }
        ]
      }
      this.myChart5 = this.$echarts.init(this.$refs.firstRiskPic)
      this.myChart5.clear()
      this.myChart5.setOption(option, true)
      window.addEventListener('resize', () => {
        this.myChart5.resize()
      })
    },

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值