echarts 背景颜色透明和提示框背景颜色与透明度

echarts 背景颜色透明

描述:

使用'dark'系列主题初始化控件,控件会自带黑色背景色,与页面整体风格不符合,所以需要将其背景颜色设置为透明.

官网文档:

http://echarts.baidu.com/option.html#backgroundColor

方法一:

var option={
    backgroundColor:'rgba(128, 128, 128, 0.1)' //rgba设置透明度0.1
}

方法二:

var option={
    backgroundColor:'' //设置无背景色
}

echarts调节提示框背景颜色与透明度

效果图：

js代码：

//提示框
            tooltip: {
            	//触发类型：坐标轴触发
            	trigger: 'axis',
                backgroundColor:'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
                color:'black',
                borderWidth:'1',
                borderColor:'gray',
                textStyle:{
                	color:'black',
                }
            	//extraCssText:'background:rgba(0, 0, 0, 0.5);'
            },

RGBA(R,G,B,A)说明：

取值：

R：红色值。正整数|百分数
G:  绿色值。正整数|百分数
B：蓝色值。正整数|百分数
A：Alpha透明度。取值0~1之间。

echarts提示框tooltip背景色设置为透明

tooltip: {
    triggerOn: "item",
    backgroundColor: "transparent",
    borderColor:'transparent',
    padding: 0,
    borderWidth:0,
}

设置为透明后发现仍有透明边距，于是将padding设置为0即可。