echarts统计图踩坑合集

王小婷

发布于 2025-05-18 05:37:54

5300

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

1：折线图条的颜色修改

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

2：标题颜色属性修改

将图标主标题颜色修改成红色，只需要在 title:里面添加 textStyle: {color: 'red' }即可

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