echarts Set symbol for the end point of mark line when drawing horizontal or vertical mark lines alongside x or y axis.

vmdwslir  于 5个月前  发布在  Echarts
关注(0)|答案(5)|浏览(69)

What problem does this feature solve?

I want to draw a horizontal mark line which is parallel to the y-axis. It should be ranged from the min value to the max value of the y-axis. What I did is:

markLine: {
   data: [ { name: 'xxxx', xAxis: 2 } ]
}

With this approach, I am not able to set symbol styles for the endpoint of this mark line. Because when I provide an array with only xAxis, the mark line won't be shown.

markLine: {
   data: [ 
      [ { name: 'xxxx', xAxis: 2 , symbol: 'rect'} ,
        { name: 'xxxx', xAxis: 2, symbol: 'arrow' }]
   ]
}

I don't want to provide specific yAxis values for both of them.

What does the proposed API look like?

Mark line should allow us to provide styles for the start point and endpoint of a mark line is this case.

yqlxgs2m

yqlxgs2m1#

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org . Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list .

Have a nice day! 🍵

lf3rwulv

lf3rwulv2#

Hey, I'm having a similar problem, are there any updates?

p4tfgftt

p4tfgftt3#

Hi, I'd love to see this resolved, too. Is this considered a worthy feature by the maintainers?

bwntbbo3

bwntbbo34#

I managed to find a workaround which makes this use case work, but an elegant implementation would certainly be welcome (and probably more future-proof). The trick is to define a global symbol for all markLines in series and then disable the start point in the data array:

{
  type: 'line',
  name: 'myLine',
  markLine: {
    symbol: 'your custom symbol',
    data: [
      {
        name: 'name',
        xAxis: 1,
        symbol: 'none', // <- disable the start point symbol here
      }
    ]
  }
}

The downside to this approach, though, is that you can only define one symbol per set of data, so if you need to render more markLines with different symbols, you need to add them as multiple entries to the series. Please someone correct me if there is a better solution.

ruyhziif

ruyhziif5#

I managed to find a workaround which makes this use case work, but an elegant implementation would certainly be welcome (and probably more future-proof). The trick is to define a global symbol for all markLines in series and then disable the start point in the data array:

{
  type: 'line',
  name: 'myLine',
  markLine: {
    symbol: 'your custom symbol',
    data: [
      {
        name: 'name',
        xAxis: 1,
        symbol: 'none', // <- disable the start point symbol here
      }
    ]
  }
}

The downside to this approach, though, is that you can only define one symbol per set of data, so if you need to render more markLines with different symbols, you need to add them as multiple entries to the series. Please someone correct me if there is a better solution.

thanks for sharing, it works for me too

相关问题