vue3中echarts的使用

效果：

 代码：

<div class="outcharbox">
                <a-row :gutter="10">
                    <a-col :span="8" v-for=" (item, index) in linesobjdata" :key="item.MonitorItemId">
                        <monitoringItemsChart :colorIndex="index" :obj="item.obj"
                            @openModal="openModal(item.MonitorItemId, item.obj)">
                            <linecharts :id="`linechart1${item.MonitorItemId}`" :dataObj="item" v-if="!item.Empty" />
                            <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
                        </monitoringItemsChart>
                    </a-col>
                </a-row>
            </div>

 monitoringItemsChart组件：

<template>
    <div class="item-outbox">
        <div class="item-outbox-upbox">
            <div class="item-titlebox">
                <span class="item-title" :style="{ background: titlecolorList[colorIndex] }"> {
   
   { obj.title ? obj.title :
                    '--'
                }}</span>
                <span class="item-opendetail" @click="openModal"><right-circle-outlined /></span>
            </div>
            <div class="item-valuebox">
                <div>
                    <span class="item-value"> {
   
   { obj.value ? obj.value : '--' }}</span>
                    <span> {
   
   {obj.value ? obj?.unit :''}}</span>
                </div>
                <div class="itemmaxminbox">
                    <span class="item-maxbox"><span class="item-Max">Max</span><span class="item-maxvalue">{
   
   { obj?.max ?
                        obj?.max : '--' }}</span></span>
                    <span><span class="item-Max">Min</span><span class="item-minvalue">{
   
   { obj?.min ? obj?.min : '--'
                    }}</span></span>
                </div>
            </div>
        </div>
        <div class="item-outbox-downbox">
            <slot></slot>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, watch, toRefs } from "vue";
const props = defineProps({
    obj: {
        type: Object,
        default: () => ({
            title: '',
            max: '',
            min: '',
            value: '',
            time: '',
            unit: ''
        })


    },

    title: {
        type: String,
        default: '监控项',

    },
    maxmin: {
        type: Boolean,
        default: true
    },
    max: {
        type: Number,
        default: 100.56,
    },
    min: {
        type: Number,
        default: 100.56,
    },
    value: {
        type: Number,
        default: 100.5,
    },
    time: {
        type: String,
        default: '2023-07-05 17:00:00'
    },
    colorIndex: {
        type: Number,
        default: 0
    }

})
const emits = defineEmits([
    "openModal"
]);
const openModal = () => {
    emits("openModal");
}

let titlecolorList = ['#dff3fd', '#ffeadf', '#e1e2ff', '#e6fadd', '#fff6d6', '#e4f9f4', '#fedff0', '#f5e2fc', '#ebebeb']
</script>

<style lang="less" scoped>
.item-outbox {
    // background: #00a0e9;
    padding: 5px 0;
    margin-bottom: 10px;
    height: 27.2vh;
    min-height: 200px;
    min-width: 267px;
    border: 1px solid #dddddd;

    .item-outbox-upbox {
        height: 80px;
        border-bottom: 1px solid #dddddd;

        .item-valuebox,
        .item-titlebox {
            display: flex;
            justify-content: space-between;
            padding-right: 15px;
            padding-top: 5px;
        }

        .item-title {
            background-color: #dff3fd;
            font-size: 16px;
            padding: 2px 15px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            color: #333;

        }

        .item-opendetail {
            color: #686868;
            font-size: 16px;
        }

        .item-valuebox {
            padding: 5px 15px;

            .item-value {
                font-size: 24px;
                color: #000000;
                font-weight: 700;
                padding-right: 5px;
            }

            .itemmaxminbox {
                margin-top: 13px;
            }

            .item-maxbox {
                margin-right: 15px;
            }

            .item-Max {
                margin-right: 10px;
            }

            .item-maxvalue {
                color: #ff3d3d
            }

            .item-minvalue {
                color: #25b51d
            }
        }

    }

    .item-outbox-downbox {
        min-height: 120px;
        height: calc(27.2vh - 80px);
        display: flex;
        align-items: center;

        :deep(.ant-empty-normal p) {
            margin-bottom: 0
        }

        :deep(.ant-empty-normal) {
            margin: 0;
            width: 100%;
        }
    }

}

</style>

 linecharts组件：

<template>
  <div :id="id" style="height: 90%; width: 100%"></div>
</template>
<script setup>
import { onBeforeUnmount, watch, nextTick, ref, unref } from "vue";
// import dayjs from 'dayjs';
import { init } from "echarts";
const { id, title, dataObj } = defineProps({
  id: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  dataObj: {
    type: Object,
    default: () => ({
      xname: [],
      avg: [],
      max: [],
      min: [],
    }),
  },
});
let colorList = [
  "#5087ec",
  "#68bbc4",
  "#58a55c",
  "#dee124",
  "#e124b0",
  "#5d12a3",
  "#ed1a2d",
  "#39d3d3",
];
let charElc = null;
const initChart = (data) => {
  const eledom = document.getElementById(id);
  if (charElc === null) {
    charElc = init(eledom);
  }
  let option = {
    legend: {
      data: ["AVG", "MAX", "MIN"],
      orient: "horizontal",
      x: "left",
      padding: [0, 30, 10, 28],
      textStyle: {
        fontSize: 10,
      },
      itemHeight: 10,
      itemWidth: 22,
    },
    title: {
      text: title,
      left: "left",
      textStyle: {
        color: "white",
      },
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let str = params[0].name + `<br/>`;

        params.map((item, index) => {
          if (index !== 1) {
            str =
              str +
              item.marker +
              "  " +
              item.seriesName +
              ` <span>&nbsp;</span>` +
              item.value +
              " " +
              dataObj?.obj?.unit +
              `<br/>`;
          } else {
            str =
              str +
              item.marker +
              "  " +
              item.seriesName +
              " " +
              item.value +
              " " +
              dataObj?.obj?.unit +
              `<br/>`;
          }
        });
        return str;
      },
    },
    grid: {
      left: "6%",
      right: "6%",
      bottom: "3%",
      top: "18%",
      containLabel: true,
    },

    xAxis: {
      // yAxis: {
      type: "category",
      boundaryGap: true,
      // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      data: dataObj?.xname,
      // axisLabel: {//x轴字体
      //     // textStyle: { color: 'rgba(255,255,255,.8)' }
      //     // color: 'white'
      // },
      // axisLine: {//x轴线
      //     show: true,
      //     // lineStyle: { color: '#7384a1' }
      // },
      // nameLocation: 'end',   //X轴标题位置(选项有：end，start，center)
      // nameTextStyle: {        //X轴标题
      //     color: 'yellow',    //字体颜色
      //     fontSize: 14,       //字体大小
      //     padding: 5          //padding用来调整位置
      // },
    },
    yAxis: {
      // xAxis: {
      type: "value",
      axisLabel: {
        // textStyle: { color: 'whitet' }
        // color: 'white'
      },
      axisLine: {
        show: false, //Y轴线
        // lineStyle: { color: '#7384a1' }
      },
      splitLine: {
        //网格线
        // lineStyle: { color: '#7384a1' },
        // show: false
      },
    },
    color: colorList,
    series: [
      {
        name: "AVG",
        type: "line",
        // stack: 'Total',
        // data: [12, 13, 10, 13, 9, 12, 13, 10, 13, 9, 10, 13],
        data: dataObj?.avg,
        smooth: true,

        // itemStyle: {

        //     color: params => colorList[params.dataIndex]

        // }
      },
      {
        name: "MAX",
        type: "line",
        // stack: 'Total',
        // data: [12, 13, 10, 13, 9, 12, 13, 10, 13, 9, 10, 13],
        data: dataObj?.max,
        smooth: true,

        // itemStyle: {

        //     color: params => colorList[params.dataIndex]

        // }
      },
      {
        name: "MIN",
        type: "line",
        // stack: 'Total',
        // data: [5,13, 9, 10, 13, 13, 15,  13,13, 9, 12, 10, ],
        data: dataObj?.min,
        smooth: true,

        // itemStyle: {

        //     color: params => colorList[params.dataIndex]

        // }
      },
    ],
  };
  charElc.setOption(option);
  window.addEventListener("resize", () => {
    charElc.resize();
  });
  return charElc;
};

watch(
  [dataObj],
  ([currData]) => {
    if (currData) {
      nextTick(() => {
        initChart(currData);
      });
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onBeforeUnmount(() => {
  // clearInterval(timer);
  window.removeEventListener("resize", () => charElc?.resize());
  charElc?.dispose();
});
defineExpose({
  initChart,
});
</script>