基于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或者multipleselectedOffset: 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.rhkb.cn/news/220765.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

07-抽象工厂

意图 提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类。 适用性 在以下的情况可以选择使用抽象工厂模式&#xff1a; 一个系统要独立于它的产品的创建、组合和表示。一个系统要由多个产品系列中的一个来配置。要强调一系列相关的产品对象的…

linux驱动的学习 驱动开发初识

1 设备的概念 在学习驱动和其开发之前&#xff0c;首先要知道所谓驱动&#xff0c;其对象就是设备。 1.1 主设备号&次设备号&#xff1a; 在Linux中&#xff0c;各种设备都以文件的形式存在/dev目录下&#xff0c;称为设备文件。最上层的应用程序可以打开&#xff0c;关…

云原生之深入解析减少Docker镜像大小的优化技巧

一、什么是 Docker&#xff1f; Docker 是一种容器引擎&#xff0c;可以在容器内运行一段代码&#xff0c;Docker 镜像是在任何地方运行应用程序而无需担心应用程序依赖性的方式。要构建镜像&#xff0c;docker 使用一个名为 Dockerfile 的文件&#xff0c;Dockerfile 是一个包…

数据分析场景下,企业大模型选型的思路与建议

来源/作者&#xff1a;爱分析 随着大模型带来能力突破&#xff0c;让AI与数据分析相互结合&#xff0c;使分析结果更好支撑业务&#xff0c;促进企业内部数据价值释放&#xff0c;成为了当下企业用户尤为关注的话题。本次分享主要围绕数据分析场景下大模型底座的选型思路&#…

Kafka 安装与部署

目录 Kafka 下载 &#xff08;1&#xff09;将 kafka_2.11-2.4.1.tgz 上传至 /opt/software/ &#xff08;2&#xff09;解压安装包至 /opt/module/ [huweihadoop101 ~]$ cd /opt/software/ [huweihadoop101 software]$ tar -zxvf kafka_2.11-2.4.1.tgz -C ../module/&#…

什么是供应链安全及其工作原理?

6000公里长的丝绸之路将丝绸、谷物和其他货物从中国运送到帕尔米拉。尽管蒙古治下的和平保护丝绸之路免受海盗、强盗和内部盗窃的侵害&#xff0c;但商人仍然装备精良&#xff0c;并依赖于大型商队旅行和战略性放置的小型堡垒所提供的安全。 为什么供应链安全很重要&#xff1…

Content-Type是什么

目录 Content-Type是什么 获取方式 设置方式 常见类型 application/x-www-form-urlencoded multipart/form-data application/json text/xml text/html text/plain Content-Type是什么 Content-Type出现在请求标头和响应标头中&#xff0c;意思是内容类型&#xff0…

JAVA主流日志框架梳理学习及使用

前言&#xff1a;目前市面上有挺多JAVA的日志框架&#xff0c;比如JUL(JDK自带的日志框架),Log4j,Logback,Log4j2等&#xff0c;有人可能有疑问说还有slf4j&#xff0c;不过slf4j不是一种日志框架的具体实现&#xff0c;而是一种日志门面&#xff08;日志门面可以理解为是一种统…

PyTorch机器学习与深度学习

近年来&#xff0c;随着AlphaGo、无人驾驶汽车、医学影像智慧辅助诊疗、ImageNet竞赛等热点事件的发生&#xff0c;人工智能迎来了新一轮的发展浪潮。尤其是深度学习技术&#xff0c;在许多行业都取得了颠覆性的成果。另外&#xff0c;近年来&#xff0c;Pytorch深度学习框架受…

定制 Electron 窗口标题栏

Electron 是一款流行的桌面应用开发框架&#xff0c;基于 Web 技术构建&#xff0c;提供了强大的跨平台能力。在开发过程中&#xff0c;经常需要定制窗口标题栏以创造独特的用户体验。 1. 完全隐藏默认标题栏 有时候&#xff0c;我们希望创建一个自定义的标题栏&#xff0c;完…

通话状态监听-Android13

通话状态监听-Android13 1、Android Telephony 模块结构2、监听和广播获取通话状态2.1 注册2.2 通话状态通知2.3 通话状态 3、通知状态流程* 关键日志 frameworks/base/core/java/android/telephony/PhoneStateListener.java 1、Android Telephony 模块结构 Android Telephony…

Arma3/武装突袭3东风战役最后一关游戏无法保存的解决办法

Arma3这个游戏玩进去还是非常有可玩性的&#xff0c;可是在玩过了它本体自带的东风系列战役后&#xff0c;在最精髓的最后一关——game over这个关卡&#xff0c;却有个非常头疼的问题。 逃跑其实是非常简单的&#xff0c;但是想要无伤环游全岛确十分困难&#xff0c;因为这关卡…

【密码学】群的证明(习题)

0.前置知识 1.习题 记录一次密码学作业~群的判定 2.求解

MATLAB 点云中心化 (40)

MATLAB 点云中心化 一、算法介绍二、算法实现一、算法介绍 使用点云集合中的坐标计算质心,这里将其作为中心,将每个点坐标减去该中心坐标,即可得到中心化的点云,这在很多处理中是必须进行的一个步骤:相当于点云移动到以质心为原点的坐标系 (主要是计算质心和点云偏移两个…

AI日报:OpenAI扩大创业基金计划

欢迎订阅专栏 《AI日报》 获取人工智能邻域最新资讯 文章目录 OpenAI拓宽Converge启动程序变压器模型背后的思想建立启动融资新闻AutoGen AI支点其他 OpenAI拓宽Converge启动程序 ChatGPT制造商OpenAI正在扩大其Converge AI创业计划。 OpenAI的Converge产品于2022年12月首次…

构建高效持久层:深度解析 MyBatis-Plus(02)

目录 引言1. 逻辑删除1.1 概述1.2 逻辑删除的优势1.3.为什么使用逻辑删除1.4 综合案例 2. 乐观锁和悲观锁2.1.什么是乐观锁和悲观锁2.2.乐观锁和悲观锁的区别2.3.综合案例 3. 分页插件总结 引言 在现代软件开发中&#xff0c;数据库操作是不可或缺的一环。为了提高系统的性能、…

【马来西亚会议】第四届计算机技术与全媒介融合设计国际学术会议(CTMCD 2024)

第四届计算机技术与全媒介融合设计国际学术会议&#xff08;CTMCD 2024) 2023 4th International Conference on Computer Technology and Media Convergence Design 第四届计算机技术与全媒介融合设计国际学术会议&#xff08;CTMCD 2024&#xff09;将于 2024年2月23日-25日…

数据分析思维导图

参考&#xff1a; https://zhuanlan.zhihu.com/p/567761684?utm_id0 1、数据分析步骤地图 2、数据分析基础知识地图 3、数据分析技术知识地图 4、数据分析业务流程 5、数据分析师能力体系 6、数据分析思路体系 7、电商数据分析核心主题 8、数据科学技能书知识地图 9、数据挖掘…

机器学习算法---回归

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…

算法:程序员的数学读书笔记

目录 ​0的故事 ​一、按位计数法 二、不使用按位计数法的罗马数字 三、十进制转二进制​​​​​​​ ​四、0所起到的作用​​​​​​​ 逻辑 一、为何逻辑如此重要 二、兼顾完整性和排他性 三、逻辑 四、德摩根定律 五、真值表 六、文氏图 七、卡诺图 八、逻…