当前位置: 首页 > news >正文

vue中使用echarts,导入JSON数据画图

1、将.json文件放置在与index.html同一目录下

2、编写vue界面,在script中加载json文件

3、在script中加载处理json数据

4、用处理后的数据画图

vue界面代码如下:

<script>
import * as echarts from "echarts"  //引入echarts核心模块export default {mounted () {this.fetchDataFromLocalFile();},methods: {fetchDataFromLocalFile () {fetch('./data.json')  //data.json需要放在与index.html(/public)放在同一目录下.then(response=>response.json()).then(data=>{const consumptionData = data[0].data.sort((a, b) => a.finalTotalAmount - b.finalTotalAmount).slice(0, 5)     .map(item => ({  //对数组中的每个 item 执行一个函数。这个函数返回一个新的对象,该对象包含两个属性:province: item.provinceName, // 提取省份名称amount: item.finalTotalAmount // 提取消费金额}))console.log(consumptionData) // 在控制台打印处理后的消费数据var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据const option = {title: {text: '2020年消费额最低的5个省份',left: 'center'},xAxis: {type: 'category',data: consumptionData.map(item => item.province) // 设置x轴的数据为省份名称},yAxis: {type: 'value',axisLabel: {fontSize: 8 // 设置y轴标签的字号大小为8px}},series: [{data: consumptionData.map(item => item.amount), // 设置柱状图的数据为消费金额type: 'bar', // 设置图表类型为柱状图label: {show: true, // 显示标签position: 'top' // 标签显示在柱状图的顶部}},{data: consumptionData.map(item => item.amount), // 设置柱状图的数据为消费金额type: 'line', // 设置图表类型为柱状图label: {show: true, // 显示标签position: 'top' // 标签显示在柱状图的顶部}}]};myChart.setOption(option);// 将图表的配置应用到图表上})}},}
</script><template><div id="main" style="width: 1000px;height: 400px;"></div>
</template>

data数据为:

[{"msg": "操作成功","code": 200,"data": [{"outTradeNo": "762726941436512","finalTotalAmount": 784432.0,"provinceName": "广东","regionName": "华东","userName": "西门清","id": 78444},{"outTradeNo": "122515318746846","finalTotalAmount": 207260.0,"provinceName": "贵州","regionName": "滕成","userName": "滕成","id": 78445},{"outTradeNo": "189377665987296","finalTotalAmount": 240486.0,"provinceName": "澳门","regionName": "西南","userName": "尉迟莉","id": 78446},{"outTradeNo": "727564233416679","finalTotalAmount": 62997.0,"provinceName": "山东","regionName": "华东","userName": "庞茂","id": 78447},{"outTradeNo": "712939938964818","finalTotalAmount": 509385.0,"provinceName": "湖北","regionName": "华中","userName": "司马言若","id": 78448},{"outTradeNo": "366811414371877","finalTotalAmount": 40392.0,"provinceName": "吉林","regionName": "华中","userName": "卫娅琦","id": 78449},{"outTradeNo": "625397617582265","finalTotalAmount": 333611.0,"provinceName": "云南","regionName": "东北","userName": "司马真","id": 78450},{"outTradeNo": "245924562386116","finalTotalAmount": 273301.0,"provinceName": "新疆","regionName": "华南","userName": "朱贵","id": 78451},{"outTradeNo": "5621398864121127","finalTotalAmount": 147177.0,"provinceName": "西北","regionName": "西南","userName": "宇文娅","id": 78452},{"outTradeNo": "346272442916713","finalTotalAmount": 197594.0,"provinceName": "重庆","regionName": "西北","userName": "岑清飞","id": 78453},{"outTradeNo": "583479347648972","finalTotalAmount": 60418.0,"provinceName": "湖南","regionName": "重庆","userName": "广东","id": 78454}]}
]

 

相关文章:

vue中使用echarts,导入JSON数据画图

1、将.json文件放置在与index.html同一目录下 2、编写vue界面&#xff0c;在script中加载json文件 3、在script中加载处理json数据 4、用处理后的数据画图 vue界面代码如下&#xff1a; <script> import * as echarts from "echarts" //引入echarts核心模…...

【C++篇】探索STL之美:熟悉使用String类

CSDN 文章目录 前言 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&…...

ETLCloud搭配MySQL | 让关系型数据库更智能

在现代数据处理领域&#xff0c;ETL技术和云服务正迅速成为数据管理的核心。本文将探讨如何将 ETLCloud 与 MySQL 配合使用&#xff0c;将不同来源的表转移到另一张表中&#xff0c;以最大限度地提升关系型数据库的价值和性能。 一、前期准备 环境 首先确保MySQL源数据库能够…...

Java 开发——(上篇)从零开始搭建后端基础项目 Spring Boot 3 + MybatisPlus

一、概述 记录时间 [2024-10-23] 本文是一个基于 Spring Boot 3 MybatisPlus 的项目实战开发&#xff0c;主要涵盖以下几个方面&#xff1a; 从零开始的项目创建IDEA 中开发环境的热部署Maven、Swagger3、MybatisPlus 等的配置路由映射知识静态资源访问文件上传功能实现拦截器…...

Psychophysiology:脑-心交互如何影响个体的情绪体验?

摘要 情绪的主观体验与对身体(例如心脏)活动变化的情境感知和评估相关。情绪唤醒增加与高频心率变异性(HF-HRV)降低、EEG顶枕区α功率降低以及心跳诱发电位(HEP)振幅较高有关。本研究使用沉浸式虚拟现实(VR)技术来研究与情绪唤醒相关的脑心相互作用&#xff0c;以实现自然而可…...

FunASR实时语音识别内网部署 | 无网络环境中的实时语音识别 | 实时语音识别

1. 在有网的电脑上面先下载下面内容 下载模型文件&#xff0c;可以到modelscope中下载 下载项目源码&#xff0c;可以到github中搜索funasr下载 配置环境&#xff0c;这里使用conda虚拟环境&#xff0c;创建并进入虚拟环境 conda create -n funasr python3.8 conda activate …...

【设计模式-状态模式】

状态模式&#xff08;State Pattern&#xff09;是一种行为设计模式&#xff0c;它允许一个对象在内部状态改变时改变它的行为。换句话说&#xff0c;这种模式让对象在不同的状态下能够表现出不同的行为&#xff0c;而不需要修改对象的代码。状态模式通过将对象的行为与状态进行…...

【代码随想录Day50】图论Part02

岛屿数量 深搜 题目链接/文章讲解&#xff1a;代码随想录 class Solution {// 计算网格中岛屿的数量public int numIslands(char[][] grid) {int sum 0; // 初始化岛屿数量为0// 遍历整个网格for (int i 0; i < grid.length; i) {for (int j 0; j < grid[0].length…...

帝国CMS 内容页调用上一篇下一篇的方法(精华汇总)

帝国cms默认的内容页的上一页&下一页的调用代码是&#xff1a; 上一篇&#xff1a;[!--info.pre--] 下一篇&#xff1a;[!--info.next--] 但是实话实说&#xff0c;如果做个很普通的模版那足够用了&#xff0c;但是如果想个性化一点的话&#xff0c;比如加背景&#xff…...

(7)c++复合数据类型之数组

数组 数组就是可以存储一组相同类型的值&#xff0c;比如int a[10];就是一个存储10个int类型的数组。 数组初始化 数组初始化可以单个初始化&#xff0c;也是使用列表初始化&#xff0c;列表初始化可以全部&#xff0c;或者部分&#xff0c;如下案例&#xff1a; #include &…...

2.1 > Shell 是什么、如何更熟练的使用 Bash Shell

Shell 基础知识 Shell是计算机操作系统中的一个命令行解释器&#xff0c;由C语言编写&#xff0c;用于用户与操作系统之间进行交互。用户可以通过Shell输入命令&#xff0c;操作系统接收到这些命令后执行相应的操作。Shell一般还提供了编程语言的基本功能&#xff0c;允许用户…...

YOLO V3 网络构架解析

YOLO V3&#xff08;You Only Look Once version 3&#xff09;是由Joseph Redmon等人于2018年提出的一种基于深度学习的目标检测算法。它在速度和精度上相较于之前的版本有了显著提升&#xff0c;成为计算机视觉领域的一个重要里程碑。本文将详细解析YOLO V3的网络架构&#x…...

【zlm】 webrtc源码讲解(二)

目录 webrtc播放 MultiMediaSourceMuxer里的_ring webrtc播放 > MediaServer.exe!mediakit::WebRtcPlayer::onStartWebRTC() 行 60 CMediaServer.exe!mediakit::WebRtcTransport::OnDtlsTransportConnected(const RTC::DtlsTransport * dtlsTransport, RTC::SrtpSession::…...

5G RedCap工业路由器赋能电力物联网应用

随着5G轻量化技术应用的推进&#xff0c;5G RedCap旨在提供低功耗、低成本、广覆盖等功能特点赋能电力智能化升级。特别适用于工业物联网、低空经济、车联网、消费电子和轻量级5G的需求。 5G RedCap工业路由器的特点 低功耗&#xff1a;5G RedCap工业路由器通过节能技术&#…...

029.浏览器自动化-抓取#document下的内容

一、iframe下的#document是什么 #document 是一个特殊的 HTML 元素&#xff0c;表示 <iframe> 元素内部的文档对象。当你在 HTML 页面中嵌入一个 <iframe> 元素时&#xff0c;浏览器会创建一个新的文档对象来表示 <iframe> 内部的内容。这 个文档对象就是 #…...

2024前端html5,css3面试题总汇

1.XML&#xff0c;HTML&#xff0c;XHTML区别⭐ XML&#xff1a;XML是一个可扩展标记语言&#xff0c;主要是用来存储&#xff0c;传输数据的&#xff0c;并非显示数据&#xff0c;可以用来标记数据&#xff0c;定义数据类型&#xff0c;允许用户对自己的标记语言进行定义&…...

css实现外层不换行,内层换行

css实现上图效果&#xff0c;内容A和B整体不换行&#xff0c;B内容中换行 <div className"description"> <div className"label">{formatMessage({id: description})}</Col> <divclassName"value"> &l…...

word取消自动单词首字母大写

情况说明&#xff1a;在word输入单词后首字母会自动变成大写 &#xff08;1&#xff09;点击菜单栏文件 &#xff08;2&#xff09;点击“更多”——>“选项” &#xff08;3&#xff09;点击“校对”——>“自动更正选项” &#xff08;4&#xff09;取消“句首字母大写…...

flex常用固定搭配

flex常用固定搭配 flex简写&#xff1a;flex-grow&#xff08;项目放大&#xff09;&#xff0c;flex-shrink &#xff08;项目缩小&#xff09;&#xff0c;flex-basis&#xff08;项目本身&#xff09; flex: 1; 全写&#xff1a;flex: 1 1 0%;内容自动放大或缩小占满剩余…...

Kafka、Kafka Streams、Drools、Redis 和分布式数据库的风控系统程序

由于实时风控系统难度较大&#xff0c;集成框架设计各个单位均有特点&#xff0c;快速建立一个通用性较强&#xff0c;学习、实施和使用成本较低的框架尤其重要。 提供一个简化的 Java 程序示例&#xff0c;演示如何将 Kafka 消息中间件、Kafka Streams 计算引擎、Drools 规则…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...