自定义饼图legend

drawLine3() {

      var data = this.echarts_pie2_list

      let echarts_pie2 = this.$echarts.init(document.getElementById('echarts_pie2'))

      echarts_pie2.setOption({

        tooltip: {

          trigger: 'item',

        },

        legend: {

          orient: 'vertical',

          textStyle: {

            rich: {

              name: {

                fontSize: 14,

                color: '#fff',

              },

              num: {

                fontSize: 14,

                color: 'rgba(255, 205, 31, 1)',

              },

              unit: {

                fontSize: 14,

                color: 'rgba(255, 205, 31, 1)',

              },

            },

          },

          type: 'scroll',

          top: 'middle',

          itemGap: 10,

          right: 30,

          formatter: function (name) {

            let space = ''

            let unit = ''

            for (var i = 0; i < data.length; i++) {

              var dpercent = data[i].value

              space = '\xa0\xa0\xa0'

              if (data[i].name == '党建文章') {

                unit = '篇'

              } else if (data[i].name == '党建视频') {

                unit = '个'

              }

              if (data[i].name === name) {

                return [`{name|${name}}${space}`, `{num|${dpercent}}`, `{unit|${unit}}`]

              }

            }

          },

        },

        color: ['#407FFF', '#00CCCD', '#F2534D', '#F2C761'],

        series: [

          {

            name: '学习资料',

            type: 'pie',

            center: ['25%', '50%'],

            radius: ['40%', '70%'],

            avoidLabelOverlap: false,

            itemStyle: {

              borderRadius: 10,

            },

            label: {

              show: false,

              position: 'center',

            },

            emphasis: {

              label: {

                show: true,

                fontSize: '18',

                color: '#fff',

              },

            },

            labelLine: {

              show: false,

            },

            data: this.echarts_pie2_list,

          },

        ],

      })

    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值