/** * @param {Array} curve_data_list 阻力曲线数据(必选) * @param {String} force_unit 阻力曲线的单位(必选) * @param {String} title 曲线名称 * @param {String} tem_data 温度曲线的数据 * @param {String} tem_unit 温度曲线的单位 * @param {Array} refer_curve 参考曲线 * @return {Object} 曲线的配置项 option */ import dayjs from 'dayjs' function forceOption({ curve_data_list, force_unit, title, tem_data, tem_unit, line, show_label, show_tem, refer_curve, start_value, end_value, starttime, endtime, }) { let series = [] let legend_data = [] let y_max = 0 // Y轴最大值 let y_min = 0 // Y轴最小值 let max_min_time = {} if (starttime && endtime) { max_min_time.min = dayjs(starttime).valueOf() max_min_time.max = dayjs(endtime).valueOf() } // 阻力 if (curve_data_list && curve_data_list.length) { legend_data = curve_data_list.map(item => item.name) curve_data_list.forEach(element => { let name_list = series.map(item => item.name).filter(Boolean) if (element.mark_points && element.mark_points.length) { let mark_points = [] element.mark_points.forEach(item => { mark_points.push({ coord: item.coord, symbolSize: 0, label: { show: show_label || false, textStyle: { color: item.color || element.color, }, padding: [3, 5], fontSize: 20, borderRadius: 8, backgroundColor: 'rgba(25, 189, 122, 0.2)', position: item.position || 'top', formatter: item.label, }, }) }) if (!name_list.includes(element.name)) { series.push({ name: element.name, type: 'line', symbol: 'none', silent: true, // 开启静默模式 data: element.points || element.data || [], color: element.color, animation: false, markPoint: { data: mark_points, }, }) } } else { if (!name_list.includes(element.name)) { series.push({ name: element.name, type: 'line', symbol: 'none', silent: true, // 开启静默模式 data: element.points || element.data || [], color: element.color, animation: false, }) } } }) } // 温度 if (tem_data && tem_data[0].data.length) { if (curve_data_list && curve_data_list.length) { legend_data = [...curve_data_list.map(item => item.name), ...tem_data.map(item => item.name)] } else { legend_data = [...tem_data.map(item => item.name)] } tem_data.forEach(element => { series.push({ name: element.name, yAxisIndex: 1, type: 'line', symbol: 'none', data: element.data, animation: false, }) }) } // 是否有标识线 if (line && line.length) { // 判断标识线的最大值最小值 // let line_value_list = line.map(item => item.value) let line_value_list = line.map(item => item.val) y_max = Math.max(...line_value_list) y_min = Math.min(...line_value_list) let line_style = lineStyle(line) series.push(line_style) } if (refer_curve && refer_curve.length) { let refer_line = referCurve(refer_curve) // legend_data.push(...refer_curve.map(item => item.name)) series.push(...refer_line) } // 公用的 echarts 数据 let option = { title: { left: '10px', text: title, textStyle: { color: 'white', }, }, legend: { show: 'true', data: legend_data, right: 'center', top: '20px', textStyle: { color: 'white', }, selected: { 温度: show_tem, }, }, grid: { left: 55, }, dataZoom: [ { type: 'slider', filterMode: 'none', //filter height: 20, startValue: start_value || null, endValue: end_value || null, // start: 0, // end: 20, }, { type: 'inside', filterMode: 'none', //filter startValue: start_value || null, endValue: end_value || null, // start: 0, // end: 20, }, ], tooltip: { trigger: 'axis', backgroundColor: '#232526', borderColor: '#606266', textStyle: { color: '#c0c4cc', }, // formatter: params => { // if (!params.length) return // let html_list = [], // label_text = '', // time_text = '' // time_text = `${params[0].axisValueLabel}.${dayjs(params[0].axisValue).format('SSS')}` // html_list.push(time_text) // params.forEach(item => { // label_text = `${item.marker}${item.seriesName}:${item.value[1]}` // html_list.push(label_text) // }) // return html_list.join('
') // }, }, toolbox: { right: '200px', top: '20px', feature: { restore: {}, }, iconStyle: { borderColor: '#ffffff', }, }, yAxis: [ { scale: true, // y轴起始值自适应 name: force_unit, // minInterval: 1, max: val => { if (y_max == 0) return if (val.max > y_max) return val.max else return y_max }, min: val => { if (y_min == 0) return if (val.min < y_min) return val.min else return y_min }, axisLine: { show: true, symbol: ['none', 'none'], // 添加箭头 lineStyle: { color: 'white', }, }, splitLine: { show: true, lineStyle: { color: '#CFD6E1', type: 'dashed', }, }, axisLabel: { show: true, color: 'white', }, axisTick: { show: false, }, }, { scale: true, // y轴起始值自适应 // minInterval: 1, position: 'right', name: tem_unit, axisLine: { show: true, symbol: ['none', 'none'], // 添加箭头 lineStyle: { color: 'white', }, }, splitLine: { show: true, lineStyle: { color: '#CFD6E1', type: 'dashed', }, }, axisLabel: { show: true, color: 'white', }, axisTick: { show: false, }, }, ], xAxis: { type: 'time', ...max_min_time, splitNumber: 8, axisLine: { show: true, symbol: ['none', 'none'], // 添加箭头 lineStyle: { color: 'white', }, }, splitLine: { show: false, }, axisLabel: { show: true, color: 'white', }, axisTick: { show: false, }, }, series, } return option } // 获取标识线的配置 function lineStyle(data) { let markLine_data = [] let markPoint_data = [] // 标识线样式 data.forEach((element, index) => { markLine_data.push({ yAxis: element.val, lineStyle: { type: 'dashed', width: 1, color: element.color }, label: { show: false }, }) markPoint_data.push({ yAxis: element.val, symbolSize: 0.1, x: '92%', label: { show: true, color: element.color, fontSize: 12, position: 'right', formatter: `${element.label}${element.val}`, }, }) }) // 标识线 let line_style = { type: 'line', lineStyle: { width: 1 }, showSymbol: false, markLine: { symbol: ['none', 'arrow'], silent: true, label: { position: 'start' }, data: markLine_data, animation: false, }, markPoint: { silent: true, data: markPoint_data, animation: false, }, } return line_style } // 参考曲线 function referCurve(data) { let refer_line = [] let color_list = ['#7303c0', '#ec38bc', '#fdeff9'] data.forEach((element, index) => { refer_line.push({ name: element.name, type: 'line', symbol: 'none', data: element.points || element.data, color: '#FF0000', zlevel: 1, animation: false, }) }) return refer_line } export default forceOption