How to use markline, with category X-axis ?
See original GitHub issue问题简述 (One-line summary)
How to draw a line using markline
at specific Y-axis value in a line graph
版本及环境 (Version & Environment)
- ECharts 3.0 (ECharts version):
- Google chrome (Browser version):
- OS X (OS Version):
重现步骤 (Steps to reproduce)
- open this echarts example
- use the below options
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{
name : "Test",
x : 0,
y : 11
},{
name :"Test",
x: MAXNUMBER,
y : 11
}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
期望结果 (Expected behaviour)
markLine: {
data: [
{
name : "Test",
x : 0,
y : 11
},{
name :"Test",
x: MAXNUMBER,
y : 11
}
]
}
markline
should draw a line at Y-axis value 11
. But it is not working. It is not clear from the documentation about how to use the markline
when X-axis is of category type.
可能哪里有问题 (What went wrong)
ECharts配置项 (ECharts option)
Same as it is provided in steps-to-reproduce section.
其他信息 (Other comments)
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:13 (4 by maintainers)
Top Results From Across the Web
ECharts - Unable to create a vertical marker line on time axis ...
With xaxis type as time you can create vertical markLines by specifying the xAxis value as date string in markline configuration.
Read more >Charts configure - pyecharts
markLine -markPoint: A graphic markup component that marks the specified ... The display interval of the x-axis scale labels is valid in the...
Read more >OH3 Charts using markLine - different symbols
Hi I have been using the Charts feature and have made some progress ... But I am stuck on how to set the...
Read more >ECharts · Doc - GitHub Pages
A fixed reference line for the measurement of Cartesian coordinates. It can be divided into three types: category axis, value axis and time...
Read more >echarts-markline - JSFiddle - Code Playground
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.1/echarts.js"></script>. 3. . 4. <body>. 5. <div id="main" style="width: 600px;height:400px ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Try
Data needs to be a 2d array, and xAxis value must not exceeds the
xAxis.data.length
After searching the web, I found something, and it worked for me. We should import markLine in the component. The same for markPoint as well.
import ‘echarts/lib/component/markLine’ import ‘echarts/lib/component/markPoint’
Happy Coding! 😃