189 8069 5689

利用ECharts怎么实现一个状态区间图

这篇文章将为大家详细讲解有关利用ECharts怎么实现一个状态区间图，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

目前创新互联公司已为近1000家的企业提供了网站建设、域名、雅安服务器托管、绵阳服务器托管、企业网站设计、武邑网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

需求背景

假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。

利用ECharts怎么实现一个状态区间图

根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现一次，这不能实现需求。于是继续查阅echart官网示例，终于在自定义类型图表中找到了一个相似的示例，地址

通过研究示例代码并进行一番改造，终于实现了上述需求。

在实现的过程中遇到了一个小问题，那就是使用自定义图表实现chart之后，图例不好处理。通过查看条形图的示例，找到了一种显示图例的方法，那就是使用空的条形图来显示图例，因为在series里面配置了条形图并配置name后，echart会自动根据name的值去legend的配置中匹配对应的图例名字并显示。

完整代码如下，保存于本地之后再自己去echart官网下载库文件（完整版）之后即可运行：




  



  
     

对于自定义图表的data字段里数据项:

{
  itemStyle: { normal: { color: colors[0] } },
  name: '正常',
  value: [0, 0, 10]
}

  • itemStyle: 所渲染的矩形的样式

  • name: 该矩形的状态名

  • value: 第0项代表类别标识，例如0就代表WAN0的，1就是WAN1的；第1和第2项代表该矩形区域对应的x坐标范围开始于0，结束于1。

关于利用ECharts怎么实现一个状态区间图就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


文章题目：利用ECharts怎么实现一个状态区间图
标题链接：http://cdxtjz.cn/article/pdioso.html

其他资讯