echarts 设置折线图的areaStyle,指定origin,想设置为斜线

t40tm48m  于 4个月前  发布在  Echarts
关注(0)|答案(5)|浏览(102)

What problem does this feature solve?

我想实现这种,斜线的区域。

What does the proposed API look like?

option = {
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%']
},
visualMap: {
type: 'piecewise',
dimension: 0,
pieces: [
{
gt: 1,
lt: 3,
color: 'rgba(0, 0, 180, 0.4)'
}
]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 1
},
markLine: {
symbol: ['none', 'none'],
label: { show: false },
data: [{ xAxis: 1 }, { xAxis: 3 }]
},
areaStyle: {
origin: 560,
},
data: [
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-10-18', 100]
]
}
]
};

vwhgwdsa

vwhgwdsa1#

@Jesssssfish It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED

TITLE

Set the areaStyle of the line chart, specify origin, and set it to a slash

bmvo0sr5

bmvo0sr52#

How should I fulfill my needs??

eblbsuwk

eblbsuwk3#

One (and maybe only) option is to experiment with custom.series, especially polygon which has fill color.

mwyxok5s

mwyxok5s4#

One (and maybe only) option is to experiment with custom.series, especially polygon which has fill color.

Thank you. I tried using custom bezierCurve, but the effect was not very ideal. Is there a better way? Or can I achieve my requirements by modifying the source code?

41zrol4v

41zrol4v5#

推荐使用自定义系列,或者echarts的扩展机制来自已定义一个series,实现这个系列的折线阴影的样式。不过我发现了一个比较有趣的点,能够勉强实现你的需求,但是这个办法用起来非常僵硬,仅供娱乐。。😄
https://echarts.apache.org/examples/zh/editor.html?c=line-simple&code=PTAEjAlRW60WUTCcg1BYCYcfjCb8YdgtAhbmw8PqHvlQp3KB52oA3OgORmxSCADOYAh2gG8oCwAUCKIGfRgowa6CDkQBYAu_AA4BnAFwgApgGNeAQwBO_EQDo5QubMkqA9goDmwAF69gOofwCWOgHYqBAWwA2AYmk6ne5q0AsaYEd9QCN0wHvPDHJmdxsRflAhSxlJAHdLEUkAYQ89AH1FSTlQAF5QAG9mUDLyitYoYHo4DEBnRUA6VMBOh0AHU0ARv1KK7vdPBQBlfnNxUABtLu7ukqZJ2dBWQBpzQCCg5sAKdUBNv0As7UBgYMAXtQAKbkBoOQDAC5tAKcSASgxAPzdwQBXrQFl5QDt_Cbny1gRADj0CQApXUEAOATLZoYQAu8RhAES-gFR9eagfagwAK6oBwC0AVHKtUAAWlAAEZLoBcAkAhdGAdO83u95mACIBlv0AECqAZ-VAOXygD-1QAWEYAwF0Ax5EAP1J7x0ADM-Sl-GJQAAGWEANgANDy5r09CKAOT8BRySIaBSSGz8RWy7oAXxlMzJxT1k3lCiVBgARnJ9gAmACsoqlYtd2IAHC6xSoACyXRVGk3lfmCyTCsWSs3lQ3RsrTYNlC1W_S2h3O13ez3e0V-gNBxOhoUigDMUeNZNjFfeCcLAuLoDLYGlcfKydAytV6py2t11bm-ujAF0C3NWAAPUAATzK4_t0_nv0ApubMwBcnoAAORRgDsPTa0OiANCMoBhAJ2mgEQVU-AecTo6w9oA5uUjWOxgBh_wAfboBlfUAcXKrRmAI31AKDKuyAEtugC0crcDzXmAgDR8oAQZoQaA44iuKU6IfB9oitiC4oWum63vsOaXIADEr7NimbXJeT6AM7KZ6AFxygAsNoAznq3oAZ7qAAH6tLRghbrRshXH9t0c6ISoTqjrMU5oTiImTPwU5CJISpOJYNi5Aofb6gA3MwzDmFYtgFKaxrjgAguOyQirWZTSbJSrSHI_CSPoehToGbwACa2XIIqjIqACytiBh2AAqACukj-YqADqkguWFAW8EFYUAGIKJYYX9LZqVBTYipDl0VZlFOxmmfpFSWXJHYAG5yE4IV9mUeWgCkyWSCM4zVuZ5RufwHljNiGagPaJbeva9q-q69qeu6JaOu6voAOxjRKoojjyrAiFODjWh4_SWEYZUujyIi8DoCT9Otm1OCKfJVSkkmgDkciDFOThle1FSHcdIoqiFt1lKwgB90c8_jBGEfFJhkloxHE0iJMkaTg9kmpyDy9UlTJZWKgpSm1TGXQ5Uw6lAA

相关问题