基于vue+element-plus+echarts编写动态绘图页面

haohulala

已于 2023-11-25 21:48:58 修改

阅读量1.6k

点赞数 6

分类专栏：前端学习笔记文章标签： vue.js 前端 javascript

于 2023-11-25 21:36:19 首次发布

本文链接：https://blog.csdn.net/haohulala/article/details/134620441

版权

本文介绍了如何使用Vue框架创建一个前端页面，通过用户输入数据实现echarts图表的动态生成和编辑。通过数据维护和双向绑定，用户可以直接编辑数据，无需编写复杂的图表逻辑，展示了数据驱动图表开发的基本思路。

摘要由CSDN通过智能技术生成

我们都知道网页的echarts可以画图，但是很多情况下都需要编码实现绘图逻辑，如果有一个前端页面可以让我输入数据然后动态生成图表的话那么该多好，其实这个需求不难实现，先看效果。

整体页面分为左右两个部分，其中左边的部分用来编辑数据，右边的部分用来显示图表，左边上半部分用来编辑插入数据和生成表格，下半部分用来展示数据。

总体的思路就是使用一个数据维护数据，然后在插入和删除数据的时候都是修改这个数组，完整的代码如下所示

<template>
  <el-container>
    <div class="container">
      <div class="left-grid">
        <el-card>
          <el-row>
            <el-form>
              <el-form-item label="横坐标">
                <el-input v-model="input_axis"></el-input>
              </el-form-item>
              <el-form-item label="纵坐标">
                <el-input v-model="input_series"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="insertData"
                  >插入数据</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="medium"