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后前端妹子,爱编程,爱运营,爱折腾。

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

echarts统计图踩坑合集的更多相关文章

  1. better-scroll踩坑合集

    better-scroll踩坑合集:https://www.jianshu.com/p/6338a8033281

  2. 小程序框架WePY 从入门到放弃踩坑合集

    小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...

  3. tensorflow feature_column踩坑合集

    踩坑内容包含以下 feature_column的输入输出类型,用一个数据集给出demo feature_column接estimator feature_column接Keras feature_co ...

  4. tensorflow踩坑合集2. TF Serving & gRPC 踩坑

    这一章我们借着之前的NER的模型聊聊tensorflow serving,以及gRPC调用要注意的点.以下代码为了方便理解做了简化,完整代码详见Github-ChineseNER ,里面提供了训练好的 ...

  5. 服务器端 CentOS 下配置 JDK 和 Tonmcat 踩坑合集

    一.配置 JDK 时,在 /etc/profile 文件下配置环境变量,添加   #java environment export JAVA_HOME=/usr/java/jdk- export CL ...

  6. arm安装cuda9.0,tensorflow-gpu, jetson tx2安装Jetpack踩坑合集

    因为要在arm(aarch64)架构的linux环境中安装tensorflow-gpu,但是官方tf网上没有对应的版本,所以我们找了好久,找到一个其他人编译好的tensorflow on arm的gi ...

  7. echarts使用踩坑实录之气泡图

    最近想做一个统计文章点击率,评论率和点赞率的功能,听说echarts可以轻易完成它,于是我就选择使用echarts,考虑到我做的模块上文章是没有分类的,所以我的统计是基于一个个点,这一看嘛,感觉散点图 ...

  8. Echarts入门踩坑记录

    关于Echarts,官网上,是这样介绍的,"Echarts,一个使用JavaScript实现的开源可视化库",也就是说,在使用过程中,将其作为普通的JavaScript组件库使用即 ...

  9. Nlog日志出坑合集

    .net core框架下nlog不记录: 1.安装NLog.Web.AspNetCore 2.在Startup.cs文件的方法public void Configure(IApplicationBui ...

随机推荐

  1. jquery 表单重置通用方法

    $("#form_id").find(":input").not(":button,:submit,:reset,:hidden").val ...

  2. PPAPI中使用Chromium的3D图形接口

    使用PPAPI的Graphics 3D接口做了一个小演示样例,鼠标点击插件区域.绘制颜色,效果与ppapi_simple相似. foruok原创,如需转载请关注foruok的微信订阅号"程序 ...

  3. Introduction to IIS Architectures

    https://docs.microsoft.com/en-us/iis/get-started/introduction-to-iis/introduction-to-iis-architectur ...

  4. Vue进阶之事件处理器

    过滤 <html> <head> <meta charset="UTF-8"> <meta name="viewport&quo ...

  5. Linux系统的LOG日志文件及入侵后日志的清除

    UNIX网管员主要是靠系统的LOG,来获得入侵的痕迹.当然也有第三方工具记录入侵系统的 痕迹,UNIX系统存放LOG文件,普通位置如下: /usr/adm - 早期版本的UNIX/var/adm -  ...

  6. 26.angularJS $routeProvider

    转自:https://www.cnblogs.com/best/tag/Angular/ O'Reilly书上的伪代码 var someModule = angular.module('someMod ...

  7. Python带括号的计算器

    带括号的计算器也是第一个自我感觉完成最好的 毕竟真的弄了一个多星期 虽然前期这路真的很难走  我会努力加油  将Python学好学踏实 参考了两位博主的文章 http://www.cnblogs.co ...

  8. DENON AVR-X510BT 功放设置记录

    http://manuals.denon.com/avrx510bt/ap/zh/index.php 环绕模式  : Direct:直接 Sttereo:立体声 Dolby PL  声音模式 电影 : ...

  9. 【2017 Multi-University Training Contest - Team 1 1002】Balala Power!

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6034 [Description] 给你n个字符串; 每个字符串都仅由小写字母组成; 然后,你可以把 ...

  10. FFmpeg的HEVC解码器源码简单分析:解码器主干部分

    ===================================================== HEVC源码分析文章列表: [解码 -libavcodec HEVC 解码器] FFmpeg ...