使用ECharts实现状态区间图
来源:互联网 发布:pkpm节能软件 编辑:程序博客网 时间:2024/05/17 09:13
需求背景
假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态:y轴用于展示各网口,x轴用于展示时间(分钟),使用条形图的不同颜色来表示不同时间区间段的状态,使用深蓝、浅蓝、橙色、红色
分别代表正常、繁忙、故障、离线
四种状态。以WAN0为例,图中则表示了0~10分钟为正常
,10~25分钟为繁忙
,25~45分钟为故障
,45~60分钟为离线
。
根据此图,很容易想到可以用条形图试试。但后来发现,如果用堆叠条形图,则每种状态在每一个网口对应的图形中只能出现一次,这不能实现需求。于是继续查阅echart官网示例,终于在自定义类型
图表中找到了一个相似的示例,地址如下:
http://echarts.baidu.com/demo.html#custom-profile
通过研究示例代码并进行一番改造,终于实现了上述需求。
在实现的过程中遇到了一个小问题,那就是使用自定义图表实现chart之后,图例不好处理。通过查看条形图的示例,找到了一种显示图例的方法,那就是使用空的条形图来显示图例
,因为在series
里面配置了条形图并配置name
后,echart会自动根据name
的值去legend
的配置中匹配对应的图例名字并显示。
完整代码如下,保存于本地之后再自己去echart官网下载库文件(完整版)之后即可运行:
<!doctype html><html><head> <meta charset="utf-8"></head><body> <div id="chart-box" style="width:400px;height:300px;border:1px solid black;"></div> <script src="./echarts.min.js"></script> <script> // 初始化echart var chart = echarts.init(document.getElementById('chart-box')); // 各状态的颜色 var colors = ['#2f4554', '#61a0a8', '#d48265', '#c23531']; // 四种状态 var state = ['正常', '繁忙', '故障', '离线']; // echart配置 var opt = { color: colors, tooltip: { formatter: function (params) { return params.name + ':' + params.value[1] + '~' + params.value[2]; } }, legend: { data: state, bottom: '1%', selectedMode: false, // 图例设为不可点击 textStyle: { color: '#000' } }, grid: { left: '3%', right: '3%', top: '1%', bottom: '10%', containLabel: true }, xAxis: { min: 0 // x轴零刻度对应的实际值 }, yAxis: { data: ['WAN0', 'WAN1'] }, series: [ // 用空bar来显示四个图例 {name: state[0], type: 'bar', data: []}, {name: state[1], type: 'bar', data: []}, {name: state[2], type: 'bar', data: []}, {name: state[3], type: 'bar', data: []}, { type: 'custom', renderItem: function (params, api) { var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = 24; return { type: 'rect', shape: echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }), style: api.style() }; }, encode: { x: [1, 2], y: 0 }, data: [ { itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [0, 0, 10] }, { itemStyle: { normal: { color: colors[1] } }, name: '繁忙', value: [0, 10, 25] }, { itemStyle: { normal: { color: colors[2] } }, name: '故障', value: [0, 25, 45] }, { itemStyle: { normal: { color: colors[3] } }, name: '离线', value: [0, 45, 60] }, { itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [1, 0, 15] }, { itemStyle: { normal: { color: colors[1] } }, name: '繁忙', value: [1, 15, 20] }, { itemStyle: { normal: { color: colors[2] } }, name: '故障', value: [1, 20, 35] }, { itemStyle: { normal: { color: colors[3] } }, name: '离线', value: [1, 35, 40] }, { itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [1, 40, 45] }, { itemStyle: { normal: { color: colors[3] } }, name: '离线', value: [1, 45, 60] } ] } ] }; chart.setOption(opt); </script></body></html>
对于自定义图表的data
字段里数据项:
{ itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [0, 0, 10]}
- itemStyle: 所渲染的矩形的样式
- name: 该矩形的状态名
- value: 第0项代表类别标识,例如
0
就代表WAN0
的,1
就是WAN1
的;第1和第2项代表该矩形区域对应的x坐标范围开始于0
,结束于1
。
阅读全文
0 0
- 使用ECharts实现状态区间图
- 使用echarts实现动态显示折线图
- 使用Echarts实现中国地图
- echarts实现饼图
- 使用ECharts 实现类似github的Punch Card 图
- 使用laravel和ECharts实现折线图效果
- 使用ECharts实现数据图表分析
- js使用echarts实现饼图报表
- 使用Echarts实现地图下钻
- angular使用echarts折线图
- Echarts使用
- ECharts使用
- echarts使用
- Echarts使用
- ECharts使用
- ECharts使用
- Echarts使用
- ECharts使用
- win互斥量学习总结
- 驼峰命名法
- 我的NOIP
- Mybatis中Mapper映射
- 收集的Redhat RHEL6 RHEL7 ISO百度云下载地址
- 使用ECharts实现状态区间图
- Sicily 1443.Printer Queue
- if,for,while
- Android插件化开发—RePlugin插件化框架
- python 注释
- 此工作站和主域间的信任关系失败
- MFC 线程
- HTML、CSS、JavaScript学习心得
- 实验三 模拟饭堂排队打饭管理软件(顺序队列、多线程)