echarts里type为custom，自定义配置renderItem为柱状形状
- echarts里type为custom，自定义配置renderItem为柱状形状
echarts里type为custom，自定义配置renderItem为柱状形状
主要功能：文本超过柱状形状就隐藏否则就显示，移入每一个柱状显示tooltip。
<!DOCTYPE html> <html lang=""> <head> <title>ECharts Custom Render Demo</title> <meta charset="utf-8"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="myChart" style="width: 600px;height: 400px;"></div> <script type="text/javascript"> // 模拟数据--停机数据 let data0 = [ {value: ['00:00', '02:30'], status: '停机'}, {value: ['15:00', '17:30'], status: '停机'}, ] // 模拟数据--生产数据 let data1 = [ {value: ['05:00', '12:30'], status: '生产'} ] // ECharts option 配置项 let option = { dataZoom: {show: true}, tooltip: { trigger: 'item', formatter: (params) => { return params.data.status; }, }, legend: { data: [ { name: '停机时长', lineStyle: {color: '#F56464'}, itemStyle: {color: '#F56464'} }, { name: '生产时长', lineStyle: {color: '#84DFA6'}, itemStyle: {color: '#84DFA6'} }, ] }, xAxis: { type: 'category', data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30'] }, yAxis: { type: 'value', }, series: [ { name: '停机时长', type: 'custom', label: { show: true, position: 'inside', color: '#222', fontSize: 14, lineHeight: 20, }, renderItem: function (params, api) { let dataItem = data0[params.dataIndex]; let xStartValue = dataItem.value[0]; let xEndValue = dataItem.value[1]; let startIndex = option.xAxis.data.findIndex(item => item === xStartValue); let endIndex = option.xAxis.data.findIndex(item => item === xEndValue); let xStart = api.coord([startIndex, 0])[0]; let xEnd = api.coord([endIndex, 0])[0]; let width = xEnd - xStart; let y = api.coord([0, 0.5])[1]; let height = api.size([0, 1])[1]; const tempT = '文本内容超过柱状容器就隐藏'; const barLength = xEnd - xStart; const flightNumberWidth = echarts.format.getTextRect(tempT).width + 20; const text = barLength > flightNumberWidth ? tempT : ''; return { type: 'rect', shape: { x: xStart, y: y - height / 2, width: width, height: height }, style: api.style({text: text, fill: '#F56464'}), }; }, data: [ {value: ['00:00', '02:30'], status: '停机'}, {value: ['15:00', '17:30'], status: '停机'}, ], }, { name: '生产时长', type: 'custom', label: { show: true, position: 'inside', color: '#222', fontSize: 14, lineHeight: 20, }, renderItem: function (params, api) { let dataItem = data1[params.dataIndex]; let xStartValue = dataItem.value[0]; let xEndValue = dataItem.value[1]; let startIndex = option.xAxis.data.findIndex(item => item === xStartValue); let endIndex = option.xAxis.data.findIndex(item => item === xEndValue); let xStart = api.coord([startIndex, 0])[0]; let xEnd = api.coord([endIndex, 0])[0]; let width = xEnd - xStart; let y = api.coord([0, 0.5])[1]; let height = api.size([0, 1])[1]; const tempT = '文本内容超过柱状容器就隐藏'; const barLength = xEnd - xStart; const flightNumberWidth = echarts.format.getTextRect(tempT).width + 20; const text = barLength > flightNumberWidth ? tempT : ''; return { type: 'rect', shape: { x: xStart, y: y - height / 2, width: width, height: height }, style: api.style({text: text, fill: '#84DFA6'}), }; }, data: [ {value: ['05:00', '12:30'], status: '生产'} ], } ] }; // 初始化 ECharts 实例 let myChart = echarts.init(document.getElementById('myChart')); // 将 option 配置项设置到 ECharts 实例中 myChart.setOption(option); </script> </body> </html>
结果
