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

我正在尝试使用echarts配置自动设置标记点，但未成功，我希望pin根据值自动缩小或增大。 大概是这样的：

但我只能展示这个：

根据文档，simbolSize属性可以是数字、数组或函数，默认值为10，如果我将该值设置为150，则下降太大且是静态的，因此我需要根据值缩小或增大

这是我用于属性的文档，这是与属性相关的另一个文档

第一个图像的示例来自链接

这是我的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>

---

感谢您的帮助。

您应该计算数据的长度，并手动设置

符号化。
我想提供另一个解决方案，仅用于解决我的问题

我的要求类似，我有一个矩形符号，里面有一些文字


我希望
FM
节点更小，符号大小由文本长度计算

我所做的是写：

symbolSize:function（rawValue，{data}）{
if（typeof data.name=='undefine'）{
返回0
}
返回[data.name.length*10,40）
}
Hi@Ovilia感谢您的回答，我最终克隆了示例页面，该页面通常使用相同的文件，但我不知道发生了什么，或者它是如何工作的。可能会变得更复杂，并使用一个函数根据数据长度设置symbolSize属性。感谢您的回答。您的解决方案如果您愿意，只需更正代码段中的几个输入错误：
undefined
->
undefined
，然后在
return
语句中添加括号而不是方括号。
  // 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);