基于vue+element-plus+echarts制作动态绘图页面（柱状图，饼图和折线图）

本文链接：https://blog.youkuaiyun.com/haohulala/article/details/135034247

本文详细介绍了如何使用Vue、Element-Plus和echarts库创建动态图表，包括柱状图、饼状图和折线图的动态数据绑定和渲染，以及如何通过表单输入动态修改数据并实时更新图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我们知道echarts是一个非常强大的绘图库，基于这个库，我们可以绘制出精美的图表。对于一张图来说，其实比较重要的就是配置项，填入不同的配置内容就可以呈现出不同的效果。

当然配置项中除了样式之外，最重要的就是数据了，因为图表本身就是用来展示数据的，我们在使用echarts的时候，通常都是通过网络去接受数据，然后进行展示，如果需要绘制特定数据的图表，则需要编程实现，这非常麻烦。为了解决这个我们，我们可以写一个可以动态更改数据的页面来进行动态图表的绘制。

绘制柱状图

通过填入数据可以在线绘制柱状图，并且可以动态修改数据，效果如下图所示

在页面上可以动态插入和删除数据，图表可以正确做出响应，完整的代码如下所示

<template>
  <div class="container">
    <div class="left-grid">
      <el-card>
        <el-row>
          <el-form>
            <el-form-item label="柱状图标题">
              <el-input v-model="title"></el-input>
            </el-form-item>
            <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" @click="create_axis"
                >点击生成表格</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </el-card>
      <el-card>
        <el-row>
          <el-table :data="table_data" :show-header="true" :height="320" stripe>
            <el-table-column type="index" label="序号" width="100%">
            </el-table-column>
            <el-table-column prop="axis" label="横坐标"></el-table-column>
            <el-table-column prop="series" label="纵坐标"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="danger" @click="deleteItemByIndex(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <div class="right-grid" ref="myChart"></div>
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
export default {
  data() {
    return {
      table_data: [
        { axis: "衬衫", series: 5 },
        { axis: "羊毛衫", series: 20 },
        { axis: "雪纺衫", series: 36 },
        { axis: "裤子", series: 10 },
        { axis: "高跟鞋", series: 10 },
        { axis: "袜子", series: 20 },
      ],
      title: "在线绘制柱状图",
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
      input_axis: "",
      input_series: 0,
    };
  },
  mounted() {
    this.create_axis();
  },
  methods: {
    create_axis() {
      //3.初始化实例对象 echarts.in