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小时内删除。