How to set symbolSize automcatically in MarkPoint property using Echarts Js

Question

I am trying to set the MarkPoint automatically using echarts configuration, but i have not succed, i want my pin to automatically shrink or grow depending on the values. Something like this:

But i could only display this:

According to the documentation the simbolSize property could be a number, array or a function, by default the value is 10, if i set the value for example to 150 the drop is too large and is static, so i need to shrink or grow depending on the values.

This is the documentation link that i use for the property and this is another documentation link related to the property.

The example of the first image is from this link

This is my HTML code:

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

And this is my Javascript configuration:

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

Any help would be appreciated, thanks in advance.

Answer 1

I want to provide another solution that I just use to resolve my problem.

My requirement is similar, I have a rectangle symbol and have some text inside it.

I want the FM node to be smaller and the symbol size is calculated by the length of text.

What I do is to write:

symbolSize: function (rawValue, {data}) {
    if (typeof data.name === 'undefined') {
       return 0
    }
    return [data.name.length * 10, 40]
}

Answer 2

You should calculate the length of your data and set symbolSize manually.