echarts环形图中⾃定义⽂字
⾃定义⽂字:
graphic:{ //图形中间⽂字
type:"text",
left:"center",
top:"center",
style:{
text:"拒付分析",
textAlign:"center",
fill:"#010101",
fontSize: 28
textstyle }
},
var myChart2 = this.$echarts.ElementById('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
}
]
})
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论