Echarts动态设置length里面的文字宽度

 mounted() {
        let _this = this;
        this.option = {
            tooltip: {
                trigger: "item",
                axisPointer: {
                    type: "line",
                    lineStyle: {
                        type: "dashed"
                    },
                    textStyle: {
                        color: "#fff"
                    }
                },
                backgroundColor: "transparent",
                position: function (point, params, dom, rect, size) {
                    var html = '<div class="lay-tooltip"><ul>';

                    html +=
                        '<li><i class="icon" style="background-color:' + params.color +
                        '"></i><span class="tit">' +
                        params.name +
                        '</span> <br> <span class="numfont">' +
                        params.value +
                        `</span> | ` + params.percent + '%</li>';

                    html += "</ul></div>";
                    $(dom).html(html);
                },
            },  
            legend: {
                icon: "circle", 
                left:'45%',
                top:'30%',
                  textStyle: {
                    fontSize: 16,
                    color: '#fff',
                    rich: {
                        name: {
                            fontSize: 16,
                            width:110,
                        },
                        percent: {
                            fontSize: 16,
                        },
                        peo: {
                            fontSize: 16
                        }
                    }
                },
                itemWidth: 6,
                itemHeight: 6,
                borderRadius:['50%','50%'],
            },
            color: ["#01EC68", "#0884ED", "#EA3329",'#DFD806'],
            series: [],
        }
        _this.drawline();
    },
    //这是写在methods里面的
     async drawline() {
            const _this = this;
            try {
                var pama = {}
                let result = await 123(pama);

                if (result.data.code + '' === '0') {
                    this.list = result.data.result.map((item,i) => {
                        if(this.roleLIstanbul[i].name2 == item.level){
                            item.name2 = this.roleLIstanbul[i].name3
                        }
                        return {
                            name: item.name2,
                            value: item.value,
                            label:{
                                show: false,
                            }
                        }
                    })
                    _this.textList = JSON.parse(JSON.stringify(this.list))//先深拷贝一下,避免互相影响
                    _this.textList = _this.textList.sort((a,b)=>{//在做下排序,数值大的在前面
                        return  b.value - a.value
                        })
                    _this.textLength = (_this.textList[0].value + '').length//获取最大数值的长度
                   this.option.legend.textStyle.rich.percent ={//设置legend里面textStyle的长度
                            fontSize: 16,
                            padding: [2, 0],
                            width:_this.textLength * 10,//一个字宽度为10,以此类推
                   } 
                    _this.option.series = [
                        _this.seriesFn(["20%", "50%"], _this.list),
                    ];
                    var myChart = _this.$echarts.init(
                        document.getElementById("reportpie2")
                    );
                    _this.myChart = myChart;
                    myChart.setOption(_this.option);
                    myChart.setOption({
                        series: [{
                            data: this.list,
                            itemStyle:{
                                 borderColor:'#000',
                                  borderColor:20,
                            },
                        }],
                        legend: {
                            formatter: function(name) {
                                let data = _this.list
                                let total = 0
                                let tarValue
                                for (var i = 0; i < data.length; i++) {
                                total +=  (data[i].value * 1)
                                if (data[i].name == name) {
                                    tarValue = data[i].value
                                }
                                }
                                var v = tarValue * 1
                                var p = ((v / total)*100).toFixed(2)
                                return '{name|' + name + '}{percent|' + v + ' } | '+ p + '%'
                                }
                        }
                    });
                }
            } catch (error) {
                console.log(error);
            }


        },

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值