echarts统计图踩坑合集

简介: 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,//这里是为了突出显示加上的  
                }  
            }
            },
相关文章
|
6月前
|
JSON 前端开发 数据格式
【前端统计图】echarts实现简单柱状图
【前端统计图】echarts实现简单柱状图
44 0
|
11天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
21 0
|
22天前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
6月前
|
JSON 数据格式
Echarts统计图x轴实现拉伸滑动
Echarts统计图x轴实现拉伸滑动
50 1
|
6月前
|
JSON 数据格式
Echarts统计图标题居中显示
Echarts统计图标题居中显示
25 0
|
6月前
|
JSON 数据格式
Echarts统计图自适应
Echarts统计图自适应
35 0
|
6月前
|
前端开发
ajax+json实现echarts多个统计图显示
ajax+json实现echarts多个统计图显示
22 0
|
6月前
|
前端开发
【前端统计图】echarts实现属性修改
【前端统计图】echarts实现属性修改
40 0
|
6月前
|
JSON 前端开发 数据格式
【前端统计图】echarts实现单条折线图
【前端统计图】echarts实现单条折线图
30 0
|
6月前
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
25 0