1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > echarts柱形图x轴y轴互换_Echarts如何只改变X轴和Y轴的图表区域的背景颜色

echarts柱形图x轴y轴互换_Echarts如何只改变X轴和Y轴的图表区域的背景颜色

时间:2021-01-08 02:11:03

相关推荐

echarts柱形图x轴y轴互换_Echarts如何只改变X轴和Y轴的图表区域的背景颜色

1、option里面有一个配置项backgroundColor,使用backgroundColor就能设置整个图表的背景颜色,例如将图表背景设置为蓝色

ECharts

*{

margin:0px;

padding: 0px;

}

body,html{

width:100%;

height:100%;

}

// 基于准备好的dom,初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

backgroundColor:"blue", // 设置整体图表的背景颜色

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

效果如下

图片.png

2.如果只想设置图表X轴和Y轴区域的背景颜色,就是一下这个区域

图片.png

此时需要在option中设置grid配置项

option={

.....

grid:{

show:true,

borderColor:"transparent",

backgroundColor:'rgba(63,28,85,0.2)',

},

....

}

此时的效果如下

图片.png

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。