Echartsを使用してMarkPointプロパティでsymbolSizeを自動的に設定する方法Js

Question

echarts設定を使用してMarkPointを自動的に設定しようとしていますが、私は成功しませんでした。このような 何か：

しかし、私はこれだけを表示できます。

simbolSizeプロパティは、デフォルトでは、数、配列または関数可能性がドキュメントによると、値が10で、もし私が値を150に設定すると、ドロップが大きすぎて静的なので、値に応じて縮小または拡大する必要があります。

これは私がプロパティに使用するドキュメントlinkです。これはプロパティに関連する別のドキュメントlinkです。

最初の画像の例では、これは私のHTMLコードですthisリンク

からです：

<!-- Page Content --> 
     <div class="container"> 

      <div class="row"> 
       <div class="col-lg-12 text-center" > 
        <h1>Welcome Mr James Bond</h1> 
        <p class="lead">Below your money graphics</p> 
       </div> 
      </div> 
      <!-- /.row --> 
      <div class="row"> 
       <div id="graphic1" class="col-lg-12 text-center" style="width: 900px;height:500px; "> 
       </div> 
      </div> 
    </div> 

そして、これは私のJavascriptの設定です：任意の助けをいただければ幸いです

// based on prepared DOM, initialize echarts instance 
    var myChart = echarts.init(document.getElementById('graphic1')); 

// specify chart configuration item and data 
var option = { 
    title : { 
     text: 'Variable income', 
     subtext: 'Report period 2016', 
     x: 'center' 
    }, 
    tooltip : { 
     trigger: 'axis' 
    }, 
    legend: { 
     data:['Net Profit Loss','Rate of Return'], 
     x: 'left' 
    }, 
    toolbox: { 
     show : true, 
     showTitle : true, 
     feature : { 
      mark : {show: true} , 
      dataView : {show: true, title:'Data-View', readOnly: true,lang: ['Data View', 'close', 'Refresh']}, 
      magicType : {show: true,title : { line : 'Line',bar : 'Bar'},type: ['line', 'bar']}, 
      restore : {show: true, title:'Restore'}, 
      saveAsImage : {show: true, title:'Save'} 
     } 
    }, 
    calculable : true, 
    xAxis : [ 
     { 
      type : 'category', 
      boundaryGap : false, 
      data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] 
     } 
    ], 
    yAxis : [ 
     { 
      type : 'value', 
      axisLabel : { 
       formatter: '{value} $' 
      } 
     }, 
     { 
      type: 'value', 
      axisLabel: { 
       formatter: '{value} %' 
      } 
     } 
    ], 

    series : [ 
     { 
      name:'Net Profit Loss', 
      type:'line', 

      data:[14171.48, 18099.95, 17314.43, 15503.66,26999.20, 49307.32,51494.81,51072.71,56668.29,57705.67], 
      markPoint : { 
       clickable: false, 
       large:true, 
       data : [ 
        {type : 'max', name: 'Income'}, 
        {type : 'min', name: 'Outcome'} 
       ] 
      }, 
      markLine : { 
       data : [ 
        {type : 'average', name: 'Average'} 
       ] 
      } 
     }, 
     { 
      name:'Rate of Return', 
      type:'line', 
      yAxisIndex:1, 
      data:[4.89,6.24, 6.66, 6.20,6.35 ,6.05, 6.25, 6.19,6.13,6.24], 
      markPoint : { 
       clickable: false, 
       large:true, 
       data : [ 
         {type : 'max', name: 'RateMax'}, 
        {type : 'min', name: 'RateMin'} 
       ] 
      }, 
      markLine : { 
       data : [ 
        {type : 'average', name : 'Average'} 
       ] 
      } 
     } 
    ] 
}; 

// use configuration item and data specified to show chart 
myChart.setOption(option); 

、 前もって感謝します。

Answer 1

データの長さを計算し、symbolSizeを手動で設定する必要があります。