Anpassen Etikett in Streudiagramm in echarts durch baidu

Question

dieses Beispiel Bezug Streudiagramm unter Verwendung echarts Bibliothek zu erzeugen: Basic Scattergraph

Mein Code dafür ist wie folgt:

option ={ 
      xAxis : [ 
         { 
          type : 'value', 
          scale:true 
         } 
        ], 
      yAxis : [ 
         { 
          type : 'value', 
          scale:true 
         } 
        ], 
      series : [ 
         { 
          symbolSize: 40, 
          itemStyle: { 
             normal: { 
                color: 'lightblue', 
                borderWidth: 4, 
                label : { 
                   show: true, 
                   position: 'inside', 
                   formatter: function(v) 
                   { 
                    if (v==[161.2, 51.6]) 
                     return 'a' 
                    else 
                     return v 
                   } 
                  } 
               } 
             }, 
          type:'scatter', 
          data: [ 
            [161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6], 
            [170.0, 59.0], [166.0, 69.8], [176.2, 66.8] 
            ],  
         } 
        ] 
     }; 

Im formatter Funktion innerhalb series Ich versuche, meine Variable 'v' mit einem Koordinatenpunkt aus Daten abzugleichen. Aber diese Bedingung ist nicht erfüllt. Wo gehe ich falsch? Ich sehe nur [object Object] in allen Blasen. Bitte helfen Sie.

Answer 1

Wenn Sie die Echarts2.x Version verwenden, Code wie folgt lautet:

option ={ 
    xAxis : [ 
     { 
      type : 'value', 
      scale:true 
     } 
    ], 
    yAxis : [ 
     { 
      type : 'value', 
      scale:true 
     } 
    ], 
    series : [ 
     { 
      symbolSize: 40, 
      itemStyle: { 
       normal: { 
        color: 'lightblue', 
        borderWidth: 4, 
        label : { 
         show: true, 
         position: 'inside', 
         formatter: function(data){ 
          var v = data.value; 
          if (v[0]==161.2 && v[1]==51.6) 
           return 'a' 
          else 
           return v 
         } 
        } 
       } 
      }, 
      type:'scatter', 
      data: [ 
       [161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6], 
       [170.0, 59.0], [166.0, 69.8], [176.2, 66.8] 
      ],  
     } 
    ] 
}; 

die Parameter von formatter Funktion ist ein Objekt, das ein Punktobjekt auf der Streuung ist, ist die Struktur wie folgt:

$vars:Array[3] 
color:"lightblue" 
componentSubType:"scatter" 
componentType:"series" 
data:Array[2] 
dataIndex:0 
dataType:undefined 
name:"" 
seriesIndex:0 
seriesName:"-" 
seriesType:"scatter" 
status:"normal" 
value:Array[2] 

Also ist der Parameter nicht das Array, das Sie wollten. Das Attribut itemStyle wird zum Festlegen des Grafikstils verwendet. Das Attribut label wird verwendet, um die Textbeschriftung im Diagramm festzulegen, die zur Erläuterung einiger Dateninformationen des Diagramms verwendet werden kann. Wie Wert, Name, etc. In Echarts3.x, um die Struktur der gesamten Konfiguration flacher und vernünftiger zu machen, wurde label mit itemStyle auf dem gleichen Niveau herausgenommen. wie itemStyle haben zwei Zustände von normal und emphasis. Wenn Sie die Version Echarts3.x verwenden, ist der Code wie folgt:

option ={ 
    xAxis : [ 
     { 
      type : 'value', 
      scale:true 
     } 
    ], 
    yAxis : [ 
     { 
      type : 'value', 
      scale:true 
     } 
    ], 
    series : [ 
     { 
      symbolSize: 40, 
      itemStyle: { 
       normal: { 
        color: 'lightblue', 
        borderWidth: 4, 
       } 
      }, 
      label : { 
       normal: { 
        show: true, 
        position: 'inside', 
        formatter: function(data){ 
         var v = data.value; 
         if (v[0]==161.2 && v[1]==51.6) 
          return 'a' 
         else 
          return v 
        } 
       } 
      }, 
      type:'scatter', 
      data: [ 
       [161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6], 
       [170.0, 59.0], [166.0, 69.8], [176.2, 66.8] 
      ],  
     } 
    ] 
};