如何在MarkPoint屬性中使用Echarts自動設置symbolSize Js

我試圖使用echarts配置自動設置MarkPoint，但我還沒有成功，我希望我的引腳自動縮小或增長取決於值。像這樣：如果我如何在MarkPoint屬性中使用Echarts自動設置symbolSize Js

根據文檔的simbolSize屬性可以是數字，陣列或功能，通過默認值是10：

但我只顯示此例如將該值設置爲150，該下拉太大並且是靜態的，所以我需要縮小或增長，具體取決於值。

這是我使用的財產，這是另一個文檔link與財產相關的文檔link。

第一圖像的例子是this鏈接

這是我的HTML代碼：

<!-- 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);

任何幫助，將不勝感激，提前致謝。

來源

2017-06-19 PeterPa1va

您應該手動計算數據的長度並設置symbolSize。

來源

2017-06-29 02:50:35 Ovilia

嗨@Ovilia感謝您的答案，我最終克隆了dinamycally dinamycally和使用相同的文件的例子的頁面，但我不明白究竟發生了什麼或它是如何工作的。也許可能會變得更加複雜，並使用一個函數根據數據長度設置symbolSize屬性。感謝你的回答。 – PeterPa1va

如何在MarkPoint屬性中使用Echarts自動設置symbolSize Js

回答

相關問題