echarts统计图踩坑合集

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

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。