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

Question

我正在尝试使用 echarts 配置自动设置 MarkPoint，但我没有成功，我希望我的 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>

这是我的 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手动设置。

Answer 2

我想提供另一种解决方案，我只是用来解决我的问题。

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

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

我要做的是写：

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