简单封装一个缩略图

如图所示，封装一个简单是缩略图

<template>
  <div
    class="charts"
    style=" width: 100%"
    ref="charts"
    :style="{height}"
  />
</template>

<script>
import echarts from 'echarts'
import { COLOR_LOOP } from '@/utils/colorUtils' //封装好的颜色文件

const BASE_YAXIS_CONFIG_CONSTRUCTOR = (showSplitLine = false) => {
  return {
    axisLabel: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
    axisPointer: {
      label: { show: false },
      lineStyle: { type: 'solid', color: '#EFF3FA' },
    },
    splitLine: {
      show: showSplitLine,
      lineStyle: { color: '#EFF3FA', type: 'dashed' },
    },
  }
}

export default {
  name: 'TrendCharts',
  props: {
    chartData: {
      type: Object,
      required: true,
    },
    height: {
      type: String,
      default: '46px',
    },
    sameAxis: {
      type: Boolean,
      required: false,
      default: false,
    },
    grid: {
      type: Object,
      required: false,
      default: () => {},
    },
  },
  data() {
    return {
      rLength: 1,
      xHead: [],
      xBody: [],

      xAxis: [], // x轴连续标记
      series: [], // 数据
    }
  },
  computed: {
    columnsConfig() {
      const { columns } = this.chartData
      let _map = {}
      columns.forEach((item) => {
        _map[item.value] = item
      })
      return _map
    },
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const { columns, tableData } = this.chartData
      const _xAxis = tableData.map((item) => item.date)
      this.xAxis = Array.from(new Set(_xAxis))
      let cBody = {}

      // 头部图表导航
      let cHead = []
      columns.map((col) => {
        if (col.optionalFilters === 'number') {
          let _item = {
            label: col.label,
            value: col.value,
            formatter: col.formatter,
          }
          cHead.push(_item)
        }
      })
      this.xHead = cHead

      tableData.map((col) => {
        let _type = col.competingType
        if (!cBody[_type]) cBody[_type] = {}
        cHead.map((hd) => {
          let _k = hd.value
          if (!cBody[_type][_k]) cBody[_type][_k] = []

          let _value = col[_k]
          if (hd.formatter) {
            _value = col[_k] && hd.formatter(null, null, col[_k])
            if (typeof _value === 'string') {
              _value = _value.replace(/[,%]+/g, '')
            }
          }

          cBody[_type][_k].push(_value)
        })
      })

      this.rLength = Object.keys(cBody).length
      this.xBody = cBody
      this.renderMap()
    },
    renderMap() {
      const option = this.handleMapData()

      const _charts = echarts.init(this.$refs.charts, 'light')
      _charts.setOption(option, true)
      _charts.on('click', (param) => {
        console.log(param)
        this.$emit('click')
      })
    },

    handleMapData() {
      // 处理图表数据
      let xAxis = this.xAxis,
        series = [],
        sdef = {
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
        }

      for (let rival in this.xBody) {
        let bd = this.xBody[rival]
        Object.keys(bd).forEach((key) => {
          const _label = this.xHead.filter((item) => item.value === key)[0].label
          if (this.rLength > 1) {
            if (key !== this.current) return
            // 多商品
            let _obj = { ...sdef, name: rival }
            // title = _label
            _obj.data = bd[key]
            series.push(_obj)
          } else {
            let _obj = { ...sdef, name: _label }
            _obj.data = bd[key]
            series.push(_obj)
          }
        })
      }
      let multi_yaxis = this.rLength === 1 && this.xHead.length > 1

      const option = {
        color: COLOR_LOOP,
        xAxis: {
          type: 'category',
          data: xAxis,
          show: false,
        },
        yAxis: multi_yaxis
          ? series.map((item, index) => ({
              type: 'value',
              ...BASE_YAXIS_CONFIG_CONSTRUCTOR(index < 1),
              ...this.rangeLimitation,
              axisLabel: {
                show: false,
              },
            }))
          : {
              type: 'value',
              ...BASE_YAXIS_CONFIG_CONSTRUCTOR(true),
              ...this.rangeLimitation,
              axisLabel: {
                show: false,
              },
            },
        grid: {
          height: '80%',
          bottom: '10%',
          cursor: 'pointer',
        },
        series: (() => {
          let _series = multi_yaxis
            ? series.map((item, index) => ({
                ...item,
                yAxisIndex: this.sameAxis ? index : 0,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: 'rgba(65, 165, 245,1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(228, 244, 255,0)',
                        },
                      ],
                      false
                    ),
                    shadowBlur: 0,
                  },
                },
              }))
            : series.map((item) => ({
                ...item,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: 'rgba(65, 165, 245,1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(228, 244, 255,0)',
                        },
                      ],
                      false
                    ),
                    shadowBlur: 0,
                  },
                },
              }))
          return _series
        })(),
      }

      return option
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
@import '~@assets/css/index.less';
.charts /deep/ canvas {
  cursor: pointer;
}
</style>