Vue3 Element-UI中使用ECharts（前端数据展示开发）

news2024/10/13 6:19:58

  • 前端数据展示（数据可视化、数据大屏等）可使用的工具比较多，很多第三方都提供了在线平台，比如阿里云，只需数据接口，在线配置一下界面即可使用。

    1. 阿里云的使用：利用阿里云物联网平台（IoT）实现WEB数据可视化
    2. 第三方平台对比：有哪些免费简单的数据展示（数据可视化）网站

  • 也可以使用开源代码自己开发前端，本文所介绍的就是ECharts的开发，这是一款基于JavaScript 的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

    1. 官方网站：https://echarts.apache.org/zh/index.html
    2. 官方示例：https://echarts.apache.org/examples/zh/index.html
    3. 官方指南：https://echarts.apache.org/handbook/zh/get-started/

注意，本文是在Vue3版本下的Element-UI中使用，ECharts官网打开较慢，可尝试翻越。

在这里插入图片描述

安装

npm install echarts --save

调用

创建一个*.vue页面，实现方法如下三种。

1. 本页数据

修改官方代码：https://echarts.apache.org/handbook/zh/basics/import

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts'
</script>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  // DOM 渲染完成触发
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });        
  }
}
</script>

在这里插入图片描述

2. 调用数据

修改官方的线性图示例图代码，修改为线性和柱状混合展示图
https://echarts.apache.org/examples/zh/editor.html?c=data-transform-filter&lang=js

另需准备一个json文件，下载自官网：https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json
本例中将文件放于根目录，本例中路径为：http://localhost/life-expectancy-table.json

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  // DOM 渲染完成触发
  mounted() {
  	// 数据来源，注意自行修改
    var url = 'http://localhost/life-expectancy-table.json';
    
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    // 每隔三秒发起请求，获取数据并绘制图表
    nextTick(() => {
      setInterval(() => {
      	// 执行
        this.run(url, myChart);
      }, 3000)
    })  
  },
  methods: {
  	// 执行
    run (url, obj){
      // 调用json
      axios.get(url).then(res => {
        let option = {
          dataset: [
            {
              id: 'dataset_raw',
              source: res.data
            },
            {
              id: 'dataset_since_1950_of_germany',
              fromDatasetId: 'dataset_raw',
              transform: {
                type: 'filter',
                config: {
                  and: [
                    { dimension: 'Year', gte: 1950 },
                    { dimension: 'Country', '=': 'Germany' }
                  ]
                }
              }
            },
            {
              id: 'dataset_since_1950_of_france',
              fromDatasetId: 'dataset_raw',
              transform: {
                type: 'filter',
                config: {
                  and: [
                    { dimension: 'Year', gte: 1950 },
                    { dimension: 'Country', '=': 'France' }
                  ]
                }
              }
            }
          ],
          title: {
            text: 'Income of Germany and France since 1950'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            nameLocation: 'middle'
          },
          yAxis: {
            name: 'Income'
          },
          series: [
            {
              type: 'line',
              datasetId: 'dataset_since_1950_of_germany',
              showSymbol: false,
              encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income']
              }
            },
            {
              type: 'bar',
              datasetId: 'dataset_since_1950_of_france',
              showSymbol: false,
              encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income']
              }
            }
          ]
        };
        
        obj.setOption(option);
      })
    }     
  }
}
</script>

展示图
在这里插入图片描述

  • 可以顺便学习一下vue3中 nextTick 的具体用法。

3. 异步调用

还是上面的例子（实现略有不同），setInterval()中原有的run()函数改为了getOpt()函数，主要用来学习axios如何返回值~~
学习：获取axios的return值

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  // DOM 渲染完成触发
  mounted() {
  	// 数据来源，注意自行修改
    var url = 'http://localhost/life-expectancy-table.json';
    
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    // 每隔三秒发起请求，获取数据并绘制图表
    nextTick(() => {
      setInterval(() => {
      	// 与上面不同的实现方式
        this.getOpt(url).then(opt=>{
          myChart.setOption(opt);
        });        
      }, 3000)
    })  
  },
  methods: {
  	// 获取
    async getOpt (url){
      let option;
      // 调用json
      await axios.get(url).then(res => {
        option = {
          dataset: [
            {
              id: 'dataset_raw',
              source: res.data
            },
            {
              id: 'dataset_since_1950_of_germany',
              fromDatasetId: 'dataset_raw',
              transform: {
                type: 'filter',
                config: {
                  and: [
                    { dimension: 'Year', gte: 1950 },
                    { dimension: 'Country', '=': 'Germany' }
                  ]
                }
              }
            },
            {
              id: 'dataset_since_1950_of_france',
              fromDatasetId: 'dataset_raw',
              transform: {
                type: 'filter',
                config: {
                  and: [
                    { dimension: 'Year', gte: 1950 },
                    { dimension: 'Country', '=': 'France' }
                  ]
                }
              }
            }
          ],
          title: {
            text: 'Income of Germany and France since 1950'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            nameLocation: 'middle'
          },
          yAxis: {
            name: 'Income'
          },
          series: [
            {
              type: 'line',
              datasetId: 'dataset_since_1950_of_germany',
              showSymbol: false,
              encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income']
              }
            },
            {
              type: 'bar',
              datasetId: 'dataset_since_1950_of_france',
              showSymbol: false,
              encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income']
              }
            }
          ]
        };
      })
      
      return option;
    }     
  }
}
</script>

4. 多表同时

结合两种不同的图标放在一个页面，其中新增一种表为：
https://echarts.apache.org/examples/zh/editor.html?c=gauge-ring

<template>
  <div id="main" style="width: 600px;height:400px;float:left"></div>
  <div id="sub" style="width: 600px;height:400px;float:left;"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  // DOM 渲染完成触发
  mounted() {
  	// 数据来源，注意自行修改
    var url = 'http://localhost/life-expectancy-table.json';
    
    // 基于准备好的dom，初始化echarts实例
    var myMain = echarts.init(document.getElementById('main'))
    var mySub = echarts.init(document.getElementById('sub'))

    var option;
    const gaugeData = [
      {
        value: 20,
        name: 'Perfect',
        title: {
          offsetCenter: ['0%', '-30%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '-20%']
        }
      },
      {
        value: 40,
        name: 'Good',
        title: {
          offsetCenter: ['0%', '0%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '10%']
        }
      },
      {
        value: 60,
        name: 'Commonly',
        title: {
          offsetCenter: ['0%', '30%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '40%']
        }
      }
    ];
    option = {
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 40
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: gaugeData,
          title: {
            fontSize: 14
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: 'inherit',
            borderColor: 'inherit',
            borderRadius: 20,
            borderWidth: 1,
            formatter: '{value}%'
          }
        }
      ]
    };

    // 每隔三秒发起请求，获取数据并绘制图表
    nextTick(() => {
      setInterval(() => {
      	// main部分
        this.getOptMain(url).then(opt=>{
          myMain.setOption(opt);
        });
		// sub部分
        gaugeData[0].value = +(Math.random() * 100).toFixed(2);
        gaugeData[1].value = +(Math.random() * 100).toFixed(2);
        gaugeData[2].value = +(Math.random() * 100).toFixed(2);
        mySub.setOption({
          series: [
            {
              data: gaugeData,
              pointer: {
                show: false
              }
            }
          ]
        });
      }, 3000)
    })
    
    option && mySub.setOption(option);
  },
  methods: {
  	// 获取
    async getOptMain (url){
      let option;
      // 调用json
      await axios.get(url).then(res => {
        option = {
          dataset: [
            {
              id: 'dataset_raw',
              source: res.data
            },
            {
              id: 'dataset_since_1950_of_germany',
              fromDatasetId: 'dataset_raw',
              transform: {
                type: 'filter',
                config: {
                  and: [
                    { dimension: 'Year', gte: 1950 },
                    { dimension: 'Country', '=': 'Germany' }
                  ]
                }
              }
            },
            {
              id: 'dataset_since_1950_of_france',
              fromDatasetId: 'dataset_raw',
              transform: {
                type: 'filter',
                config: {
                  and: [
                    { dimension: 'Year', gte: 1950 },
                    { dimension: 'Country', '=': 'France' }
                  ]
                }
              }
            }
          ],
          title: {
            text: 'Income of Germany and France since 1950'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            nameLocation: 'middle'
          },
          yAxis: {
            name: 'Income'
          },
          series: [
            {
              type: 'line',
              datasetId: 'dataset_since_1950_of_germany',
              showSymbol: false,
              encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income']
              }
            },
            {
              type: 'bar',
              datasetId: 'dataset_since_1950_of_france',
              showSymbol: false,
              encode: {
                x: 'Year',
                y: 'Income',
                itemName: 'Year',
                tooltip: ['Income']
              }
            }
          ]
        };
      })
      
      return option;
    }
  }
}
</script>

在这里插入图片描述

参考：
Vue Element UI 之ECharts图表
Echarts 在vue3x中使用（包括动态数据变化）
优化了三年经验者的Echarts卡顿
关于vue+elementui 访问本地json和跨域访问API问题
Vue3+ElementPlus+Axios实现从后端请求数据并渲染
Vue3中的Methods用法介绍
Vue3中你应该知道的setup！

在这里插入图片描述

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

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

相关文章

MySQL [基础] 学习笔记

MySQL [基础] 学习笔记

MySQL 学习 文章目录 MySQL 学习1. 数据库三层结构2. 数据在数据库中的存储方式3. SQL 语句分类3.1 备份恢复数据库的表 4. Mysql 常用数据类型(列类型)4.1 数值型(整数)的基本使用4.2 数值型(bit)的使用4.3 数值型(小数)的基本使用4.4 字符串的基本使用(面试题)4.5 字符串使用…
阅读更多...
Mysql关闭大小写敏感

Mysql关闭大小写敏感

1.mysql设置大小写敏感配置在/etc/my.cnf中[mysqld]添加 lower_case_table_names1 2.需要重启MYSQL服务 service mysqld restart
阅读更多...
G2O学习笔记

G2O学习笔记

Reference g2o图优化例子讲解 - 曲线参数最优化求解从零开始学习g2o
阅读更多...
优雅而高效——立即执行函数表达式()()；

优雅而高效——立即执行函数表达式()()；

&#x1f606;博主&#xff1a;小猫娃来啦 &#x1f606;文章核心&#xff1a;优雅而高效——立即执行函数表达式()(); 文章目录 前言立即执行函数表达式的定义和特点立即执行函数表达式的应用场景封装私有变量和方法避免全局变量污染模块化开发 立即执行函数表达式的写法和示例…
阅读更多...
记一次mysql事务并发优化

记一次mysql事务并发优化

记一次mysql事务并发优化 背景 事情的情况大致是这样的。一个扣减库存的业务上线以后&#xff0c;隔几天会报一次错&#xff0c;错误内容如下&#xff1a; ERROR - exception: UncategorizedSQLException,"detail":"org.springframework.jdbc.UncategorizedSQ…
阅读更多...
《向量数据库指南》——AutoGPT 宣布不再使用向量数据库

《向量数据库指南》——AutoGPT 宣布不再使用向量数据库

生成式 AI 促进了向量数据库的火爆，但如今的技术风向变化似乎也挺快。作为全球最著名的 AI 项目之一，AutoGPT 宣布不再使用向量数据库，这一决定可能让不少人感到惊讶。毕竟从一开始，向量数据库就一直协助管理着 AI 智能体的长期记忆。 那么这个基本设计思路怎么就变了？又…
阅读更多...
核酸管外观缺陷检测(二)

核酸管外观缺陷检测(二)

1.1应用示例思路 (1)创建分类器&#xff1b; (2)向分类器中添加样本&#xff1b; (3)训练分类器&#xff1b; (4) 测试数据&#xff0c;并将检测结果写入txt文件中。 1.2 应用示例相关算子介绍 (1) create_class_mlp( : : NumInput, NumHidden, NumOutput, OutputFunctio…
阅读更多...
C#，数值计算——KMeans分类的计算方法与源程序

C#，数值计算——KMeans分类的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// K-Means classification /// </summary> public class Kmeans { private int nn { get; set; } private int mm { get; set; } private …
阅读更多...
ACL配置

ACL配置

目录 1.使用基本ACL配置交换telnet访问的权限 2.使用高级ACL配置流分类实现限制互访某一台服务器 3.使用二层ACL配置流分类拒绝指定报文通过 4.通过流策略实现策略路由(重定向到不同的下一跳) 5.通过流策略实现不同网段间限制互访 6.通过流策略实现限速功能 7.通过流策略…
阅读更多...
C# CodeFormer Colorization 人脸着色

C# CodeFormer Colorization 人脸着色

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms;namespace CodeFormer_D…
阅读更多...
联合体(共用体)

联合体(共用体)

1. 联合类型的定义 联合也是一种特殊的自定义类型。 这种类型定义的变量也包含一系列的成员&#xff0c;特征是这些成员公用同一块空间。 2.联合大小的计算 联合的大小 至少是最大成员的大小 。 当最大成员大小不是最大对齐数的整数倍的时候&#xff0c;就要对 齐到最大对齐数…
阅读更多...
反射、代理模式、注解

反射、代理模式、注解

目录 一.Java反射 1.1反射的第一步&#xff1a;获取Class类的对象 1.2使用反射获取构造器对象并使用 1.3使用反射获取成员变量对象并使用 1.4使用反射获取成员方法对象并使用 二.代理模式 2.1概述 2.2代理模式在Java中的应用 2.3静态代理 2.4动态代理 2.4.1JDK动态代…
阅读更多...
第60节——使用redux-toolkit实战一个商品列表的增删查改

第60节——使用redux-toolkit实战一个商品列表的增删查改

一、样例 二、需求 调用goods.js这个单例完成对goods数据的增删查改 class Goods {constructor() {const data localStorage.getItem("qf-goods-data");this.goods data ? JSON.parse(data) : [];}time 500;/*** 获取商品* returns*/getGoods() {return new Pr…
阅读更多...
序列化和反序列化指令在PLC通信上的应用

序列化和反序列化指令在PLC通信上的应用

在了解本篇博客之前，大家可以熟悉下序列化指令的相关介绍，详细内容如下： 博途PLC 1200/1500 PLC 序列化和反序列化指令编程应用_博图序列化和反序列化-CSDN博客序列化最重要的作用：在传递和保存对象时.保证对象的完整性和可传递性。对象转换为有序字节流,以便在网络上传输…
阅读更多...
Apache Doris (四十四）： Doris数据更新与删除 - Delete 数据删除

Apache Doris (四十四）： Doris数据更新与删除 - Delete 数据删除

🏡 个人主页：IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主：加入大数据技术讨论群聊，获取更多大数据资料。 🔔 博主个人B栈地址：豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录
阅读更多...
在 Python 脚本中设置环境变量

在 Python 脚本中设置环境变量

环境变量是与系统进程交互的一种深入方式&#xff1b; 它允许用户获得有关系统属性、路径和已经存在的变量的更详细信息。 我们如何使用环境变量 如上所述&#xff0c;环境变量促使我们与系统进程进行交互。 我们可以使用环境变量来访问系统中的所有变量和键。 为此&#xff…
阅读更多...
Spring中构造注入详解

Spring中构造注入详解

目录 一、构造注入是什么 二、构造注入重载 一、构造注入是什么 书接上回&#xff0c;我们已经知道了setter注入是什么了&#xff0c;这里的构造注入也就很好理解了。构造注入也就是Spring通过调用类对象中的构造方法来进行注入。接下来利用代码演示构造注入 1&#xff09;先…
阅读更多...
Elasticsearch系列组件：Beats高效的日志收集和传输解决方案

Elasticsearch系列组件：Beats高效的日志收集和传输解决方案

Elasticsearch 是一个开源的、基于 Lucene 的分布式搜索和分析引擎&#xff0c;设计用于云计算环境中&#xff0c;能够实现实时的、可扩展的搜索、分析和探索全文和结构化数据。它具有高度的可扩展性&#xff0c;可以在短时间内搜索和分析大量数据。 Elasticsearch 不仅仅是一个…
阅读更多...
上海亚商投顾：沪指震荡调整 转基因概念股逆势大涨

上海亚商投顾：沪指震荡调整 转基因概念股逆势大涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日低开低走&#xff0c;深成指、创业板指均跌超1%&#xff0c;双双创出年内新低。转基因概念股逆势大涨…
阅读更多...
C语言初学者工具选择：vscode + MSYS2 + cmake 搭建 C环境

C语言初学者工具选择：vscode + MSYS2 + cmake 搭建 C环境

文章目录 前言1. MSYS2 安装1. 下载安装包2. 安装3. pacman 换清华大学源4. 安装 mingw-w64 toolchain 和 cmake ninja5. 将 toolchain 加入系统环境变量 2. 设置 vscode1. 必要的插件2. 一个简单的 vscode cmake 项目 最后C数据结构与算法CMake 前言 网上关于使用 vscode 配…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023