echarts折线图中指定点的特殊标记

需求：

在提交记录为0的情况下，数据显示为

原型:

实现思路

1. markPoint 支持自定义图片，echarts中的markPoint标记是有条件的
2. label formatter配合rich实现

实现代码1

使用markPint中的coord进行动态配置，提取出点的坐标

/**
 * 生成标记坐标点集合
 * @params data 数据
 * @params xdata x轴数据
 **/
function createdPointList(data, xdata) {
    data = data || []
    xdata = xdata || []
    var res = []
    data.forEach((itm,idx) => {
        // 未提交的坐标提取
        if (itm === 0) {
            res.push({
                coord: [xdata[idx], itm]
            })
        }
    })
    return res
}
var img = 'image://http://strun.club/upload/source/images/b91aacd034c311e7bec600163e055a18/x.png'
let data = [820, 932, 0, 0, 0, 1000, 1320]
//x轴数据
var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// 标记坐标集合
var markPointList = createdPointList(data, xdata)

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: data,
        label: {
            normal: {
                show: true,
                position: 'top',
                distance: 10,
                // formatter: function(params) {
                //     console.log(params)
                //     return params.data == 0 ? '未提交' : params.data
                // }
            }
        },
        markPoint: {
            symbol: img,
            symbolSize: 18,
            data: markPointList,
        },
        type: 'line'
    }]
};

效果图

实现代码2

使用label中formatter, rich结合实现

var img = 'http://strun.club/upload/source/images/b91aacd034c311e7bec600163e055a18/x.png'
let data = [820, 932, 0, 122, 0, 1000, 1320]
//x轴数据
var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: data,
        label: {
    		// position:[20,-15],
    		position: [-15,-15],
    		show:true,
    		// distance: 10,
    		color:'#AF97FF',
    		formatter: function(params) {
    			if (params.value == 0) {
    				return [
    					'{a|}',
    					'{b|}{c|}'
    				].join('\n')
    			} else {
    				return [
    					'{e|}{a|'+params.value+'}',
    					'{f|}{d|}'
    				].join('\n')
    			}
    		},
    		rich: {
    			a: {
    				color: '#333',
    				lineHeight: 12
    			},
    			b: {
    				width: 12,
    				height: 10
    			},
    			c: {
    				backgroundColor: {
    				    image: img
    				},
    				width: 10,
    				height: 10,
    				borderRadius: 10,
    			},
    			d: {
    				backgroundColor: '#A3EDFF',
    				width: 8,
    				height: 8,
    				borderRadius: 10,
    			},
    			e:  {
    				width: 9,
    			},
    			f:  {
    				width: 13,
    			}
    		}
    	
        },
        type: 'line'
    }]
};

效果图