echarts 图表

<Echart :echartIndex="1" :data="dataList?.download_range" />

import { defineComponent, onMounted, ref, computed, ComputedRef } from "vue";
import * as echarts from "echarts";
import { times, parseTime } from "../../utils/auth";
export default defineComponent({
  props: {
    echartIndex: {
      type: Number,
    },
    data: {
      type: Array,
    },
  },
  setup({ echartIndex, data }: any) {
    console.log("12331213", data);
    /**
     * 时间换算
     */
    const getTodo = computed(() => (e: any) => {
      return times(e);
    });
    const getTime = computed(() => (e: any) => {
      return parseTime(e, "{y}-{m}-{d} {h}:{i}:{s}");
    });
    const echart = ref<HTMLElement>();
    const initEcharts = () => {
      const ehartInstance = echarts.init(echart.value);
      const xTime = data[0].range.map((item: any) =>
        parseTime(item.time, "{h}:{i}:{s}")
      );
      // 阴影数组
      const colorStop = [
        [
          { offset: 0, color: "rgba(38,215,169,0.00)" },
          { offset: 1, color: "rgba(38,215,169,0.50)" },
        ],
        [
          { offset: 0, color: "rgba(100,157,235,0.00)" },
          { offset: 1, color: "rgba(100,157,235,0.50)" },
        ],
      ];
      var itemStyles = {
        //下面是拐点样式配置属性
        color: "#26D7A9", //这里设置的拐点颜色
        borderColor: "#26D7A9", //  拐点边框颜色
        borderWidth: 3, //  拐点边框宽度
        shadowColor: "#26D7A9", //  阴影颜色
        shadowBlur: 1, //  阴影渐变范围控制
      };
      var lineStyles = [
        { color: "rgba(38,215,169,0.8)" },
        { color: "rgba(100,157,235,0.8)" },
      ];

      const series = data.map((item: any, index: any) => {
        return {
          type: "line",
          name: item.device,
          data: item.range.map((r: any) => Number(r.value).toFixed(3)),
          stack: "Total",
          showSymbol: false,
          itemStyle: {
            //下面是拐点样式配置属性
            color: lineStyles[index].color, //这里设置的拐点颜色
            borderColor: lineStyles[index].color, //  拐点边框颜色
            borderWidth: 3, //  拐点边框宽度
          },
          lineStyle: lineStyles[index],
          areaStyle: {
            //渐变色实现
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //变化方向
              //渐变色
              colorStop[index]
            ),
          },
        };
      });
      console.log(series);

      const options = {
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        xAxis: {
          type: "category",
          data: xTime,
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };
      options && ehartInstance.setOption(options);
    };
    onMounted(() => {
      if (data) {
        initEcharts();
      }
    });
    return {
      echart,
      echartIndex,
      getTime,
      parseTime,
    };
  },
});