在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解
官网地址:Apache ECharts

一、下载插件并在页面中引入
npm install echarts --save
页面导入:
import * as echarts from 'echarts'
全局导入: main.js 中,导入并注册到全局
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
二、实现效果展示

三、绘制柱状图使用步骤
代码示例
<template><div class="chart"><divid="chart_one"style="height: 82%;padding: 10px;display: flex;align-items: center;justify-content: center;"></div><h2>近一周使用记录</h2></div>
</template><script>import * as echarts from 'echarts'export default {mounted() {// 解决echarts图表放大溢出父容器// 页面上的元素进行监测和调整大小操作,当被监测的元素的大小发生变化时调用setTimeout(() => {const resizeOb = new ResizeObserver((entries) => {for (const entry of entries) {echarts.getInstanceByDom(entry.target).resize()}})resizeOb.observe(document.getElementById('chart_one')) })// 通过id获取echarts元素初始化图表的容器:创建一个 echarts 实例,调用 methods 里的 initChart 进行图表初始化// 获取id为chart_one的dom元素给chartDom容器,init初始化一个echarts实例给myChart,需以dom元素为参数this.$nextTick(() => {this.chartDom = document.getElementById('chart_one')this.myChart = echarts.init(this.chartDom)this.initChart() })// 接口获取数据后,再为echarts赋值this.initData()setTimeout(() => {this.initChart() }, 2000)},methods: {initChart() {// 在 ECharts 的 X 轴上显示当前日期前一周的月日const today = new Date()const lastWeek = new Date(today.getFullYear(),today.getMonth(),today.getDate() - 6) // 最近一周的日期const xAxisData = [] // 存储要显示的日期字符串for (let i = lastWeek.getTime(); i <= today.getTime(); i += 86400000) {const date = new Date(i)xAxisData.push(date.toLocaleDateString('en-US', {month: 'numeric',day: 'numeric',}))}this.option = {// 设置图表的边距,containLabel表示图表内容应包含在边距之内grid: {left: '3%',right: '4%',bottom: '4%',top: '11%',containLabel: true,},// 设置一个图表的 x 轴属性xAxis: {type: 'category',data: xAxisData, // x 轴上的数据axisLabel: {formatter: '{value}', // 显示格式},},yAxis: {type: 'value',axisLabel: {formatter: '{value} m³',},},// 提示框的内容和样式,tooltip: {trigger: 'axis', // 触发方式formatter: '用气日期:{b}<br />日用气量:{c}', // 自定义数据backgroundColor: 'rgba(255, 255, 255, 0.8)',axisPointer: {type: 'shadow',},},// 图表的配置series: [{// data: this.chartonedate, // 显示数据data: [120, 200, 150, 80, 70, 110, 130],type: 'bar', // 图表类型,柱状showBackground: true, // 是否显示柱状图背景色backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)',},label: {// 标签的样式normal: {show: true,position: 'top',},},},],}// 根据 this.option 的值来设置 this.myChart 的选项this.option && this.myChart.setOption(this.option)}, },}
</script>// 根据需要添加类名修改样式
<style lang="scss" scoped>.chart {width: 95%;height: 92%;background: linear-gradient(to bottom, #ffffff, #ffffff);h2 {text-align: center;margin: 0;font-size: 18px;color: #000;}}
</style>
四、绘制折线图、饼图代码整合
<template><el-row :gutter="6"> <el-col :span="9"><div class="ul-one ul-two"><div class="chart"><divid="chart_two"style="height: 82%;padding: 10px;display: flex;align-items: center;justify-content: center;"></div><h2>充值记录</h2></div></div></el-col><el-col :span="6"><div class="ul-one ul-two"><div class="chart"><divid="chart_three"style="height: 82%;padding: 10px;display: flex;align-items: center;justify-content: center;"></div><h2>用户数据分布</h2></div></div></el-col></el-row>
</template><script>import * as echarts from 'echarts'export default {mounted() { setTimeout(() => {const resizeOb = new ResizeObserver((entries) => {for (const entry of entries) {echarts.getInstanceByDom(entry.target).resize()}}) resizeOb.observe(document.getElementById('chart_two'))resizeOb.observe(document.getElementById('chart_three'))}) this.$nextTick(() => {this.chartDom = document.getElementById('chart_one')this.myChart = echarts.init(this.chartDom)this.initChart()this.chartDomtwo = document.getElementById('chart_two')this.myCharttwo = echarts.init(this.chartDomtwo)this.initCharttwo()this.chartDomthree = document.getElementById('chart_three')this.myChartthree = echarts.init(this.chartDomthree)this.initChartthree()}) this.initData()setTimeout(() => { this.initCharttwo()this.initChartthree()}, 2000)},methods: { initCharttwo() {this.optiontwo = {grid: {left: '3%',right: '4%',bottom: '4%',top: '11%',containLabel: true,},xAxis: {type: 'category',data: ['周期七','周期六','周期五','周期四','周期三','周期二','周期一',],},yAxis: {type: 'value',axisLabel: {formatter: '{value} m³',},},tooltip: {trigger: 'axis',formatter: '用气周期:{b}<br />周期用量:{c}', // 自定义数据backgroundColor: 'rgba(255, 255, 255, 0.8)',axisPointer: {type: 'shadow',},},series: [{// data: this.charttwodate,data: [120, 200, 150, 80, 70, 110, 130],type: 'line',// 图表上显示数据,并放置在数据点的上方。label: {normal: {show: true,position: 'top',},},},],}this.optiontwo && this.myCharttwo.setOption(this.optiontwo)},initChartthree() {this.optionthree = {tooltip: {trigger: 'item',},legend: {orient: 'vertical',left: 'left',},// 控制顶部小图标的位置legend: {top: '0',left: 'center',},series: [{name: '用户数量',type: 'pie',radius: '50%',center: ['50%', '60%'],data: [{ value: 83, name: '燃气表用户' },{ value: 16, name: '流量计用户' },{ value: 9, name: '未开户用户' },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)',},},},],}this.optionthree && this.myChartthree.setOption(this.optionthree)},},}
</script><style lang="scss" scoped>.ul-two {display: flex;justify-content: space-around;margin: 5px 3px;border: 1px solid #ccc;li {margin: 10px;list-style: none;width: 15%;height: 200px;.ranqibiao {border-radius: 50px;width: 100%;height: 100%;background: url('~@/assets/bg/bg1.png') no-repeat center center;box-shadow: 0 4px 9px 2px rgba(247, 189, 35, 0.91);background-size: cover;display: flex;justify-content: center;}.liuliangji {border-radius: 50px;width: 100%;height: 100%;background: url('~@/assets/bg/bg2.png') no-repeat center center;box-shadow: 0 4px 9px 2px rgba(62, 170, 255, 0.91);background-size: cover;display: flex;justify-content: center;}.weikahu {border-radius: 50px;width: 100%;height: 100%;background: url('~@/assets/bg/bg3.png') no-repeat center center;box-shadow: 0 4px 9px 2px rgba(80, 224, 254, 0.91);background-size: cover;display: flex;justify-content: center;}.image {border-radius: 10px;background: #ffffff;width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;margin-top: 40px;}.text {color: #ffffff;font-weight: bolder;margin-top: 20px;}.number {color: #ffffff;font-size: 20px;font-weight: 800;margin-top: 30px;}}}.val {text-align: center;color: #000;h2 {margin: 10px 0 0 0;}}.ul-one {height: 320px;display: flex;justify-content: center;align-items: center;}.chart {width: 95%;height: 92%;background: linear-gradient(to bottom, #ffffff, #ffffff);h2 {text-align: center;margin: 0;font-size: 18px;color: #000;}}
</style>
相关文章:
在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解
官网地址:Apache ECharts 一、下载插件并在页面中引入 npm install echarts --save 页面导入: import * as echarts from echarts 全局导入: main.js 中,导入并注册到全局 import echarts from echarts Vue.prototype.$echart…...
九耶丨阁瑞钛伦特-井字棋html5代码
你想了解关于井字棋(Tic-Tac-Toe)的HTML代码吗?以下是一个简单的井子棋的HTML代码示例: <!DOCTYPE html> <html> <head><title>Tic-Tac-Toe</title><style>.board {display: flex;flex-wrap…...
Linux服务器上配置HTTP和HTTPS代理
本文将向你分享如何在Linux服务器上配置HTTP和HTTPS代理的方法,解决可能遇到的问题,让你的爬虫项目顺利运行,畅爬互联网! 配置HTTP代理的步骤 1. 了解HTTP代理的类型:常见的有正向代理和反向代理两种类型。根据实际需求…...
OpenZFS 2.2 发布 RC3,支持 Linux 6.4
导读之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性,而在 2.2-rc3 中,Linux 6.4 支持的元跟踪器已标记为已完成。 OpenZFS 2.2 发布了第 3 个 RC 版本。 之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性&#x…...
嵌入式 C 语言程序数据基本存储结构
一、5大内存分区 内存分成5个区,它们分别是堆、栈、自由存储区、全局/静态存储区和常量存储区。 1、栈区(stack):FIFO就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区。里面的变量通常是局部变量、函数参数等。 …...
记录VS2022离线安装NuGet包的过程
离线安装NuGet包主要分为两个阶段:指定安装源及下载包及其依赖项。本文记录在VS2022中离线安装NuGet包的过程及注意事项。 离线安装NuGet包,主要有两种方式:1)搭建局域网或本机NuGet服务器,将VS2022的源指定为NuGe…...
tomcat的多实例和动静分离
目录 多实例 安装tomcat 配置 tomcat 环境变量 修改server.xml文件 修改开关文件,添加环境变量 tomcat1 tomcat2 启动 浏览器访问测试 nginxtomcat实现动静分离 Nginx实现负载均衡的原理 部署nginx的负载器 搭建第三台tomcat 配置多实例服务器 Tomcat…...
点成案例丨比浊仪用于乳酸菌抑菌活性测定
乳酸菌概述 自1929年英国科学家弗莱明发现青霉素以来,抗生素为人类医学的进步做出了巨大贡献。然而,抗生素在临床上广泛且持续的使用导致病原微生物产生了耐药性。目前,病原微生物对抗生素的耐药性正在威胁人们的健康,寻找具有抑…...
总结synchronized
一.synchronized的特性 synchronized 是 Java 语言中内置的关键字,用于实现线程同步,以确保多线程环境下共享资源的安全访问。 互斥性:synchronized保证了同一时刻只有一个线程可以执行被synchronized修饰的代码块或方法。当一个线程进入sync…...
react实现模拟弹框遮罩的自定义hook
需求描述 点击按钮用于检测鼠标是否命中按钮 代码实现 import React from react; import {useState, useEffect, useRef} from react;// 封装一个hook用来检测当前点击事件是否在某个元素之外 function useClickOutSide(ref,cb) {useEffect(()>{const handleClickOutside…...
直接在html中引入Vue.js的cdn来实现一个简单的博客
摘要 其实建立一个博客系统是非常简单的,有很多开源的程序,如果你不喜欢博客系统,也可以自己开发,也可以自己简单做一个。我这次就是用Vue.js和php做后端服务实现一个简单的博客。 界面 代码结构 代码 index.html <!DOCTYP…...
Android Studio瀑布流实现
效果: ImageDetail class package com.example.waterfallflow; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.widget.ImageView;public class ImageDetail extends Activity{Overrideprotected void …...
Java 中的 == 运算符、equals 方法和 hashcode 方法
一、 运算符 是 Java 中的一个运算符,用于比较两个对象,但在比较两个对象的时候需要根据比较类型分情况进行讨论。 1.1 基本数据类型与基本数据类型 基本数据类型之间通过 进行比较的时候,是直接比较它们的大小,而与它们的具体…...
第一个ArkTS项目实践-鸿蒙ArkTS
第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局 改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面 效果参考资料 第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频,主要是引…...
【数据结构•堆】序列和的前n小元素(堆排序)
题目描述 问题:序列和的前 n n n小元素 给出两个长度为 n n n的有序表 A A A和 B B B, 在A和B中各任取一个, 可以得到 n 2 n^2 n2 个和. 求这些和最小的 n n n个。 输入输出格式 输入格式: 输入数据共三行。 第一行,一个整数值 n n …...
Keepalived+http高可用实战
环境准备: 两台安装了keepalived的服务器 ip:192.168.134.170;192.168.134.172 1、安装http服务 yum install httpd -y2、写一个测试页面 [rootlocalhost ~]# echo "hostname -I,web1 test page. " > /var/www/html/inde [rootlocalho…...
Linux文件系统管理
Linux文件系统管理 磁盘的组成与分区 计算机用于存取文件的硬件是磁盘,磁盘的组成主要有磁盘盘、机械手臂、磁盘读取头与主轴马达所组成, 而数据的写入其实是在磁盘盘上面。磁盘盘上面又可细分出扇区(Sector)与磁道(Track)两种单位, 其中扇区…...
MyBatis-Plugin源码全面分析
三、MyBatis-Plugin 1. 基本开发方式 需求:在MyBatis执行之前打印一行醒目的日志,携带参数 实现Interceptor接口: Intercepts(Signature(type Executor.class,method "query",args {MappedStatement.class,Object.class, RowB…...
Vscode 常用操作教程
一、语言换成中文 这是我们可以直接点击左边栏第四个图标搜索插件 chinese ,也可以直接ctrlshiftp快捷键也会出来如图所示图标,出来chinese 插件之后选择安装install,安装完成之后重新ctrlshiftp会出现如图所示页面 找到我的鼠标在的地方对应的中文,此时…...
Linux设备树详解
Linux 设备树详解 Linux 操作系统早期是针对个人电脑设备而开发的操作系统,而个人电脑处理器产商较为单一(例如只有 Intel,AMD)同时个人电脑产商均使用 Intel 或 AMD 制造的处理器,业界形成了统一的总线/硬件接口标准…...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
