<script lang="tsx">
import { defineComponent, onMounted, ref } from "vue";
import Echarts from "@/utils/echarts";
export default defineComponent({
  name: "echartTemp",
  props:['type'],
  setup(props) {
    const echartref = ref();
    const options = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        splitLine: {
          color: ["#475569"],
        },
        axisLine: {
          show: false,
          color:'#475569'
        },
        axisTick: {
          length: 6,
          show: false,
          lineStyle: {
            type: "dashed",
          },
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: props.type,
          color: "#475569",
        },
      ],
    };
    onMounted(() => {
      const echartinstance = Echarts.init(echartref.value, "default");
      echartinstance.setOption(options);
    });
    return () => {
      return (
        <>
          <div
            ref={echartref}
            style={{ width: "500px", height: "300px" }}
          ></div>
        </>
      );
    };
  },
});
</script>