基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)

前言

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

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

绘制柱状图

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

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)_第1张图片

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






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

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)_第2张图片

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

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)_第3张图片

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

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)_第4张图片

绘制饼状图

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

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






我们同样是维护一组数据

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)_第8张图片

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

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)_第9张图片

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

基于vue+element-plus+echarts制作动态绘图页面(柱状图,饼图和折线图)_第10张图片

结语

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

你可能感兴趣的:(前端学习笔记,vue.js,echarts,前端)