1. 程式人生 > 實用技巧 >echarts 環形圖中自定義文字

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 } ] })