百度的echarts 能否给 markLine 的label 添加背景？

2019独角兽企业重金招聘Python工程师标准>>>

项目中遇到如下图的需求

查阅echarts配置项文档发现似乎没有markLine label的样式选项

请问怎么才能给label增加背景呢？

附：

在线echarts gallery代码
http://gallery.echartsjs.com/…

echarts配置项文档
http://echarts.baidu.com/opti…

参考：https://segmentfault.com/q/1010000013784396

var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';
var gridBgColor = '#f3f3f3';


// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
window.data0 = splitData([
    ['2013/5/16', 2221.34,2251.81,2210.77,2252.87],
    ['2013/5/17', 2249.81,2282.87,2248.41,2288.09],
    ['2013/5/20', 2286.33,2299.99,2281.9,2309.39],
    ['2013/5/21', 2297.11,2305.11,2290.12,2305.3],
    ['2013/5/22', 2303.75,2302.4,2292.43,2314.18],
    ['2013/5/23', 2293.81,2275.67,2274.1,2304.95],
    ['2013/5/24', 2281.45,2288.53,2270.25,2292.59],
    ['2013/5/27', 2286.66,2293.08,2283.94,2301.7],
    ['2013/5/28', 2293.4,2321.32,2281.47,2322.1],
    ['2013/5/29', 2323.54,2324.02,2321.17,2334.33],
    ['2013/5/30', 2316.25,2317.75,2310.49,2325.72],
    ['2013/5/31', 2320.74,2300.59,2299.37,2325.53],
    ['2013/6/3', 2300.21,2299.25,2294.11,2313.43],
    ['2013/6/4', 2297.1,2272.42,2264.76,2297.1],
    ['2013/6/5', 2270.71,2270.93,2260.87,2276.86],
    ['2013/6/6', 2264.43,2242.11,2240.07,2266.69],
    ['2013/6/7', 2242.26,2210.9,2205.07,2250.63],
    ['2013/6/13', 2190.1,2148.35,2126.22,2190.1]
]);

window.currentPriceData = data0.values.map(v => v[0])


function splitData(rawData) {
    var categoryData = [];
    var values = []
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}

window.calculateMA = function (dayCount) {
    var result = [];
    for (var i = 0, len = data0.values.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data0.values[i - j][1];
        }
        result.push(sum / dayCount);
    }
    return result;
}



option = {
    backgroundColor: gridBgColor,
    title: {
        text: '上证指数',
        left: 0
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
    },
    grid: {
        left: '5%',
        right: '15%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        data: data0.categoryData,
        scale: true,
        boundaryGap : false,
        axisLine: {onZero: false},
        splitLine: {show: false},
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax',
        axisTick: {
            // show: false,
            inside: true
        },
        axisLabel: {
            align: "center",
            showMinLabel: false
        }
    },
    yAxis: {
        position: 'left',
        // offset: 60,
        scale: true,
        // splitArea: {
        //     show: true
        // },
        splitLine: {show: false},
        axisTick: {
            // show: false,
            inside: true
        },
        axisLabel: {
            inside: true
        }
    },
    dataZoom: [
        // {
        //     type: 'inside',
        //     start: 50,
        //     end: 100,
        //     zoomLock: true
        // }
        // ,{
        //     show: true,
        //     type: 'slider',
        //     y: '90%',
        //     start: 50,
        //     end: 100
        // }
    ],
    series: [
        {
            name: '日K',
            type: 'candlestick',
            data: data0.values,
            itemStyle: {
                normal: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                }
            },
            markLine: {
                symbol: ['none', 'none'],
                // symbolSize: [10, 80],
                // symbolOffset: [60, 50],
                data: [
                    // {
                    //     name: 'min line on close',
                    //     type: 'min',
                    //     lineStyle: {
                    //         type: "solid"
                    //     },
                    //     valueDim: 'close'
                    // },
                    // {
                    //     name: 'max line on close',
                    //     type: 'max',
                    //     lineStyle: {
                    //         type: "solid"
                    //     },
                    //     valueDim: 'close'
                    // }
                ]
            }
        },
        {
            name: 'currentPrice',
            type: 'line',
            data: data0.values.map( v => v[0]),
            smooth: true,
            lineStyle: {
                normal: {opacity: 0.1}
            },
            markLine: {
                silent: true,
                symbol: ['rect'],
                lineStyle: {
                    type: "solid"
                },
                data: [
                    [{
                        symbol: 'arrow',
                        yAxis: 2290.1,
                        xAxis: '2013/6/13',
                        x: '90%',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '2290.1'
                            }
                        },
                        name: 'Y轴值为2290.1 的水平线'
                    }, 
                    {
                        symbol: 'none',
                        x: '5%',
                        yAxis: 2290.1
                    }]
                ]
            }
        }

    ]
};

转载于:https://my.oschina.net/u/1260221/blog/1926716