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

前言

我们知道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.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: this.title,
        },
        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.axis == row.axis);
      this.table_data.splice(index, 1);
      this.create_axis();
    },
    insertData() {
      this.table_data.push({
        axis: this.input_axis,
        series: this.input_series,
      });
      this.create_axis();
    },
  },
};
</script>

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

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

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

.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>

在进行数据修改的时候我们主要是对这个列表进行处理，其中axis是横坐标，series是纵坐标

当需要重新渲染图表的时候需要将这两个维度的数据分别提取出来，变成两个列表，赋值给option相应的配置项

data_xAxis代表横轴的数据，data_series代表纵轴的数据

绘制饼状图

饼状图的数据格式和柱状图稍微有点不同，先看一下饼状图的绘制效果

下面是绘制饼状图的完整代码

<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_name"></el-input>
            </el-form-item>
            <el-form-item label="数值">
              <el-input v-model="input_value"></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="pie_data" :show-header="true" :height="320" stripe>
            <el-table-column type="index" label="序号" width="100%">
            </el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="value" 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 {
      pie_data: [
        { name: "制造业", value: 55.217 },
        { name: "金融业", value: 21.714 },
        { name: "采矿业", value: 4.333 },
        { name: "信息传输、软件和信息技术服务业", value: 4.308 },
        { name: "交通运输、仓储和邮政业", value: 3.242 },
        { name: "电力、热力、燃气及水的生产和供应业", value: 3.193 },
      ],
      title: "在线绘制饼状图",
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
      input_name: "",
      input_value: 0,
    };
  },
  mounted() {
    this.create_pie();
  },
  methods: {
    create_pie() {
      console.log(this.pie_data);
      var myChart = this.echarts.init(this.$refs["myChart"]);
      var option = {
        title: {
          text: this.title, //标题
        },
        tooltip: {},
        legend: {
          y: 50,
          textStyle: {
            fontSize: 14,
          },
        },
        label: {
          show: true,
        },
        series: [
          {
            name: "分布", //数据的名字
            type: "pie", //表示柱状图
            radius: "70%", //圆的半径
            center: ["50%", "60%"],
            label: {
              formatter: function (params) {
                console.log(params.name + " " + params.value + "%");
                return params.name + " " + params.value + "%";
              },
              textStyle: {
                fontSize: 14,
                fontWeight: "bolder",
              },
              color: "inherit",
            },
            data: this.pie_data,
            selectedMode: "single", //选中效果，使选中区域偏离圆心一小段距离，single或者multiple
            selectedOffset: 10, //偏离圆心的一小段距离
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    deleteItemByIndex(row) {
      var index = this.pie_data.findIndex((item) => item.name == row.name);
      this.pie_data.splice(index, 1);
      this.create_pie();
    },
    insertData() {
      this.pie_data.push({
        name: this.input_name,
        value: this.input_value,
      });
      this.create_pie();
    },
  },
};
</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: 90%;
}

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

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

  border-radius: 4px;

  height: 100vh;

  width: 35vw;
}

 绘制饼状图比较简答，我们只需要维护一组数据就行了，不需要进行数据转换

可以看到数据是一个列表，每个列表项都包含了name和value两个值，其中name代表种类，value代表数值，最后绘制的时候会按照百分比在饼图中进行划分。

在option中直接使用这个数据列表就行了

绘制折线图

我们最后来看一下折线图，折线图的绘制思路和柱状图几乎是一样的，我们需要维护一组数据，当需要重新渲染图表的时候需要对数据进行一下转换，先看一下效果

绘制折线图的完整代码如下

<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_xaxis"></el-input>
            </el-form-item>
            <el-form-item label="纵坐标">
              <el-input v-model="input_yaxis"></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="xaxis" label="横坐标"></el-table-column>
            <el-table-column prop="yaxis" 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: [
        { xaxis: "2023-5-1", yaxis: 5 },
        { xaxis: "2023-6-1", yaxis: 20 },
        { xaxis: "2023-7-1", yaxis: 36 },
        { xaxis: "2023-8-1", yaxis: 10 },
        { xaxis: "2023-9-1", yaxis: 10 },
        { xaxis: "2023-10-1", yaxis: 20 },
      ],
      title: "在线绘制折线图",
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
      input_xaxis: "",
      input_yaxis: 0,
    };
  },
  mounted() {
    this.create_axis();
  },
  methods: {
    create_axis() {
      //3.初始化实例对象 echarts.init(dom容器)
      var data_xAxis = [];
      var data_yAxis = [];
      for (var i = 0; i < this.table_data.length; i++) {
        data_xAxis.push(this.table_data[i].xaxis);
        data_yAxis.push(this.table_data[i].yaxis);
      }
      console.log(data_xAxis);
      console.log(data_yAxis);
      var dom = this.$refs["myChart"]; // 获取dom节点
      var myChart = this.echarts.init(dom);
      //4.指定配置项和数据
      var option = {
        title: {
          text: this.title,
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data_xAxis,
        },
        yAxis: {
          type: "value",
        },
        legend: {},
        series: [
          {
            name: "示例数据",
            data: data_yAxis,
            type: "line",
            areaStyle: {},
            // label标签用来显示每个点的值
            label: {
              show: true,
              position: "top",
            },
            smooth: true,
          },
        ],
      };
      //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    deleteItemByIndex(row) {
      console.log(row);
      var index = this.table_data.findIndex((item) => item.xaxis == row.xaxis);
      this.table_data.splice(index, 1);
      this.create_axis();
    },
    insertData() {
      this.table_data.push({
        xaxis: this.input_xaxis,
        yaxis: this.input_yaxis,
      });
      this.create_axis();
    },
  },
};
</script>

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

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

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

.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>

我们同样是维护一组数据

当需要重新渲染图像的时候再进行一下格式转换，将一个列表变成两个列表

最后在option配置项中填入横坐标和纵坐标

结语

本文介绍了基于vue+element-plus+echarts制作动态绘图页面的方法，希望对你有所帮助。