欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

分享六款echarts统计图的样式修改

程序员文章站 2022-06-08 07:57:46
...
echarts图形的创建比较简单,直接引用Javascript即可。使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新。第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易。第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便。

1:折线图条的颜色修改

series : [ {
name : ‘SBP(收缩压)’,
type : ‘line’,
itemStyle : {
normal : {
lineStyle:{
color:’#f73d31’
}
}
},
data : y_data
},

2:标题颜色属性修改

将图标主标题颜色修改成红色,只需要在 title:里面添加 textStyle: {color: ‘red’ }即可
图片.png

title: {
text: ‘平均耗时(分钟)’,
textStyle: {
color: ‘red’
},
},

3:背景颜色的设置

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

4:页面显示空白的修改

当一切数据正常,控制台也没有报错的时候,但数据就是不显示在页面上,这个时候,要加上固定的宽度即可。

5:移动端的适配问题,适配不同的手机屏幕

有多个图表的时候,在var option = {}后面加上这样的一段代码即可,图标会随着显示屏幕尺寸大小改变而改变。

window.onresize = function () {
myChart1.resize();
       myChart2.resize();      
        myChart3.resize();        
        }

6:xy轴坐标轴颜色的修改

x轴坐标:

xAxis: {
type: ‘value’,
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

y轴坐标:

yAxis: {
type: ‘category’,
data: [‘SA服务’, ‘洗车’, ‘总检’, ‘喷漆’, ‘钣金’, ‘机修’, ‘等号’],
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [’#e33b38’]
}
},
nameTextStyle: {
color: [’#e33b38’]
},
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

以上是图表的属性值修改,欢迎阅读借鉴!

以上就是分享六款echarts统计图的样式修改的详细内容,更多请关注其它相关文章!

相关标签: echarts