前端如何画图表charts？

先贴一个官方echarts的链接：
https://echarts.apache.org/examples/zh/index.html

下面是我自己在企业开发中，写的代码：语言vue

<template>
  <page-container title="监控运行状态">
    <a-card :bordered="false">
        <a-row>
          <a-col :xs="24" :sm="24" :xl="24" :xxl="8">
            <div id="0" :style="{ width: '700px', height: '350px' }"></div>
          </a-col>
          <a-col :xs="24" :sm="24" :xl="24" :xxl="8" :push="4">
            <div id="1" :style="{ width: '700px', height: '350px' }"></div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24" :xl="24" :xxl="8">
            <div id="2" :style="{ width: '700px', height: '350px' }"></div>
          </a-col>
          <a-col :xs="24" :sm="24" :xl="24" :xxl="8" :push="4">
            <div id="3" :style="{ width: '700px', height: '350px' }"></div>
          </a-col>
        </a-row>
       <a-row>
          <a-col :xs="24" :sm="24" :xl="24" :xxl="8">
            <div id="4" :style="{ width: '700px', height: '350px' }"></div>
          </a-col>
          <a-col :xs="24" :sm="24" :xl="24" :xxl="8" :push="4">
            <div id="5" :style="{ width: '700px', height: '350px' }"></div>
          </a-col>
        </a-row>
    </a-card>
    <a-input v-model:value="formState.missionId" v-show="false"></a-input>
  </page-container>
</template>

<script lang="ts" setup>
import { PageContainer } from '@ant-design-vue/pro-layout'
import { getChartsApi} from '@/api/checktaskrunningApi'
import { onMounted,  onUnmounted,  reactive,  ref, UnwrapRef } from 'vue'
import * as echarts from 'echarts'
import { sleep } from '@/utils'
import { useRouter } from 'vue-router'

    let taskInterval;

    interface FormState {
      [k: string]: any
    }
    const formState: UnwrapRef<FormState> = reactive({
      templateName: '',
    })
  const chartsVisiable = ref<boolean>(true)
  const router = useRouter()

  onMounted(()=>{
    const missionId = router.currentRoute.value.query.missionId
    formState.missionId = missionId;
    chartsVisiable.value = true;
    formState.chartsVisiable = true;
    getCharts();
    taskInterval = setInterval(getCharts, 10000); 
  })

  onUnmounted(() => {
    clearInterval(taskInterval)
  })

    // 拿到全部图表数据
    async function getCharts() {

      const chartsData = await getChartsApi(formState.missionId);
      if(chartsData.data == null){
        alert("没有可以获取的监控图")
        return;
      }
      var index = 0;
      chartsData.data.forEach(element => {
        drawLine(index, element);
        index++;
      });
    }

    // 绘制单个折线图
    async function drawLine(id,singleCharts) {
      // 拿到全部IP
      let allIp = await filterIP(singleCharts);
      // 拿到全部x坐标
      var allX = await filterX(singleCharts);
      // console.log("document.getElementById:"+document.getElementById(id))

      let ref = echarts.init(document.getElementById(id))

      // console.log("singleCharts.title"+singleCharts.title)
      // console.log("allIp"+JSON.stringify(allIp))
      // console.log("allX"+JSON.stringify(allX))
      ref.setOption({
        title: { text: singleCharts.title },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: singleCharts.title,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
 
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: allX,
        },
        yAxis: {
          type: "value",
        },
 
        series: allIp,
      });
      return ref;
    }

    interface SeriesDataType {
      name: string
      type: "line"
      stack: "Total"
      data: []
    }
    async function filterIP(singleCharts) {
      let result = ref<SeriesDataType[]>([])
      let list = []
      singleCharts.lineModelList.forEach(element => {
        let y = []
        element.details.forEach(element => {
          y.push(element.y)
        });
        // console.log("y:"+JSON.stringify(y))
        // console.log("element.ip:"+element.ip)
        list.push({
          name: element.ip,
          type: "line",
          stack: "Total",
          data: y
        })
        // console.log("list:"+JSON.stringify(list))

      });
      return list;
    }
    async function filterX(singleCharts) {
      let x = []
      singleCharts.lineModelList.forEach(element => {

        element.details.forEach(element => {
          x.push(element.x)
        });
      });
      // console.log("x"+JSON.stringify(x));
      return x;
    }






</script>

关于服务端返回体，如果本篇看的人多我再发~ 😋 皮一下