使用echarts创建一个特殊的y轴覆盖类型柱状图
时间:2020-01-08
本文章向大家介绍使用echarts创建一个特殊的y轴覆盖类型柱状图,主要包括使用echarts创建一个特殊的y轴覆盖类型柱状图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在项目中遇到这样的需求,就是需要在连续的一段时间里边显示用户某一天的使用量和总量的占比,要很好的体现这样的效果,就需要使用柱状图,通过偏移的方式将显示使用的覆盖到总量的上层,这样讲就能直观的看到比例,效果图如下:
在option里边的x轴、y轴以及数据series的配置如下:
xAxis: { type: 'value', axisTick : {show: false}, axisLine: {show: false}, axisLabel: {show: false}, splitLine: {show: false}, }, yAxis: [ //因为y轴需要显示总数和每日使用的数据,所以这里需要配置两个几乎相同的类目轴 { type: 'category', axisTick : {show: false}, axisLine: {show: false}, axisLabel: { //这里只需要配置一次就行,在y轴的显示是一样的 show: true, color: '#3aa0ee', fontFamily: 'Microsoft YaHei', fontWeight: 'bold', }, data: ['9月21日','9月22日','9月23日','9月24日','9月25日','9月26日','9月27日','9月28日'] }, { type: 'category', axisLine: {show:false}, axisTick: {show:false}, axisLabel: {show:false}, splitArea: {show:false}, splitLine: {show:false}, data: ['9月21日','9月22日','9月23日','9月24日','9月25日','9月26日','9月27日','9月28日'] }, ], series: [ { name: '总空间', type: 'bar', itemStyle:{ normal: { show: true, color: '#293a43', barBorderRadius:50, } }, barWidth: '45%', //柱子的宽度 barGap:'5%', //不同系列的柱间距离 silent: true, data: [200, 200, 200, 200, 200, 200, 200, 200], }, { name: '已使用(单位:TB)', type: 'bar', yAxisIndex:1, itemStyle:{ show: true, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#00ddff' }, { offset: 1, color: '#007db8' }]), barBorderRadius:5, borderWidth:0, borderColor:'#333', shadowColor: '#000', shadowBlur: 100, }, label: { show: true, formatter: '{c}TB已使用', fontSize: 10, color: '#fff', position: 'insideLeft', padding: [2,0,0,2], }, barWidth: '60%', barGap:'0%', data: [118.5, 117.9, 116.3,115.6, 114.1, 113.4, 112.2, 111.5].reverse() } ]
原文地址:https://www.cnblogs.com/kdiekdio/p/12166608.html
- python类中super()和__init__()的区别
- Python正则表达式:最短匹配
- 转--Go时间格式化和类型互换操作
- Python标准库(1) — itertools模块
- Linux笔记:使用Vim编辑器
- 一步一步学lucene——(第二步:示例篇)
- 类属性的延迟计算
- 一步一步学lucene——(第三步:索引篇)
- 在Python应用中使用MongoDB
- Python检查xpath和csspath表达式是否合法
- 一步一步学lucene——(第四步:搜索篇)
- Python爬虫代理IP池
- SSDB图形界面管理工具:phpssdbadmin安装部署
- [Go 语言社区] 初始化内存数据--游戏列表数据
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Apache Kylin VS Apache Doris
- 「R」绘制分组排序点图
- 初识ABP vNext(8):ABP特征管理
- C++实现epoll echo服务器
- 相关性 ≠ 因果性,用图的方式打开因果关系
- 斗转星移 | 三万字总结Kafka各个版本差异
- Hadoop支持Lzo压缩配置及案例
- Spark SQL快速入门系列之Hive
- 手把手学机器学习算法中数据预处理(附代码)
- 「Workshop」第十六期:Pandas 使用介绍
- .net core学习笔记,组件篇:服务的注册与发现(Consul)初篇
- Android程序员想进大厂?算法很重要!2020年必学的 10 大算法关注一下
- PWN:Largebin Attack
- 实现LRU算法
- 逻辑漏洞之无密码登录(vlcms)