echarts统计图踩坑合集 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：页面显示空白的修改当一切数据正常，控制台也没有报错的时候，但数据就是不显示在页面上，这个时候，要加上固定的宽度即可。

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,//这里是为了突出显示加上的 } } },