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);
}
},
Echarts动态设置length里面的文字宽度
最新推荐文章于 2024-01-10 15:01:07 发布