如何在MarkPoint属性中使用Echarts自动设置symbolSize Js

Z时代
2024-01-10
分类：问答

我试图使用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);