大屏开发系列——Echarts的基础使用

本文为个人近期学习总结,若有错误之处,欢迎指出!

Echarts在vue2中的基础使用

  • 一、简单介绍
  • 二、基本使用(vue2中)
    • 1.npm安装
    • 2.main.js引入
    • 3.使用步骤
      • (1)准备带有宽高的DOM容器;
      • (2)初始化echarts实例;
      • (3)定义图表的配置项和数据;
      • (4)为echarts实例设置配置项和数据。

一、简单介绍

      一个基于 JavaScript 的开源可视化图表库,支持用户交互和个性化定制,提供折线图、柱状图、饼图、散点图、关系图、树图、地图、仪表盘等各种图表类型,功能非常强大。
这里提供几个官网相关地址:
      官网地址:https://echarts.apache.org/zh/index.html
      官网使用手册:https://echarts.apache.org/handbook/zh/get-started/
      官网图表示例地址:https://echarts.apache.org/examples/zh/index.html,
      图表配置项手册地址:https://echarts.apache.org/zh/option.html#title,
      图表API地址:https://echarts.apache.org/zh/api.html#echarts
      在绘制具体图表时,可在配置项里查阅各个属性和其代表含义;涉及图形交互时,可查看API的使用。
      再推荐俩关于echarts的社区网站,可参考学习(逛一逛,你一定会惊叹网友的智慧,个人也会受益匪浅哦_)。
网站一:https://www.makeapie.cn/echarts
网站二:https://echarts.zhangmuchen.top/#/index

二、基本使用(vue2中)

1.npm安装

npm install echarts --save

这里个人安装的版本是5.4.3
所以,安装命令为:npm install echarts@5.4.3 --save
注意:不同版本的echarts,部分属性的书写格式可能存在差异。后续更文中图表的属性写法,皆是5.4.3版本。

2.main.js引入

// 引入Echarts
import * as echarts from 'echarts'// 将ECharts实例化函数设为vue的原型函数,便于全局访问
Vue.prototype.$echarts = echarts

组件内使用时,用this.$echarts.xxx。

3.使用步骤

主要步骤分为4步:

(1)准备带有宽高的DOM容器;

<div ref="chartArea" :style="{width: '300px',height: '100px'}" />

(2)初始化echarts实例;

let myChart = this.$echarts.init(this.$refs.chartArea)

(3)定义图表的配置项和数据;

常规配置如下:

option={color:[],//系列(如:柱子、折线、饼块)的颜色(若不写,则取默认值)tooltip:{},// 悬浮框,会在鼠标悬停或者触摸某个数据点时显示legend:{},//图例grid:{},//直角坐标系绘图网格xAxis:[],//x轴yAxis:[],//y轴//系列图表series:[{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容}]  
}

注意:
①这些配置属性中,color、xAxis、yAxis、series属性是数组(color里的元素字符串,而xAxis、yAxis、series里的元素对象),其它属性对象
若series系列中的对象设置了name属性值,则legend.data可以不必写,只需写其它相关图例配置。

各个配置属性对应图像中的位置如下:
在这里插入图片描述

(4)为echarts实例设置配置项和数据。

myChart.setOption(this.option, true)

PS:绘图时,让图表跟随屏幕自适应

window.addEventListener('resize', () => {myChart.resize()
})

好了,echarts在vue2项目中的使用基础就讲完了,后面咱就可以逐步开始绘制具体的各类图表啦!

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

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

相关文章

gcc: warning: -Wunused-function;加了选项,为什么就不报警告呢?

文章目录 问题clang的编译而使用gcc是就不报问题分析原因如果是非static的函数问题 下面这个代码段,其中这个函数hton_ext_2byte,在整个程序里就没有使用。 static inline uint16_t hton_ext_2byte(uint8_t **p) {uint16_t v;******return v;

PHP宜邦家政服务管理系统-计算机毕业设计源码04426

目 录 摘要 1 绪论 1.1 选题背景与意义 1.2开发现状 1.3论文结构与章节安排 2 宜邦家政服务管理系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用…

国标GB28181视频汇聚平台LntonCVS视频监控安防平台与国标协议对接解决方案

应急管理部门以“以信息化推动应急管理能力现代化”为总体目标&#xff0c;加快现代信息技术与应急管理业务深度融合&#xff0c;全面支持现代应急管理体系建设&#xff0c;这不仅是国家加强和改进应急管理工作的关键举措&#xff0c;也是应对日益严峻的应急管理形势和满足公众…

微信小程序的运行机制与更新机制

1. 小程序运行机制 1.1. 冷启动与热启动 冷启动为用户第一次打开小程序时&#xff0c;因为之前没有打开过&#xff0c;这是第一种冷启动的情兑。第二种情况为虽然之前用户打开过&#xff0c;但是小程序被用户主动的销毁过&#xff0c;这种情况下我们再次打开小程序&#xff0…

【PALM、WRF-LES】微尺度气象数值模拟—大涡模拟技术

针对微尺度气象的复杂性&#xff0c;大涡模拟&#xff08;LES&#xff09;提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟&#xff0c;这些过程往往与天气模式、地形影响和人为因素如城市布局紧密相关。在这种规模上&#xff0c;传统的气象模…

doc文档下载

目录 下载 安装谷歌浏览器(chrome)Microsoft Edge浏览器 常见问题 下载 见邮件附件 安装 谷歌浏览器(chrome) 打开浏览器&#xff0c;地址栏输入&#xff1a;chrome://extensions/ 右上角打开开发者模式 点击如上图左上角的加载已解压的拓展程序&#xff0c;并选择刚刚解压…

安卓应用开发学习:通过腾讯地图SDK实现定位功能

一、引言 这几天有些忙&#xff0c;耽误了写日志&#xff0c;但我的学习始终没有落下&#xff0c;有空我就会研究《 Android App 开发进阶与项目实战》一书中定位导航方面的内容。在我的手机上先后实现了“获取经纬度及地理位置描述信息”和“获取导航卫星信息”功能后&#x…

afrog-漏洞扫描(挖洞)工具【了解安装使用详细】

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、afrog介绍 afrog 是一款性能卓越、快速稳定、PoC可定…

MySQL篇-SQL优化实战-减少子查询

回顾 上一篇了解了分析SQL使用的explain&#xff0c;可以点击查看MySQL篇-SQL优化实战了解我在写sql的注意事项还有explain的说明&#xff0c;这次拿一段生产使用的sql进行优化说明。从14s优化到2.6s 待优化的SQL SELECT DISTINCTswpe.tag_number,hca.ACCOUNT_NAME customer…

VBA中类的解读及应用第十三讲:限制复选选择,窗体模块的搭建

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。 类&#xff0c;是非常抽象的&#xff0c;更具研究的价值。随着我们学习、应用VBA的深入&#xff0…

02-部署LVS-DR群集

1.LVS-DR工作原理 LVS-DR模式&#xff0c;Director Server作为群集的访问入口&#xff0c;不作为网购使用&#xff0c;节点Director Server 与 Real Server 需要在同一个网络中&#xff0c;返回给客户端的数据不需要经过Director Server 为了响应对整个群集的访问&#xff0c;…

Java WebService记

Web Services开发 常用的 Web Services 框架有 Apache Axis1 、 Apache Axis2 、 Apache CXF &#xff0c;而 Apache Axis1 已经逐渐被淘汰所以本文不会讨论&#xff0c;重点关注 Apache Axis2 及 Apache CXF 。 Apache Axis2 在IDEA中新建 Axis2Demo 项目后右键选择 添加框架…

每天10个js面试题(一)

1.js基本数据类型&#xff1f; JavaScript 共有八种数据类型&#xff0c;分别是Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。其中 Symbol 和 BigInt 是 ES6 中新增的数据类型 2.let、const、var的区别&#xff1f; let和const有暂时性死区&#xff0…

开源模型应用落地-LangChain高阶-智能体探究-agent类型(一)

一、前言 大模型具有非常强大的功能,可以解答疑问、撰写报告和文档、总结内容、进行翻译等各种日常工作任务。然而,大模型还可以应用于更多的场景,发挥出更强大的作用。 通过智能体,我们可以实现许多有价值的事情,比如:在日常生活中,我们能借助智能体实现智能家居的自动化…

【渗透入门】SQL注入

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 什么是sql注入sql注入举例防御方式练习靶场 什么是sql注入 SQL注入是一种网络安全漏洞&#xff0c;攻…

【Android源码】Gerrit安装

前言 如果你打开 https://android.googlesource.com/platform/manifest&#xff0c;就会发现&#xff0c;google官方管理Android源码&#xff0c;使用的是Gerrit。Android系统源码是非常大的&#xff0c;用Git肯定是不适合。对于大型项目&#xff0c;得用Gerrit&#xff0c;今…

NoSQL之Redis高可用与优化

一、Redis高可用 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;除了保证…

二叉树的链式访问 与 二叉树专题

目录 二叉树的前、中、后序遍历求二叉树第K层节点的个数二叉树查找值为x的节点leetcode相同的树对称二叉树二叉树的前序遍历另一棵子树牛客 二叉树的遍历 二叉树的前、中、后序遍历 1.前序遍历&#xff1a;先访问根节点&#xff0c;再访问左子树&#xff0c;最后访问右子树 根…

【备忘】fastadmin 如何获取列表选中行的pk

去官方搜没搜出来&#xff0c;还得是万能的网友厉害。 //获取选中项 $(document).on("click", ".btn-selected", function () {// 获取选中项idsconsole.log(JSON.stringify(Table.api.selectedids(table)));// 获取选中项所有数据console.log(JSON.strin…

输入一个整数n,输出n的约数为质数的数?两个问题n的约数问题和n的质数问题

输入一个整数n&#xff0c;输出n的约数为质数的数&#xff1f; 一.首先解决n的质数的问题&#xff08;1&#xff09;枚举法&#xff08;2&#xff09;埃氏筛 二.解决n的质数约数问题 一.首先解决n的质数的问题 &#xff08;1&#xff09;枚举法 考虑质数的定义&#xff1a;在大…