LQBZ_web/src/views/als/components/Charts/playBackChart.vue

<template>
  <div ref="preResultRef" :style="{ height: height, width: width }"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'PlayBackChart',
  props: {
    // chartRef: {
    //   type: String,
    //   required: true
    // },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    /**
     * chartData包括：
     * title:''
     * legendData:[]
     * xAxisData:{}
     * yAxisData:{}
     * seriesData:{}
     */
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        // this.initChart()
        this.$nextTick(() => {
          this.initChart()
          this.setOptions(val)
        })
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {},
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
      // console.log('66', this.chartRef)
      this.chart = echarts.init(this.$refs.preResultRef)
      // 监听 dataZoom 事件
      this.chart.on('dataZoom', (params) => {
        const startValue = this.chartData.xAxisData[params.batch[0].startValue]
        const endValue = this.chartData.xAxisData[params.batch[0].endValue]
        this.$emit('data-zoom', [startValue, endValue])
      })
      this.setOptions(this.chartData)
    },
    setOptions({ title, legendData, xAxisData, yAxisData, seriesData } = {}) {
      this.chart.setOption({
        title: {
          text: title
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // data: legendData,
          textStyle: {
            //图例文字的样式
            color: '#fff'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
          // data: yAxisData
        },
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        // series: series
        series: seriesData
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>