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]
]
}
]
};
5条答案
按热度按时间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
bmvo0sr52#
How should I fulfill my needs??
eblbsuwk3#
One (and maybe only) option is to experiment with custom.series, especially polygon which has fill color.
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?
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