echarts的使用和响应式

1.在npm中进行下载

npm install echarts --save

 2.局部引入

import * as echarts from 'echarts'

3.使用栅格进行响应式操作

可以参考 elemnet组件中的 Layout 布局

完整的vue项目中的使用如下：

<template>

  <div class="dashboard-box">

    <!-- 商品数量、未发货、七日订单 -->

    <!--栅格间隔-->

    <el-row :gutter="20">

      <!-- 栅格占据的列数 -->

      <el-col :span="8">

        <el-space direction="vertical">

          <el-card class="box-card">

            <div class="card-content">

              <div>

                <svg t="1656638038042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2263" width="40" height="40">

                  <path

                    d="M258.233 86.657c18.193 0 33.574 6.328 46.26 18.955 12.627 12.656 18.955 28.081 18.955 46.274v110.933c0 18.179-6.328 33.604-18.955 46.26-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.066-18.955 46.23-18.955h110.962v-0.001z m307.603 0c18.163 0 33.589 6.328 46.229 18.955 12.672 12.656 18.984 28.081 18.984 46.274v110.933c0 18.179-6.313 33.604-18.984 46.26-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.081-18.955 46.23-18.955h112.925v-0.001z m303.677 0c18.193 0 33.617 6.328 46.26 18.955 12.656 12.656 18.984 28.081 18.984 46.274v110.933c0 18.179-6.328 33.604-18.984 46.26-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.066-18.955 46.23-18.955h112.897v-0.001z m-611.28 305.655c18.193 0 33.574 6.328 46.26 18.955 12.627 12.656 18.955 28.066 18.955 46.23v110.991c0 18.149-6.328 33.574-18.955 46.23-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.066-18.955 46.23-18.955h110.962z m307.603 0c18.163 0 33.589 6.328 46.229 18.955 12.672 12.656 18.984 28.066 18.984 46.23v110.991c0 18.149-6.313 33.574-18.984 46.23-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.081-18.955 46.23-18.955h112.925z m303.677 0c18.193 0 33.617 6.328 46.26 18.955 12.656 12.656 18.984 28.066 18.984 46.23v110.991c0 18.149-6.328 33.574-18.984 46.23-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.066-18.955 46.23-18.955h112.897z m-611.28 305.639c18.193 0 33.574 6.328 46.26 18.97 12.627 12.671 18.955 28.052 18.955 46