vue Echart使用

一、在vue中使用Echarts

1.安装Echarts

npm install echarts --save

2.准备一个呈现图表的盒子

给盒子起名字是建议使用id选择器
这个盒子通常来说就是我们熟悉的 div ,这个 div 决定了图表显示在哪里,盒子一定要指定宽和高

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

3.初始化 echarts 实例对象

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

<script>
import * as echarts from 'echarts'
//准备数据并且配置
var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};
//填充上面div盒子
mounted() {var myChart = echarts.init(document.getElementById("main"))myChart.setOption(option)}
</script>

这样已经可以实现一个提前定义好数据的一个可视化图形,如果要实现前后端数据交互,请继续往下看

4.axios实现前后端数据交互

1、一定要指定宽度和高度

<div id="pie"></div>
#pie{height:100px;width:100px;
}

2、初始图形数据准备数据

var option = {xAxis: {type: 'category',data: []},yAxis: {},series: [{type: 'bar',data: []}]
};

3、数据赋值

export const getGoodsApi = () => { return http({url: '/goods',method: 'get'})
}
<script>
import { getGoodsApi } from '@/api/api';methods:{getGoods(){var myChart = echarts.init(document.getElementById("pie"))getGoodsApi().then(res => {        option.series[0].data = res.data.map(v => v.num) //这里series是个数组必须加上[0]option.xAxis.data = res.data.map(v => v.name)myChart.setOption(option)})}},
mounted() {this.getGoods()}
</script>

这样数据就通顺了

4、后端传递数据的转换

{"code": 200,"msg": "success","data": [{"name": "huawei","num": 100000},{"name": "xiaomi","num": 20000},{"name": "oppo","num": 450000},{"name": "iphone","num": 2500},{"name": "vivo","num": 320000},{"name": "honor","num": 500000},{"name": "readme","num": 341111}]
}

echarts里面的数据都是数组,如何把name,num的属性值全部放到数组里面

var names = data.map(v => v.name)
var nums = data.map(v => v.num) 
namesnums
在这里插入图片描述在这里插入图片描述

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

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

相关文章

性能测试问题诊断-接口耗时高

问题现象&#xff1a;近期发现每晚跑的定时压测任务&#xff0c;压测结果中&#xff0c;各接口耗时变高&#xff08;原来99耗时<3秒&#xff0c;当前99耗时>20秒)。 问题排查&#xff1a; 查看jmeter 生成的结果图&#xff0c;发现压测2分钟后出现接口耗时变高情况。如下…

ES6新标准下JS异步编程Promise解读

ES5及以下&#xff0c;要实现复杂的异步编程&#xff0c;需要大量运用回调函数&#xff0c;每一个回调函数(JS引擎把它当作一个代码块)依次进入单线程(JS)任务队伍依次执行&#xff0c;而每个回调函数中的执行正确与否无法及时判断&#xff0c;当中信息反馈及显示都只会在最外层…

【ShuQiHere】 探索数据挖掘的世界:从概念到应用

&#x1f310; 【ShuQiHere】 数据挖掘&#xff08;Data Mining, DM&#xff09; 是一种从大型数据集中提取有用信息的技术&#xff0c;无论是在商业分析、金融预测&#xff0c;还是医学研究中&#xff0c;数据挖掘都扮演着至关重要的角色。本文将带您深入了解数据挖掘的核心概…

如何快速上手一个Github的开源项目

程序研发领域正是有一些热衷开源的小伙伴&#xff0c;技能迭代才能如此的迅速&#xff0c;因此&#xff0c;快速上手一个GitHub上的开源项目&#xff0c;基本上已经变成很个程序员小伙伴必须掌握的技能&#xff0c;因为终究你会应用到其中的一个或多个项目&#xff0c;帮助自己…

【计算机网络篇】电路交换,报文交换,分组交换

本文主要介绍计算机网络中的电路交换&#xff0c;报文交换&#xff0c;分组交换&#xff0c;文中的内容是我认为的重点内容&#xff0c;并非所有。参考的教材是谢希仁老师编著的《计算机网络》第8版。跟学视频课为河南科技大学郑瑞娟老师所讲计网。 目录 &#x1f3af;一.划分…

【Windows 同时安装 MySQL5 和 MySQL8 - 详细图文教程】

卸载 MySQL 参考文章&#xff1a; 完美解决Mysql彻底删除并重装_怎么找到mysql并卸载-CSDN博客使用命令卸载mysql_卸载mysql服务命令-CSDN博客 先管理员方式打开 cmd &#xff0c;切换到 MySQL 安装目录的 bin 文件夹下&#xff0c;执行如下命令&#xff0c;删除 MySQL 服务mys…

Blender软件三大渲染器Eevee、Cycles、Workbench对比解析

Blender 是一款强大的开源3D制作平台&#xff0c;提供了从建模、雕刻、动画到渲染、后期制作的一整套工具&#xff0c;广泛应用于电影、游戏、建筑、艺术等领域。 渲染101云渲染云渲6666 相比于其他平台&#xff0c;如 Autodesk Maya、3ds Max 或 Cinema 4D&#xff0c;Blende…

neo4j关系的创建删除 图的删除

关系的创建和删除 关系创建 CREATE (:Person {name:"jack"})-[:LOVE]->(:Person {name:"Rose"})已有这个关系时&#xff0c;merge不起效果 MERGE (:Person {name:"Jack" })-[:LOVE]->(:Person {name:"Rose"})关系兼顾节点和关…

C++ 进阶之路:非类型模板参数、模板特化与分离编译详解

目录 非类型模版参数 类型模板参数 非类型模板参数 非类型模板参数的使用 模板的特化 函数模板的特化 类模板的特化 全特化与偏特化 偏特化的其它情况 模板的分离编译 什么是分离编译 为什么要分离编译 为什么模板不能分离编译 普通的类和函数都是可以分离编译的…

git show 命令

查看指定stash git stash show "ac-dev" # 显示存储条目中记录的更改&#xff0c;作为首次创建存储条目时存储内容和提交回之间的差异。 git stath show -p "ac-dev" # 可以查看特定 stash 的全部diff 查看tag信息 git show [tag] gi…

LeetCode 面试经典150题 67.二进制求和

415.字符串相加 思路一模一样 题目&#xff1a;给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 eg&#xff1a; 输入a“1010” b“1011” 输出“10101” 思路&#xff1a;从右开始遍历两个字符串&#xff0c;因为右边是低位先运算。如果…

【学习笔记】数据结构(六 ①)

树和二叉树 &#xff08;一&#xff09; 文章目录 树和二叉树 &#xff08;一&#xff09;6.1 树(Tree)的定义和基本术语6.2 二叉树6.2.1 二叉树的定义1、斜树2、满二叉树3、完全二叉树4、二叉排序树5、平衡二叉树&#xff08;AVL树&#xff09;6、红黑树 6.2.2 二叉树的性质6.…

opengauss使用遇到的问题,随时更新

一、查看数据库状态的方式 1、gs_ctl -D /opt/huawei/install/data/dn/ status 2、gs_om -t status --detail 3、cm_ctl query -Cv二、opengauss打印WDR性能报告 1、开启WDR性能参数开关 gs_guc reload -N all -D /opt/huawei/install/data/dn -c "enable_wdr_snap…

通用大模型 vs 垂直大模型:谁将赢得AI战场?

引言 在人工智能领域&#xff0c;大模型的快速发展引发了广泛的关注和讨论。大模型&#xff0c;尤其是基于深度学习和海量数据训练的模型&#xff0c;已经在多个领域展现出强大的能力。从自然语言处理、图像识别到自动驾驶和医疗诊断&#xff0c;AI大模型正深刻改变着我们的生…

基于二自由度汽车模型的汽车质心侧偏角估计

一、质心侧偏角介绍 在车辆坐标系中&#xff0c;质心侧偏角通常定义为质心速度方向与车辆前进方向的夹角。如下图所示&#xff0c;u为车辆前进方向&#xff0c;v为质心速度方向&#xff0c;u和v之间的夹角便是质心侧偏角。 质心侧偏角的作用有如下三点&#xff1a; 1、稳定性…

跨境专线的网速收到什么影响

跨境专线的网速受到多种因素的影响。以下是一些主要因素&#xff1a; 1. 物理距离 地理位置&#xff1a;跨境专线通常涉及较长的物理距离。数据传输的延迟会随着距离增加而增加&#xff0c;特别是在跨越海洋或多个国家时。 2. 网络基础设施 线路质量&#xff1a;专线的物理…

SVN笔记-SVN安装

SVN笔记-SVN安装 1、在windows下安装 SVN 1、准备svn的安装文件 下载地址&#xff1a;https://sourceforge.net/projects/win32svn/ 2、下载完成后&#xff0c;在相应的盘符中会有一个Setup-Subversion-1.8.17.msi的文件&#xff0c;目前最新的版本是1.8.17&#xff0c; 这里…

使用docker创建zabbix服务器

首先保证服务器已正常安装docker&#xff0c;然后执行下面这几个容器创建命令&#xff1a; #创建MySQL容器 docker run --name mysql-server -t --restartunless-stopped -e MYSQL_DATABASE"zabbix" -e MYSQL_USER"zabbix" -e MYSQL_PASSWORD"zabbix_…

基于双向 LSTM 和 CRF 的序列标注模型

基于双向 LSTM 和 CRF 的序列标注模型 在自然语言处理中,序列标注是一项重要的任务,例如命名实体识别、词性标注等。本文将介绍如何使用 Keras 构建一个基于双向 LSTM 和 CRF 的序列标注模型。 一、引言 序列标注任务要求为输入序列中的每个元素分配一个标签。传统的方法可…

Matlab自学笔记36:日期时间型的概念、分类和创建方法

1.概念 日期时间型&#xff08;Dates and Time&#xff09;数据具有灵活的显示格式和高达毫微秒的精度&#xff0c;并且可以处理时区、夏令时和平闰年等特殊因素 2.日期时间型数据有以下三种表示方式 &#xff08;1&#xff09;Datetime型&#xff0c;表示日期时间点&#x…