echarts添加背景图片,背景色及水印

2022-1-9学习记录

添加背景图

遇到的问题：

添加本地图片为背景图片时不显示图片

解决：

在templates同级目录下创建一个static目录，将图片文件放置此文件夹内即可

法一：

在div标签内添加background:url(./static/index.jpg)

法二：

graphic: [
        {
            type: 'image', // 图形元素类型
            id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
            right: 'center', // 根据父元素进行定位 （居中）
            bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
            z: 0,  // 层叠
            bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
            style: {
                image: './static/test.jpg',
                width: 2200,
                height:400
            }
        }
    ],

添加文字水印：

graphic: [
           {
            type: 'text',
            silent:true,
            z: 100,
            left: 'center',
            top: 'middle',
            style: {
                   fill: '#ffffff80',   //颜色ffffff白色，不透明度80%
                   text: ['此为水印'].join(''),
                   fontSize:50
                    }
            }
             ],

添加背景色：

var option = {
              backgroundColor: '#ffff0050',//背景色

}