鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ echarts markline如何將兩條線顏色分別設(shè)置

echarts markline如何將兩條線顏色分別設(shè)置

option = {

xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
    type: 'value'
},
series: [{
    
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    markLine: {
        itemStyle: {
            normal: { lineStyle: { type: 'solid', color: '#000' }, label: { show: true, position: 'end' } },
        },
        data: [
            {
                name: '平均線',
                // 支持 'average', 'min', 'max'
                type: 'average'
            },
            {
                name: 'Y 軸值為 100 的水平線',
                yAxis: 100
            }
        ]
    },
}]

};

clipboard.png

回答
編輯回答
醉淸風(fēng)
關(guān)于解決方法，代碼里的注釋有說明
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        markLine: {
            itemStyle: {
                normal: { 
                    lineStyle: {
                        type: 'solid',
                        // 這兒設(shè)置的顏色是公共配置，如需單獨(dú)配置，請在data里配置
                        // color: '#000',
                    }, 
                    label: { 
                        show: true,
                        position: 'end'
                            
                    }
                },
            },
            data: [
                {
                    name: '平均線',
                    type: 'average',
                    // 單獨(dú)配置每條線的樣式
                    lineStyle: {
                        color: 'green'
                    }
                },
                {
                    name: 'Y 軸值為 100 的水平線',
                    yAxis: 100,
                    // 單獨(dú)配置每條線的樣式
                    lineStyle: {
                        color: 'red'
                    }
                }
            ]
        },
    }]
};

效果展示

clipboard.png

2017年12月2日 04:16