cyber-narrator-cn-ui/src/components/charts/chart-options.js

/**
 * @author 陈劲松
 * @date 2021/6/16
 * @description chart option和一些工具
*/
import { format } from 'echarts'
import { shortFormatter, tooltipShortFormatter } from './chartFormatter'
import _ from 'lodash'
export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
  '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
  '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
  '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
export function getChartColor (index) {
  return chartColor[index % chartColor.length]
}
const line = {
  tooltip: {
    appendToBody: true,
    trigger: 'axis',
    textStyle: {
      width: '20px',
      overflow: 'truncate'
    },
    formatter: axiosFormatter,
    show: true,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
  },
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: shortFormatter
    }
  },
  animation: false,
  grid: {
    left: 55,
    bottom: 30,
    top: 40,
    right: 25
  },
  color: chartColor,
  legend: {
    tooltip: {
      show: true,
      formatter: '{a}'
    },
    show: true,
    right: 23,
    top: 8,
    orient: 'horizontal',
    icon: 'circle',
    itemGap: 20,
    itemWidth: 10,
    textStyle: {
      padding: [0, 0, 0, 5],
      fontSize: 14
    },
    formatter: tooLongFormatter
  },
  axisLabel: {
    fontSize: 14
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: false,
      symbol: 'none',
      data: []
    }
  ]
}
const lineWithStatistics = {
  tooltip: {
    appendToBody: true,
    trigger: 'axis',
    textStyle: {
      width: '20px',
      overflow: 'truncate'
    },
    formatter: axiosFormatter,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
  },
  xAxis: {
    type: 'time'
  },
  animation: false,
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: shortFormatter
    }

  },
  color: chartColor,
  grid: {
    left: 55,
    bottom: 30,
    top: 20,
    right: 20
  },
  legend: {
    show: false
  },
  axisLabel: {
    fontSize: 14
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: false,
      symbol: 'none',
      data: []
    }
  ]
}
const lineStack = {
  tooltip: {
    appendToBody: true,
    trigger: 'axis',
    textStyle: {
      width: '20px',
      overflow: 'truncate'
    },
    formatter: axiosFormatter,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
  },
  xAxis: {
    type: 'time'
  },
  color: chartColor,
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: shortFormatter
    }

  },
  grid: {
    left: 55,
    bottom: 45,
    top: 10,
    right: 180
  },
  legend: {
    show: true,
    right: 30,
    top: 'middle',
    orient: 'vertical',
    icon: 'circle',
    itemGap: 20,
    itemWidth: 10,
    formatter: tooLongFormatter,
    textStyle: {
      padding: [0, 0, 0, 5],
      fontSize: 14
    }
  },
  axisLabel: {
    fontSize: 14
  },
  series: [
    {
      name: '',
      type: 'line',
      stack: 'value',
      areaStyle: {},
      symbol: 'none',
      data: []
    }
  ]
}
const pieWithTable = {
  tooltip: {
    appendToBody: true,
    trigger: 'item',
    formatter: tooltipShortFormatter
  },
  color: chartColor,
  animation: false,
  legend: {
    orient: 'vertical',
    type: 'plain',
    left: '60%',
    top: 'middle',
    icon: 'circle',
    itemWidth: 10, // 设置宽度
    itemHeight: 10, // 设置高度
    itemGap: 20,
    tooltip: {
      show: true
    },
    formatter: tooLongFormatter
  },
  series: [
    {
      type: 'pie',
      selectedMode: 'single',
      radius: ['42%', '65%'],
      center: ['30%', '50%'],
      data: [],
      label: {
        formatter: '{d}%'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
const typeOptionMappings = [
  { value: 11, option: line }, // 常规折线图
  { value: 12, option: lineWithStatistics }, // 带统计表格的折线图
  { value: 13, option: lineStack }, // 折线堆叠图
  { value: 31, option: pieWithTable } // 常规折线图
]
const typeCategory = {
  MAP: 'map',
  TABLE: 'table',
  ECHARTS: 'echarts',
  TITLE: 'title',
  SINGLE: 'singleValue',
  TABS: 'tabs'
}
export function getTypeCategory (type) {
  if (isMap(type)) {
    return typeCategory.MAP
  } else if (isEcharts(type)) {
    return typeCategory.ECHARTS
  } else if (isTable(type)) {
    return typeCategory.TABLE
  } else if (isSingleValue(type)) {
    return typeCategory.SINGLE
  } else if (isTitle(type)) {
    return typeCategory.TITLE
  } else if (isTabs(type)) {
    return typeCategory.TABS
  }
}
/* 饼图柱状图等 */
export function isEcharts (type) {
  return type >= 11 && type <= 50
}
/* 地图 */
export function isMap (type) {
  return type >= 1 && type <= 10
}
/* 连线地图 */
export function isMapLine (type) {
  return type === 1
}
/* 色块地图 */
export function isMapBlock (type) {
  return type === 2
}
/* 带统计的折线图 */
export function isEchartsWithStatistics (type) {
  return type === 12
}
/* 单值 */
export function isSingleValue (type) {
  return type >= 51 && type <= 60
}
/* 带折线图的单值 */
export function isSingleValueWithEcharts (type) {
  return type === 52
}
/* 带Table的饼图 */
export function isEchartsWithTable (type) {
  return type === 31
}
/* table */
export function isTable (type) {
  return type >= 61 && type <= 70
}
/* title */
export function isTitle (type) {
  return type === 93
}
/* tabs */
export function isTabs (type) {
  return type === 91
}
export function getOption (type) {
  const mapping = typeOptionMappings.find(m => m.value === type)
  return mapping && mapping.option ? _.cloneDeep(mapping.option) : null
}
export const layoutConstant = {
  HEADER: 'header',
  FOOTER: 'footer'
}
export function getLayout (type) {
  const layout = []
  if (!isSingleValue(type) && !isTitle(type)) {
    layout.push(layoutConstant.HEADER)
  }
  if (type === 12 || type === 31) {
    layout.push(layoutConstant.FOOTER)
  }
  return layout
}

function tooLongFormatter (name) {
  return format.truncateText(name, 110, '12')
}
function axiosFormatter (params) {
  let str = '<div>'
  params.forEach((item, i) => {
    const tData = item.data[0]
    if (i === 0) {
      str += '<div style="margin-bottom: 5px">'
      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
      str += '</div>'
    }
    str += '<div class="cn-chart-tooltip-box">'
    str += item.marker
    str += `<span class="cn-chart-tooltip-content"> 
        ${item.seriesName}
    </span>`
    str += `<span class="cn-chart-tooltip-value">
        ${shortFormatter(item.data[1])}
    </span>`
    str += '</div>'
  })
  str += '</div>'
  return str
}