前端如何画图表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=