标签归档:echarts

Echarts3 中设置自定义的 markline

在折线上,想要添加一条阈值标线,在echarts2中,这样写:

var category = [....];
var threshold = 80;

var option = {
    xAxis : [{
            type : 'category',
            data : category
        }
    ],
    yAxis : [{
            type : 'value',
            min : 0,
            max : 100
        }
    ],
    series : [
        type : 'line',
        markLine : {
            data : [
                [{
                        name : '阈值',
                        value : threshold,
                        xAxis : 0,
                        yAxis : threshold
                    }, {
                        xAxis : category.length,
                        yAxis : threshold
                    }
                ]
            ]
        }
    ]
};

在2中,x轴是使用类目的索引,要从最左侧画到最右侧,就使用从0到 category.length 一直画就行。

在echars3中,不再建议这样的写法(文档上说不建议,我这样写却是啥也不显示啊),而是改成了:

var category = [....];
var threshold = 80;

var option = {
    xAxis : [{
            type : 'category',
            data : category
        }
    ],
    yAxis : [{
            type : 'value',
            min : 0,
            max : 100
        }
    ],
    series : [
        type : 'line',
        markLine : {
            data : [
                [{
                        name : '阈值',
                        value : threshold,
                        coord : [category[0], threshold]
                    }, {
                        coord : [category[category.length - 1], threshold]
                    }
                ]
            ]
        }
    ]

};

在3中,使用的是坐标系的坐标位置 [x, y]。这时候,x轴上使用的不再是索引,而是类目的值,所以这里取第1个值(category[0])和最后一个值(category[category.length – 1])来作为x坐标的起始点。