question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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)

  1. open this echarts example
  2. 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:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

8reactions
pissangcommented, Apr 24, 2016

Try

markLine: {
    data: [[
        {
            name : "Test",
            xAxis : 0,
            yAxis : 11
        },{
            name :"Test",
            xAxis: 6,
            yAxis : 11
        }
    ]]
}

Data needs to be a 2d array, and xAxis value must not exceeds the xAxis.data.length

2reactions
RaviKLoyicommented, Sep 28, 2020

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! 😃

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found