时间:2021-05-25
需求背景
假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态:y轴用于展示各网口,x轴用于展示时间(分钟),使用条形图的不同颜色来表示不同时间区间段的状态,使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例,图中则表示了0~10分钟为正常,10~25分钟为繁忙,25~45分钟为故障,45~60分钟为离线。
根据此图,很容易想到可以用条形图试试。但后来发现,如果用堆叠条形图,则每种状态在每一个网口对应的图形中只能出现一次,这不能实现需求。于是继续查阅echart官网示例,终于在自定义类型图表中找到了一个相似的示例,地址
通过研究示例代码并进行一番改造,终于实现了上述需求。
在实现的过程中遇到了一个小问题,那就是使用自定义图表实现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]}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
有时我们需要统计自定义echarts图,统计x轴区间的y轴数量。思路是利用echarts的自定义配置:option.series[i].type='custom
场景SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图。Echarts3官网获取Echarts从官网下载界面选择你需要的版本下载,根据开
微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图本来使用的是wxcharts,但发现实现不了左右双y轴的效果,就换成echarts要实现这
本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示,实现了表格和图之间的切换和图和表之间的转
组件只做了简单的传值处理,记录开发思路及echarts简单使用。这里默认所有图表样式一致,都为柱状图,如需其他类型,可查阅echarts官网文档,再动态传值即可