echarts 环形图中自定义文字
自定义文字:
graphic:{ //图形中间文字 type:"text", left:"center", top:"center", style:{ text:"拒付分析", textAlign:"center", fill:"#010101", fontSize: 28 } },
var myChart2 = this.$echarts.init(document.getElementById('myChart2'));
let radius = [100, 120]; //圆环大小
myChart2.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
textStyle: {
"fontSize": 12
}
},
graphic:{ //图形中间文字
type:"text",
left:"center",
top:"center",
style:{
text:"拒付分析",
textAlign:"center",
fill:"#010101",
fontSize: 28
}
},
calculable: true,
series: [
{
name: '',
type: 'pie',
radius: radius, //圆环大小,配置在头部
labelLine: { //图形外文字线
normal: {
length: 35,
length2: 80
}
},
label: {
normal: {
formatter: '{b|{b}} {c|{c}} 笔', //图形外文字上下显示
borderWidth: 20,
borderRadius: 4,
color: '#000',
// padding: [0, 80], //文字和图的边距
rich: {
a: {
color: '#000',
fontSize: 14,
lineHeight: 28
},
b: { //name 文字样式
fontSize: 14,
lineHeight: 20,
color: '#000'
},
c: { //value 文字样式
fontSize: 14,
lineHeight: 20,
align:"center",
color: '#000'
}
}
}
},
itemStyle: {
normal: {
color: function(params) {
var colorList = [ //自定义颜色
'#2566FA','#F71F45','#F99025','#8156FA','#7BCC73',
'#259DFA','#EF1EB6','#ef77b0','#F9D425','#D943FF',
'#1EB5FA','#EF27C9','#EF37A4','#F9C246','#F02D1D',
'#2566FA','#F71F45','#F99025','#8156FA','#7BCC73',
'#259DFA','#EF1EB6','#ef77b0','#F9D425','#D943FF',
'#1EB5FA','#EF27C9','#EF37A4','#F9C246','#F02D1D',
'#2566FA','#F71F45','#F99025','#8156FA','#7BCC73',
'#259DFA','#EF1EB6','#ef77b0','#F9D425','#D943FF',
'#1EB5FA','#EF27C9','#EF37A4','#F9C246','#F02D1D'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: data
}
]
})