<template>
  <div>
    <div id="reply"></div>
  </div>
</template>
 
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import echarts from 'echarts';

@Component({})
export default class ReplyEcharts extends Vue {
  @Prop({ required: true, default: {} })
  private data: any;

  @Watch('data', { deep: true })
  initData() {
    this.getOption();
  }

  getOption() {
    let myChart = echarts.init(document.getElementById('reply'));
    let option = {
      color: ['#3865ff', '#338be8', '#45d0ff', '#33e8e5', '#38ffc4'],
      title: {
        subtext: '纯属虚构'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: this.data.legend,
        show: false
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: this.data.xaxis[0].data,
          axisTick: {
            show: false
          },
          //  改变x轴颜色
          axisLine: {
            lineStyle: {
              color: '#fafafa'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#000' //更改坐标轴文字颜色
              // fontSize: 14 //更改坐标轴文字大小
            }
            // formatter: function(value) {
            //   return 5 + '/' + value;
            // }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false
          },
          //  改变y轴颜色
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000' //更改坐标轴文字颜色
            }
          }
        }
      ],
      series: [
        {
          name: this.data.legend[0],
          type: 'line',
          symbol: 'circle',
          smooth: true,
          itemStyle: { normal: { areaStyle: { type: 'default' } } },
          data: this.data.series[0].data
        },
        {
          name: this.data.legend[1],
          type: 'line',
          symbol: 'circle',
          smooth: true,
          itemStyle: { normal: { areaStyle: { type: 'default' } } },
          data: this.data.series[1].data
        }
      ]
    };

    myChart.setOption(option, true);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
}
</script>
<style lang="scss" scoped>
#reply {
  height: 500px;
}
</style>