tuanfeng-pc-admin/src/views/dashboard/utils/echarts.js

import echarts from 'echarts'

/**
 * @description 生成echarts 渐变色
 */
export const generateLineGraphic = (startColor, endColor) => {
  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: startColor },
    { offset: 1, color: endColor }
  ])
}

/**
 * 生成分析图hover dom
 */
export const generateDiagramsHoveDom = (options) => {
  return `
              <div style="
                        padding: 0;
              border: 1px solid #f4f8ff;
              padding: 8px 16px;
              background:  linear-gradient(180deg, rgba(238, 245, 255, 0.6) 0%, rgba(219, 233, 253, 0.6) 100%);
              border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
              border-radius: 4px;
              color: #3d3d3d;
              font-size: 16px;
              font-weight: bold
             ">${options[0].value}</div>
            `
}

/**
 * @description 获取地图的hover item元素
 * @param {*} title
 * @param {*} value
 * @returns
 */
export const getMapDataItem = (title, value = 0) => {
  return `
            <li style="width: 114px; height: 24px; background: #fff; margin-top: 8px; padding: 2px 8px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; display: flex; justify-content: space-between" >
              <span style="color: #4E5969; font-size: 12px">${title}</span>
              <span style="color: #4E5969; font-size: 14px; font-weight: bold">${value}</span>
            </li>
         `
}

/**
 * @description
 */
export const generateMapHoveDom = (options) => {
  let currentData = options.data
  if (currentData && typeof currentData.value === 'string') {
    currentData = JSON.parse(currentData.value)
  } else {
    currentData = [{}, {}, {}, {}]
  }
  return `
  <div style="padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(238, 245, 255, 0.9) 0%, rgba(219, 233, 253, 0.9) 100%);
    border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;  border: 1px solid #fff;  border-radius: 4px">
    <h1 style="color: #3D3D3D; font-size: 14px; line-height: 1.5; font-weight: bold">${options.name}</h1>
    <ul>
        ${getMapDataItem(currentData[0].dataType || '', currentData[0].dataNumber || 0)}
        ${getMapDataItem(currentData[1].dataType || '', currentData[1].dataNumber) || 0}
        ${getMapDataItem(currentData[2].dataType || '', currentData[2].dataNumber) || 0}
        ${getMapDataItem(currentData[3].dataType || '', currentData[3].dataNumber) || 0}
      </ul>
    </div>
  `
}

/**
 * @description 生成默认的统计数据
 */
export const getDefaultBarData = () => {
  const res = {}
  for (let i = 1; i <= 12; i++) {
    res[i] = 0
  }
  return res
}