search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.66k stars 19.61k forks source link

Dashed lines do not appear as dashed in the legend. #9552

Open mathiasleroy opened 5 years ago

mathiasleroy commented 5 years ago

It would be nice if the legend symbols adapted to the series symbols.
In my case, dashed lines do not appear as dashed in the legend.

influenza-like illness_ incidence of gp consultations by season

By default we have this big circle in the middle of the line, I got rid of it with 

symbol: 'line', symbolSize:0,
Ovilia commented 5 years ago

@mathiasleroy Yes, that would be a great feature. In fact, we'd like to improve legend style not only with dashed lines, but also other features like line width, stroke styles.

Julien76 commented 5 years ago

Hi, Any update on this feature? I found it quite hard to style the legend properly.

kakusx commented 5 years ago

Same problem.

JerryLeeCS commented 4 years ago

Any update on this?

natalidedik commented 4 years ago

Will it be fixes? That's really look like a shortcoming that have to be fixed!!!

cvetkovivan commented 4 years ago

So, i found one solution. EchartOptions.legend.data[] = {name: '', icon: ''}

You can add any icon to current data in your legend. Exapmle link: codepen. Also you can add svg icon. documantation.

No idea to resovle this problem by any other solution.

UPD: Dashed svg path: 'path://M180 1000 l0 -40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40z, M810 1000 l0 -40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40zm, M1440 1000 l0 -40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40z' Dotted svg path: 'path://M335 1316 c-63 -28 -125 -122 -125 -191 0 -71 62 -164 127 -192 18 -7 58 -13 90 -13 72 0 125 28 168 88 27 39 30 52 30 117 0 65 -3 78 -30 117 -43 61 -95 88 -170 87 -33 0 -73 -6 -90 -13z, M1035 1313 c-76 -40 -115 -103 -115 -188 0 -121 85 -205 205 -205 121 0 205 84 205 205 0 84 -39 148 -112 186 -46 24 -140 25 -183 2z, M1714 1298 c-61 -42 -94 -102 -94 -173 0 -71 33 -131 94 -172 41 -28 57 -33 107 -33 76 0 115 16 161 68 76 84 76 190 0 274 -46 52 -85 68 -161 68 -50 0 -66 -5 -107 -32z'

ghost commented 4 years ago

Yes any update @Ovilia?

ghost commented 4 years ago

My client is asking for this and besides trying to get wild with an image it'd be nice if we could get movement on a real solution.

github-actions[bot] commented 2 years ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

mathiasleroy commented 2 years ago

please don't close this issue

Civilduino commented 2 years ago

this feature is needed and additional flexibility with the legend symbol format, right now is very limited

sovushka-utrom commented 1 year ago

@mathiasleroy,

symbol: 'line', symbolSize:0,

Thank you for this one!

As for the topic, adding

    lineStyle: {
      type: 'dashed',
      width: 1.5, // setting width is important to have regular dashes 
    },

to the legend does the trick along with the line above in series.

mlaffargue commented 3 months ago

Even if it should be the default value as stated in the (documentation), forcing the legend itemStyle to inherit will make dashes appear.

    legend: {
        show: true,
        data: ['serie1'],
        itemStyle: {
            borderType: 'inherit' // Should be the default value
        }
    },...

    series: [{
        name: "serie1",
        itemStyle: {
            borderType: 'dashed'
        },...