<!--
 * @Author: zhp
 * @Date: 2023-09-13 09:02:25
 * @LastEditTime: 2023-09-20 09:29:40
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div>
    <div style="margin: 20px">
      <el-button v-for="(item, index) in dataArray" :key="index" @click="changeChart(index)">{{ item.name }}</el-button>
    </div>
    <div ref="chartDiv" :class="className" :style="{height:height,width:width}" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'

export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    // autoResize: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data() {
    return {
      chart: null,
      dataArray: [],
      xDatas: []
    }
  },
  mounted() {
  },
  methods: {
    changeChart(index) {
      this.setOptions(this.xDatas, this.dataArray[index])
    },
    initChart(xData, yData, lineName) {
      this.dataArray = yData
      this.xDatas = xData
      console.log(xData,yData);
      console.log('zale', yData[0].eqData)
      this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
      this.setOptions(xData, yData[0], lineName)
    },
    setOptions(xData, dataList, lineName) {
      // let seriesData = []
        // lineName.forEach((item,index) => {
        //   seriesData.push({
        //     name: item,
        //     data: yData[index],
        //     type: 'line',
        //   })
        // })
      this.chart.setOption({
        xAxis: {
          type: 'category',
          data: xData
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:lineName
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '设备CT',
            data: dataList.eqData,
            type: 'line',
          },
          {
            name: '产线CT',
            data: dataList.plData,
            type: 'line',
          }
        ]
      })
    }
  }
}
</script>
