echarts统计图踩坑合集
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：页面显示空白的修改
当一切数据正常，控制台也没有报错的时候，但数据就是不显示在页面上，这个时候，要加上固定的宽度即可。
<div id="main2" style=" width: 21.5rem; height: 13rem;"></div>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,//这里是为了突出显示加上的
}
}
},原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.07.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录