resistancemonitor/2.Web/src/chart/force-curve.js

/**
 * @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('<br>')
   //    },
  },
  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