<template>
  <div id="dataCharts" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
  type: {
    type: Boolean,
    default: false
  }
});
let option = ref({
  title: {
    text: '温度速率与时间波形图',
    textStyle: {
      color: '#3A3A3A',
      fontSize: 36
    },
    left: '30%',
    top: '3%'
  },
  color: ['#CF4A4A', '#51A8FF'],
  tooltip: {
    show: true,
    trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '8%',
    top: '20%',
    bottom: '10%',
    right: '5%',
    containLabel: true,
    show: true
  },
  xAxis: {
    show: true, //是否显示 x 轴
    type: 'category', //坐标轴类型        (可选value   category   time   log)
    name: '时间/s', //坐标轴名称
    nameLocation: 'center', //坐标轴名称显示位置
    nameGap: 50,
    nameTextStyle: {
      fontSize: 18
    },
    axisLabel: {
      show: true, //是否显示
      inside: false, //坐标轴刻度文字指向        (true表示向上   false表示向下)
      margin: 10, //坐标轴刻度文字与轴线之间的距离
      fontSize: 17, //坐标轴刻度文字的大小         (用数字表示)
      padding: [5, 0, 2, -5] //坐标轴刻度文字的边距        (上右下左)
    },
    splitLine: {
      show: true, //是否显示
      lineStyle: {
        color: '#B8B8B8', //网格线颜色
        width: 1, //网格线的加粗程度
        type: 'soild' //网格线类型
      }
    },
    data: ['1', '2', '3', '4', '5', '6'] //坐标轴刻度文字数据
  },
  yAxis: [
    {
      name: '样品温度(℃) - 温度速率(℃/h)',
      type: 'value',
      show: true,
      position: 'left',
      nameLocation: 'middle',
      nameGap: 50,
      nameTextStyle: {
        fontSize: 18
      },
      gridIndex: 0,
      min: 0,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  series: [
    {
      name: '实线：温度与时间关系曲线',
      type: 'line',
      smooth: true,
      data: [10, 52, 100, 334, 30, 130, 60]
    },
    {
      name: '虚线：温度速率与时间关系曲线(℃/h)',
      type: 'line',
      smooth: true,
      data: [100, 52, 20, 34, 39, 120, 120],
      lineStyle: {
        type: 'dashed' // 设置为虚线
      }
    }
  ],
  legend: {
    show: true,
    icon: 'rect',
    selectedMode: false,
    top: 70
  }
});
let charts = null;

onMounted(() => {
  charts = echarts.init(document.getElementById('dataCharts'));
  charts.setOption(option.value);
});
onUnmounted(() => {
  if (charts) {
    charts.dispose();
    charts = null;
  }
});
</script>
