echarts 環形圖中自定義文字
阿新 • • 發佈:2020-08-25
自定義文字:
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 } ] })