需求背景
假如有如下圖所示的圖表需要顯示多個網口在一段時間內的多個狀態：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]}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
