路漫漫远修兮-Echarts X轴插入背景图片

1. 需求：为了制作天气变化图表，除了希望在x轴显示日期外，还希望在日期下方显示天气图标。
2. option-xAxis配置：

xAxis: {
     ...               
     formatter: function(name) {
        //name 12/1  12号1点 通过小时作为标识 数据格式按照自己的来
        return [name + "\n\n{" + name.split("/")[1] + "|}"].join("\n");
     },
     rich: {
            //1 与上面小时对应
          1：{
                backgroundColor: {//插入背景图片
                    image: 'xxx/xxx.jpg'        
               }
          }
     },
     ...
}

​

    3.官网例子 

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

 

座右铭：站在别人的思想上，看见自己的不足，传播错误的经验，愿君不重蹈覆辙

由于受限于本人经验，难免不足，如有建议，欢迎留言交流

说明：如果喜欢，请点赞，您的鼓励是本人前进最好的动力