caimei365-manager-ui/src/views/mall-portrait/components/line-echarts.vue

<template>
  <div class="echarts-content">
    <div ref="echarts" class="line-echarts"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import loopEchart from '../mixins/index'
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [loopEchart, resize],
  props: {
    echartsName: {
      type: String,
      default: () => '机构新增趋势'
    },
    optionData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    optionData: {
      handler(val) {
        if (val) {
          clearInterval(this.timeTicket)
          this.timeTicket = null
          this.initChart()
        }
      },
      deep: true
    }
  },
  methods: {
    getXAxis() {
      return this.optionData['个人机构']?.map(e => e.time)
    },
    getLegend() {
      const a = []
      for (const key in this.optionData) {
        a.push(key)
      }
      return a
    },
    getSeriesData() {
      const a = []
      for (const key in this.optionData) {
        const b = {}
        b['name'] = key
        b['type'] = 'line'
        b['stack'] = 'Total'
        b['data'] = this.optionData[key]?.map(e => e.num)
        a.push(b)
      }
      return a
    },
    initChart() {
      const myEchart = this.$refs['echarts']
      this.chart = echarts.init(myEchart)
      const option = {
        title: {
          text: this.echartsName
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross' // 提示框样式为十字准星
          }
        },
        legend: {
          data: this.getLegend()
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.getXAxis()
        },
        yAxis: {
          type: 'value'
        },
        series: this.getSeriesData()
      }
      this.chart && this.chart.setOption(option)
      // this.chart && this.handleChartLineLoop(option, this.chart)
    },
    handleMouseOver(e, callback) {
      if (e) {
        const myEchart = this.$refs['echarts']
        myEchart.addEventListener('mouseover', callback)
      }
    },
    handleMouseOut(e, callback) {
      if (e) {
        const myEchart = this.$refs['echarts']
        myEchart.addEventListener('mouseout', callback)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts-content {
  width: 100%;
  height: 350px;
  border-radius: 12px;
  border: 1px solid #ccc;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
  padding: 10px;
  margin-bottom: 14px;
  .title {
    display: flex;
    align-items: center;
  }
  .line-echarts {
    width: 100%;
    height: 100%;
  }
}
</style>