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

news2024/11/19 8:50:13

我们都知道网页的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" @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"
              :max-height="350"
              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="{ row }">
                  <el-button type="danger" @click="deleteItemByIndex(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </div>
      <div class="right-grid" ref="myChart"></div>
    </div>
  </el-container>
</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 },
      ],
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
      input_axis: "",
      input_series: 0,
    };
  },
  mounted() {},
  methods: {
    create_axis() {
      //3.初始化实例对象 echarts.init(dom容器)
      var data_xAxis = [];
      var data_series = [];
      var data_legend = ["销量"];
      for (var i = 0; i < this.table_data.length; i++) {
        data_xAxis.push(this.table_data[i].axis);
        data_series.push(this.table_data[i].series);
      }
      var dom = this.$refs["myChart"]; // 获取dom节点
      var myChart = this.echarts.init(dom);
      //4.指定配置项和数据
      var option = {
        title: {
          text: "echart入门示例",
        },
        tooltip: {},
        legend: {
          data: data_legend,
        },
        xAxis: {
          data: data_xAxis,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: data_series,
          },
        ],
      };
      //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    deleteItemByIndex(row) {
      var index = this.table_data.findIndex((item) => item.id == row.id);
      this.table_data.splice(index, 1);
    },
    insertData() {
      this.table_data.push({
        axis: this.input_axis,
        series: this.input_series,
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 35% 65%;
  width: 100%;
  height: 80vh;
}

.left-grid {
  background-color: #f0f0f0;
  border-radius: 2%;
  padding: 20px;
  height: 100%;
}

.right-grid {
  background-color: #e9d7df;
  border-radius: 2%;
  padding: 20px;
  height: 100%;
}

.grid-content1 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 35vw;
}

.grid-content2 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 65vw;
}

.bg-purple {
  background: #7e2970;
}
.bg-purple-light {
  background: #071c4d;
}
</style>

这边需要提一下在vue3中echarts的引入和使用

首先需要使用npm在项目中引入echarts，npm install echarts --save

然后在main.js中引入echarts并且添加到vue的环境变量中

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as echarts from "echarts";

const app = createApp(App);
app.use(store).use(router).use(ElementPlus).use(echarts);

app.config.globalProperties.$echarts = echarts;
app.mount("#app");

在使用的时候使用 getCurrentInstance().appContext.config.globalProperties.$echarts 进行引入