您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

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

2024/3/28 12:53:13发布13次查看
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统计图的样式修改的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product