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

news2024/9/21 12:36:16

前言

我们知道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制作动态绘图页面的方法，希望对你有所帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1316589.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Mr. Cappuccino的第66杯咖啡——解决MacOS中终端下的中文乱码问题

Mr. Cappuccino的第66杯咖啡——解决MacOS中终端下的中文乱码问题

解决MacOS中终端下的中文乱码问题 中文乱码问题解决方法 中文乱码问题 解决方法 查看Mac使用的是哪个shell echo $SHELL我这里使用的是zsh&#xff0c;将配置添加到.zshrc配置文件中 vi ~/.zshrc 输入i进入编辑模式 esc退出编辑模式 :wq# UTF-8 export LANGen_US.UTF-8加载配…
阅读更多...
k8s-1.23版本安装

k8s-1.23版本安装

一、主机初始化 1、修改主机名 hostnamectl set-hostname master hostnamectl set-hostname node1 hostnamectl set-hostname node2 hostnamectl set-hostname node32、主机名解析 echo 192.168.1.200 master >> /etc/hosts echo 192.168.1.201 node1 >>…
阅读更多...
CSS 基础

CSS 基础

文章目录 CSS 常见的属性CSS 常见样式行内样式内嵌样式导入样式 CSS 选择器标签选择器id选择器类选择器全局选择器属性选择器组合选择器 CSS 常见应用表格列表导航栏下拉菜单提示工具图片廊 CSS (Cascading Style Sheets&#xff0c;层叠样式表&#xff09;&#xff0c;是一种用…
阅读更多...
《工程数值计算Python教程》笔记

《工程数值计算Python教程》笔记

文章目录 [toc]第一章&#xff1a;绪论 1.1 1.1 1.1|数值计算在工程科学中的重要性 1.2 1.2 1.2|数值计算方法 1.3 1.3 1.3|程序设计盒图计算方法的选取减少运算次数避免相近的数相减 1.4 1.4 1.4|误差的来源、表示及传递误差的来源和分类模型误差观测误差截断误差舍入误差 误差…
阅读更多...
【 某景点舆情分析：Python、Echarts、Flask、文本处理技术的应用】

【 某景点舆情分析：Python、Echarts、Flask、文本处理技术的应用】

某景点舆情分析&#xff1a;Python、Echarts、Flask、文本处理技术的应用 前言技术栈数据获取与准备景点数据统计分析评论数据处理与分析词频统计分词与文本处理情感分析 数据可视化Web应用搭建结语 前言 随着旅游行业的蓬勃发展&#xff0c;越来越多的人通过网络平台获取关于…
阅读更多...
vue3 setup语法糖写法基本教程

vue3 setup语法糖写法基本教程

前言 官网地址&#xff1a;Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)下面只讲Vue3与Vue2有差异的地方&#xff0c;一些相同的地方我会忽略或者一笔带过与Vue3一同出来的还有Vite&#xff0c;但是现在不使用它&#xff0c;等以后会有单独的教程使用。目前仍旧使用v…
阅读更多...
opencv 十六 python下各种连通域处理方法（按面积阈值筛选连通域、按面积排序筛选连通域、连通域分割等方法）

opencv 十六 python下各种连通域处理方法（按面积阈值筛选连通域、按面积排序筛选连通域、连通域分割等方法）

本博文基于python-opencv实现了按照面积阈值筛选连通域、按照面积排序筛选topK连通域、 连通域细化（连通域骨架提取）、连通域分割（基于分水岭算法使连通域在细小处断开）、按照面积排序赛选topK轮廓等常见的连通域处理代码。并将代码封装为shapeUtils类，在自己的python代码…
阅读更多...
Llama 架构分析

Llama 架构分析

从代码角度进行Llama 架构分析 Llama 架构分析前言Llama 架构分析分词网络主干DecoderLayerAttentionMLP 下游任务因果推理文本分类 Llama 架构分析 前言 Meta 开发并公开发布了 Llama系列大型语言模型 (LLM)&#xff0c;这是一组经过预训练和微调的生成文本模型&#xff0c;参…
阅读更多...
AWS向量数据库Amazon OpenSearch Service使用测评

AWS向量数据库Amazon OpenSearch Service使用测评

前言 在大模型盛行的当今&#xff0c;选择适宜的数据库显得尤为重要。因为你需要面对海量训练数据&#xff0c;快速的检索至关紧要&#xff0c;以及对于存储的要求也是至关重要的。对于海量的数据查询和存储是需要巨大的算力支持。向量数据库常用在一些图像文本或者视频的生成…
阅读更多...
了解 Flutter 3.16 功能更新

了解 Flutter 3.16 功能更新

作者 / Kevin Chisholm 我们在季度 Flutter 稳定版发布会上带来了 Flutter 3.16&#xff0c;此版本包含诸多更新: Material 3 成为新的默认主题、为 Android 带来 Impeller 的预览版、允许添加适用于 DevTools 的扩展程序等等&#xff0c;以及同步推出 Flutter 休闲游戏工具包重…
阅读更多...
php查询数据库，并通过表格展示

php查询数据库，并通过表格展示

第一步&#xff1a;创建数据库 创建一个数据库php-crud 第二步&#xff1a;创建数据库表 在数据库php-crud下创建一个歌曲表song /*Navicat Premium Data TransferSource Server : MariaDBSource Server Type : MariaDBSource Server Version : 100605 (10.6.5-M…
阅读更多...
PrimDiffusion：3D 人类生成的体积基元扩散模型NeurIPS 2023

PrimDiffusion：3D 人类生成的体积基元扩散模型NeurIPS 2023

NeurIPS2023 &#xff0c;这是一种用于 3D 人体生成的体积基元扩散模型&#xff0c;可通过离体拓扑实现明确的姿势、视图和形状控制。 PrimDiffusion 对一组紧凑地代表 3D 人体的基元执行扩散和去噪过程。这种生成建模可以实现明确的姿势、视图和形状控制&#xff0c;并能够在…
阅读更多...
linux 开机启动流程

linux 开机启动流程

1.打开电源 2.BIOS 有时间和启动方式 3.启动Systemd 其pid为1 4.挂载引导分区 /boot 5.启动各种服务 如rc.local
阅读更多...
Ps：形状工具 - 描边选项

Ps：形状工具 - 描边选项

在形状工具的工具选项栏或“属性”面板中&#xff0c;单击“设置形状描边类型” Set shape stroke type菜单图标可打开“描边选项” Stroke Options面板。 描边预设 Stroke Type 默认列出了实线、虚线和点线三种类型的描边&#xff0c;单击可应用。 自己创建并存储的描边类型&a…
阅读更多...
蓝桥杯专题-真题版含答案-【国庆星期日】【三色棋】【蒙地卡罗法求 PI】【格雷码（Gray Code）】

蓝桥杯专题-真题版含答案-【国庆星期日】【三色棋】【蒙地卡罗法求 PI】【格雷码（Gray Code）】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…
阅读更多...
selenium-grid4.3.0两种模式记录

selenium-grid4.3.0两种模式记录

selenium-grid4.3.0两种模式记录 本文运行&#xff0c;需要提前配置好Java11以及安装好Chrom、Firefox、Safari其中一个浏览器&#xff0c;如果是Chrom、Firefox需要下载对应版本的驱动&#xff0c;并给 webdriver 配置环境变量&#xff0c;Safari浏览器Mac系统会自带&#xf…
阅读更多...
SQL进阶理论篇（八）：SQL查询的IO成本

SQL进阶理论篇（八）：SQL查询的IO成本

文章目录 简介数据库缓冲池查看缓冲池的大小数据页加载的三种方式通过 last_query_cost 统计 SQL 语句的查询成本总结参考文献 简介 本节将介绍磁盘IO是如何加载数据的&#xff0c;重点介绍一下数据库缓冲池的概念。主要包括&#xff1a; 什么是数据库缓冲池&#xff0c;它在…
阅读更多...
CSS学习笔记整理

CSS学习笔记整理

CSS 即 层叠样式表/CSS样式表/级联样式表&#xff0c;也是标记语言&#xff0c; 用于设置HTML页面中的文本内容&#xff08;字体、大小、对齐方式等&#xff09;、图片的外形&#xff08;宽高、边框样式、边距&#xff09;以及版面的布局和外观显示样式 目录 准备工作 Chrome调…
阅读更多...
关于反射机制的简单理解

关于反射机制的简单理解

1、反射的简单认识 1.1 定义 Java的反射&#xff08;reflection&#xff09;机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意方法和属性&#xff0c;既然能拿到,那么我…
阅读更多...
持续集成交付CICD：Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用

持续集成交付CICD：Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用

目录 一、实验 1.部署Ansible自动化运维工具 2.K8S 节点安装nginx 3.Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用 二、问题 1.ansible安装报错 2.ansible远程ping失败 3. Jenkins流水线通过ansible命令直接ping多台机器的网络状态报错 一、实验 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023