echarts——实现大屏数据展示——基础积累(超详细)
echarts——实现大屏数据展示——柱状图+堆叠柱状图+table表格等功能的使用
最近在做大屏数据展示,样式真的超级好看。但是细节处理也是比较麻烦的。
最终效果图如下:
下面对我遇到的几个知识点进行汇总:
1. 横向的柱状图——设置yAxis
的type
为category
即可
var option = {title: {text: ''},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '-80',right: '40',bottom: '0',top: '10',containLabel: true},xAxis: {type: 'value',show: false,boundaryGap: [0, 0.01]},yAxis: {type: 'category',show: false,},series: [{name: '',type: 'bar',data: data,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'transparent'},{offset: 1,color: '#f90'}]),label: {normal: {show: true,position: 'right',formatter: '{c}',color: '#fff'}},barWidth: 20,}]
};
dom.setOption(option);
下面详细解析:
1.1 标题——title
title: {text: '',//主标题subText:'',//副标题
},
1.2 输入移入的效果——tooltip
下面是最简单的效果了,如果需要复杂的效果,需要单独设置
tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}
},
1.3 网格的间距——grid
grid: {left: '-80',right: '40',bottom: '0',top: '10',containLabel: true
},
1.4 X轴:隐藏坐标轴——xAxis
xAxis: {type: 'value',show: false,//隐藏x轴boundaryGap: [0, 0.01]
},
1.5 Y轴:设置横向柱状图样式并隐藏坐标轴——yAxis
yAxis: {type: 'category',show: false,
},
1.6 渐变色:设置series
中的color
参数即可
series: [{name: '',type: 'bar',data: data,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'transparent'},{offset: 1,color: '#f90'}]),label: {normal: {show: true,position: 'right',formatter: '{c}',color: '#fff'}},barWidth: 20,}
]
最终效果图:
2. 堆叠柱状图——设置series
中的stack: 'xxxx'
即可
堆叠柱状图:只要series
中的stack
参数一样,则就可以自动堆叠在一起
2.1 实现堆叠效果
注意:下面代码中的data
和color
都是数组或者对象,因为要实现堆叠效果,则至少要有两组数据才可以。
比如现在的data
格式如下:
data:{'7-14天':[11,22,33,44,55,66,77,88],'15-30天':[111,222,333,444,555,666,777,888],'>30天':[1111,2222,3333,4444,5555,6666,7777,8888]
}
for(let key in data){series.push({name: key,data: data[key],type: 'bar',color: color[key],stack: 'total',barWidth: 40,})
}
上面的效果就可以实现堆叠了,但是如果要实现如效果图中的label
上下摆放展示的话,则需要用下面的方式来处理
2.2 label
的自定义处理——formatter
和rich
的处理
label:{normal: {show: key == 2 ? true : false,position: 'top',color:'#fff',formatter: function (val) {let html = `${val.name}\n`;if (val.value) {html += `{fourIcon|}{four|${val.value}}\n`;}if (data[1][val.dataIndex]) {html += `{twoIcon|}{two|${data[1][val.dataIndex]}}\n`}if (data[0][val.dataIndex]) {html += `{oneIcon|}{one|${data[0][val.dataIndex]}}`}return html;},lineHeight: 16,backgroundColor: '#002262',padding: 10,borderRadius: 6,rich: {one: { color: '#fff', align: 'center', fontSize: 14,},two: { color: '#fff', align: 'center',fontSize:14 },three: { color: '#fff', align: 'center', fontSize:14 },four: { color: '#fff', align: 'center', fontSize: 14 },oneIcon: {height: 10,align: 'left',width: 10,borderRadius: 10,backgroundColor: '#3CDE81',margin: [0,10],},twoIcon: {height: 10,align: 'left',width: 10,borderRadius: 10,backgroundColor: '#f90',margin: [0, 10],},fourIcon: {height: 10,align: 'left',width: 10,borderRadius: 10,backgroundColor: '#f00',margin: [0, 10],}}}
},
3.警戒线——markLine
的使用及双坐标轴的处理
3.1 双坐标轴 需要通过yAxisIndex
来设置
一般双坐标轴的话,需要yAxis
和series
都是数组的形式。然后在series
中指定yAxisIndex
为对应yAxis
的索引即可。
我这边是循环遍历的数组,所以部分代码如下:
series.push({name: legend ? legend[index] : '',data: item,type: num ? 'bar' : (index < 2 ? 'bar' : 'line'),yAxisIndex: index,barGap: 1.1,color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: 'transparent'},{offset: 0.5,color: color[index]}]),markLine: markLineArr && index == 0 ? {symbol: 'none',data: [{ yAxis: markLineArr[0], lineStyle: { color: '#00FF55', type: 'solid' }, label: { color: '#00FF55', fontSize: 14, position: 'start' } }]} : (markLineArr && index == 1 ? {symbol: 'none',data: [{ yAxis: markLineArr[1], lineStyle: { color: '#FF0000', type: 'solid' }, label: { color: '#FF0000', fontSize: 14, position: 'end' } }]} : {}),label: {normal: {show: true,position: 'top',formatter: '{c}',color: '#fff'}},symbol: 'none',smooth: true,barWidth: 20,
})
3.2 警戒线markLine
的处理方法
如上的效果图:左侧坐标轴对应一条警戒线,绿色。右侧坐标轴对应一条警戒线,红色,因此需要单独判断并对颜色样式进行处理。
markLine: markLineArr && index == 0 ? {symbol: 'none',data: [{ yAxis: markLineArr[0], lineStyle: { color: '#00FF55', type: 'solid' }, label: { color: '#00FF55', fontSize: 14, position: 'start' } }]
} : (markLineArr && index == 1 ? {symbol: 'none',data: [{ yAxis: markLineArr[1], lineStyle: { color: '#FF0000', type: 'solid' }, label: { color: '#FF0000', fontSize: 14, position: 'end' } }]
} : {}),
4.动态轮播数据——一条一条的轮播展示
setInterval(function () {xAxis.shift();data.forEach((item, index) => {item.shift();})sum += 1;if (xAxisArr[sum]) {xAxis.push(xAxisArr[sum])data.forEach((item, index) => {item.push(dataArr[index][sum]);})} else {sum = 0;xAxis.push(xAxisArr[sum])data.forEach((item, index) => {item.push(dataArr[index][sum]);})}let series = [];data.forEach(item => {series.push({data: item})})dom.setOption({xAxis: {data: xAxis},series: series});
}, 10000);
间隔一定时间,series
和xAxis
的数据,开头shift()
删除一项,后面push
添加一项,然后通过setOption
来设置,就会实现动态轮播的效果,按说一次轮播多条也是可以的,但是我这边没有实现,二维数组搞得我有点懵。
5.table
表格中的单元格回根据内容的多少进行撑开,禁止撑开的方法
table{width: 100%;table-layout:fixed;
}
完成!!!多多积累,多多收获!!!
echarts——实现大屏数据展示——基础积累(超详细)相关推荐
- vue疫情大屏数据展示+数据导出+地图图片下载
不废话,先上效果图 审美有限 下午5点开工 去掉吃饭时间 我的审美也只能让我做到这一步哈哈 有需要可以去github下载 github上代码是不加注释的 看注释在这个文章 github地址 https ...
- 大屏数据展示,5.5寸大屏幕手机更受消费者喜爱
智能手机从出现到热销,再到主导人们的生活,并没有花费太长时间.功能越来越多,屏幕越来越大,人们曾经一度认为手机的尺寸可能无限变大,乃至于取代电脑.但是,人们对手机便携性的需求毕竟还是相当高的,所以手机 ...
- 大数据 / 大屏数据展示模板
大数据 / 大屏数据展示模板:https://gitee.com/hnustbd/DaShuJuZhiDaPingZhanShi/tree/master/
- 使用开源Datav——结合vue实现大屏数据展示案例
Datav简介: 组件库基于Vue ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用. 文档链接:Datav-Vue 大屏数据展示组件库 代码下载:datav大屏数据展示 ...
- 拼接大屏数据展示_大屏数据可视化设计注意事项
大屏数据可视化是以大屏为主要展示载体的数据可视化设计.大屏的特点,使得在用户观感上留下独特的印象,同时,大屏所具备储存更大的信息量,对于大屏企业来说重点主要在于将信息全面的显示在屏幕上,关注于画质的清 ...
- 拼接大屏数据展示_可视化大屏的UI设计是根据哪几个方面来进行?
随着大数据产业的发展,越来越多的公司开始意识到数据资源的管理和运用,特别是一些中.大型企业,在日常中会经常用到可视化大屏,这个时候就需要UI设计师能呈现出相应的视觉效果.下面,就给大家介绍一下可视化大 ...
- 基于VUE+Echarts大屏数据展示150套 (集合)
- 拼接大屏数据展示_AOC×泰凡科技丨用拼接屏,实现大数据可视化展示
摘要:创新驱动未来,引领智慧发展 随着互联网+及信息产业的发展,大数据是继云计算.物联网之后信息技术领域又一颠覆性变革.大数据已逐渐覆盖各行业领域,不断推动行业发展进程.作为一家专注于大数据运营的科技 ...
- 使用echarts开发电子屏数据展示页面
背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
最新文章
- 牛逼!原来分布式事务可以这样玩!
- penalized_tanh可视化
- spring boot + zookeeper 注册中心
- 【Python】Python入门-字符串初相识
- Mycat高级进阶---Mycat注解
- python integer怎么用_Python core.integer方法代码示例
- C#第一课--hello world
- 游侠原创:VMware ESXi 5安装图文教程
- excel文件损坏修复绝招_高手都在用的PDF转换PPT、WORD、EXCEL工具
- imagej得到灰度图数据_老司机带你解锁ImageJ的各种技术姿势
- matlab打开图片无效的文件名,Matlab - 使用textscan错误(文件标识符无效)
- 喧嚣过后,揭秘《咪蒙教你月薪5万》背后的真相
- ThingJS学习总结
- 磨洋工 warm-chair attrition
- springboot 整合工程,不同包中类名相同冲突问题解决
- 社区中无法创建帖子chatter
- [读论文] Electric Drive Technology Trends, Challenges, and Opportunities for Future Electric Vehicles
- C语言的 字符串 和 字节串 互转
- MySQL8数据库知识点概述
- Spring(3)--Spring示例再演示