<template>
  <div style="margin-bottom:20px;border: 1px solid #dddfe5;padding:20px;">
    <div style="font-size:16px;margin-bottom:20px;">{{ title }}</div>
    <div style="display: flex;">
      <div style="width: 45%;display: flex;justify-content: space-evenly;">
        <div ref="chart" style="width: 300px; height: 300px;" />
      </div>
      <div style="width: 55%;">
        <el-table :data="tableData" :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <el-table-column prop="label" label="序号" width="180" />
          <el-table-column prop="value" label="选项" width="200" />
          <el-table-column prop="label" label="选择次数" width="180" />
          <el-table-column prop="label" label="百分比" width="180" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { Table, TableColumn } from 'element-ui';

export default {
  name: 'DynamicChartTable',
  components: {
    'el-table': Table,
    'el-table-column': TableColumn
  },
  props: {
    title: {
      type: String,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  },
  mounted () {
    this.initChart();
  },
  beforeDestroy () {
    if (this.$refs.chart) {
      const myChart = echarts.getInstanceByDom(this.$refs.chart);
      if (myChart) {
        window.removeEventListener('resize', myChart.resize);
        myChart.dispose();
      }
    }
  },
  methods: {
    initChart () {
      console.log(this.tableData)
      var labels = this.tableData.map(item => item.label)
      var values = this.tableData.map(item => item.value)
      const option = {
        legend: {},
        tooltip: {},
        xAxis: {
          type: 'category',
          data: labels
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '5%',
          bottom: '6%',
          containLabel: true
        },
        series: [{
          type: 'bar',
          data: values,
          color: '#3f9b6a'
        }]
      }
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
/* 添加一些基本样式 */
</style>
