当前位置：首页 > news >正文

echarts X轴是日期，Y轴是文字

news 2025/4/29 7:38:14

最近写了一个echarts比较麻烦的，一个小案例，大家参考！
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));let data = {"colors": ["#61d2f7", "#EE4000", "#747474", "#908c8c", "#FF8C00", "#123456"],"state": ["正常", "关闭", "离线"],"yaxisData": ["碱性生产线", "碱性线风机", "碱性线水泵1", "碱性线水泵2", "碱性线水泵3", "磷化生产线","酸性生产线","酸性线风机","酸性线水泵1","酸性线水泵2","酸性线水泵3"],"series": [{"color": "#61d2f7","name": "正常","value": [0, "2025-04-25 00:00:00", "2025-04-25 16:30:00"]}, {"color": "#EE4000","name": "未运行","value": [1, "2025-04-25 00:00:00", "2025-04-25 16:30:00"]}, {"color": "#61d2f7","name": "正常","value": [2, "2025-04-25 00:00:00", "2025-04-25 16:30:00"]}, {"color": "#61d2f7","name": "正常","value": [3, "2025-04-25 00:00:00", "2025-04-25 15:30:00"]},{"color": "#EEE685","name": "低负荷","value": [3, "2025-04-25 15:30:00", "2025-04-25 16:30:00"]},{"color": "#EEE685","name": "低负荷","value": [0, "2025-04-25 15:30:00", "2025-04-25 16:30:00"]},{"color": "#EEE685","name": "低负荷","value": [9, "2025-04-25 15:30:00", "2025-04-25 16:30:00"]}]}var colors = data.colors;//状态的颜色var state = data.state;//状态var seriesdata = [];for (var i = 0; i < data.series.length; i++) {var sdata = {itemStyle: { normal: { color: data.series[i].color } },//条形颜色name: data.series[i].name,value: data.series[i].value};seriesdata.push(sdata);}// 指定图表的配置项和数据var option = {backgroundColor: '#2c343c',color: colors,tooltip: {//提示框formatter: function (params) {return params.name + ':' + params.value[1] + '~' + params.value[2];}//数据的值},dataZoom: [{type: 'slider',filterMode: 'weakFilter',bottom: 10,height: 8,borderColor: 'transparent',backgroundColor: '#e2e2e2',handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:linehandleSize: 20,handleStyle: {shadowBlur: 6,shadowOffsetX: 1,shadowOffsetY: 2,shadowColor: '#aaa'},labelFormatter: ''}, {type: 'inside'}],// legend: {//图例//     data: state,//     top: 0,//     selectedMode: false, // 图例设为不可点击//     textStyle: {//         color: '#fff'//     }// },grid: {//绘图网格left: '3%',right: '3%',top: '1%',bottom: '10%',containLabel: true},xAxis: {type: 'time',interval: 3600 * 1000,splitLine: {show: false},axisLabel: {formatter: function (value) {var date = new Date(value);return getzf(date.getHours()) + ':00';function getzf(num) {if (parseInt(num) < 10) {num = '0' + num;}return num;}},textStyle: {color: '#fff'}}},yAxis: {data: data.yaxisData,axisLabel: {show: true,textStyle: {color: '#fff'}},Interval: 80},series: [{type: 'custom',renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。var end = api.coord([api.value(2), categoryIndex]);var height = 400 / data.yaxisData.length;if (height > 50) height = 50;return {type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。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: seriesdata}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body></html>