[vue]Echart使用手册

[vue]Echart使用手册

  • 使用环境
  • Echart的使用
    • Echart所有组件和图表类型
    • Echart 使用方法

使用环境

之前是在JQuery阶段使用Echart,直接引入Echart的js文件即可,现在是在vue中使用,不仅仅时echarts包,还需要安装vue-echarts:

"vue": "^3.3.10",
"echarts": "^5.4.2",
"vue-echarts": "^6.6.2",

Echart的使用

Echart所有组件和图表类型

在vue中使用Echart发现在设置某些属性的时候,图上对应的测试项死活出不来。。。

然后翻找源代码发现,对于Echart中属性的使用,都需要注册–组件与对应类型图表

在使用过程中图表很容易猜测出来,柱图或者折线图,但是组件的名称就不太容易确定,又没有明确的文档说明,只能查看源码

以下是所有组件与图表类型,需要的时候注册对应的即可:

    var BUITIN_COMPONENTS_MAP = {grid: 'GridComponent',polar: 'PolarComponent',geo: 'GeoComponent',singleAxis: 'SingleAxisComponent',parallel: 'ParallelComponent',calendar: 'CalendarComponent',graphic: 'GraphicComponent',toolbox: 'ToolboxComponent',tooltip: 'TooltipComponent',axisPointer: 'AxisPointerComponent',brush: 'BrushComponent',title: 'TitleComponent',timeline: 'TimelineComponent',markPoint: 'MarkPointComponent',markLine: 'MarkLineComponent',markArea: 'MarkAreaComponent',legend: 'LegendComponent',dataZoom: 'DataZoomComponent',visualMap: 'VisualMapComponent',// aria: 'AriaComponent',// dataset: 'DatasetComponent',// DependenciesxAxis: 'GridComponent',yAxis: 'GridComponent',angleAxis: 'PolarComponent',radiusAxis: 'PolarComponent'};var BUILTIN_CHARTS_MAP = {line: 'LineChart',bar: 'BarChart',pie: 'PieChart',scatter: 'ScatterChart',radar: 'RadarChart',map: 'MapChart',tree: 'TreeChart',treemap: 'TreemapChart',graph: 'GraphChart',gauge: 'GaugeChart',funnel: 'FunnelChart',parallel: 'ParallelChart',sankey: 'SankeyChart',boxplot: 'BoxplotChart',candlestick: 'CandlestickChart',effectScatter: 'EffectScatterChart',lines: 'LinesChart',heatmap: 'HeatmapChart',pictorialBar: 'PictorialBarChart',themeRiver: 'ThemeRiverChart',sunburst: 'SunburstChart',custom: 'CustomChart'};

Echart 使用方法

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart, PieChart, ScatterChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent, MarkPointComponent, MarkLineComponent } from "echarts/components";use([CanvasRenderer,//必须注册TitleComponent,TooltipComponent,LegendComponent,GridComponent,ToolboxComponent,MarkPointComponent,MarkLineComponent,//需要展示该属性就需要注册BarChart,
]);

例如,上述代码中并不是案例都会用到MarkPointComponent,在设置图表选项中用到了该点才会需要注册。

以下是设置选项,option设置遵循Echart文档即可:

const barOps=reactive({title: {text: "柱图",left: "left"},tooltip: {trigger: "axis",axisPointer: {type: "cross",crossStyle: {color: "#999"}}},legend: {data: ["条数", "金额"]},xAxis: [{type: "category",data: ["成功","失败","重试"],axisPointer: {type: "shadow"}}],yAxis: [{type: "value",name: "条数",min: 0,max: null,interval: 100000,axisLabel: {formatter: "{value}"}},{type: "value",name: "金额",min: 0,max: null,interval: 200000,axisLabel: {formatter: "{value} 元",rotate: "-45"}}],series: [{name: "条数",type: "bar",data: [200,100,500]},{name: "金额",type: "bar",yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value;}},label: {show: true,formatter: "{@金额}",rotate: 90,position: ["50%", "50%"]},data:  [22200,1077770,5000]}]
})

series中type设置的类型,就是需要注册的图表类型,其它barOps的属性基本都是组件,也是从这里确定你要注册的内容

<v-chart class="echarts" :option="barOps" :autoresize="true"></v-chart>
<style>
.echarts {width: 100%;height: 600px;
}
</style>

以上是图表的vue相关代码,设置还有非常重要的一点,在最开始的时候没有设置class="echarts",图表根本不展示,所以 Echart 一定要设置高度
在这里插入图片描述

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

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

相关文章

Pycharm解释器的配置: System Intgerpreter 、Pipenv Environment、Virtualenv Environment

文章目录 前提1. 环境准备2. 了解虚拟环境 一、进入Interpreter设置页二、添加Interpreter1. 方式一2. 方式二 三、 System Interpreter四、 Pipenv Environment前提条件&#xff1a;详细步骤1&#xff09; 选择pipenv2&#xff09; 设置Base Interpreter3&#xff09; 设置Pip…

程序员福利:好用的第三方api接口

空号检测&#xff1a;通过手机号码查询其在网活跃度&#xff0c;返回包括空号、停机等状态。手机在网状态&#xff1a;支持传入三大运营商的号码&#xff0c;查询手机号在网状态&#xff0c;返回在网等多种状态。反欺诈&#xff08;羊毛盾&#xff09;&#xff1a;反机器欺诈&a…

计算机网络个人小结

不同层的数据报的名称 应用层: data TCP层: segment IP 层: packet MAC层: frame MTU vs MSS: MTU&#xff1a;一个网络包的最大长度&#xff0c;以太网中一般为 1500 字节。 https://www.xiaolincoding.com/network/1_base/how_os_deal_network_package.html#linux-%E7%BD%91…

Centos9(Stream)配置Let‘s Encrypt (免费https证书)

1. 安装snap&#xff0c;用来安装certbot&#xff1a; sudo dnf install epel-release sudo dnf upgrade sudo yum install snapd sudo systemctl enable --now snapd.socket sudo ln -s /var/lib/snapd/snap /snap snap install core snap refresh core 2. 安装 certbot命令…

Ubuntu搭建Nodejs服务器

转自&#xff1a;https://www.8kiz.cn/archives/3228.html 在Ubuntu上搭建Node.js服务器&#xff0c;按照以下步骤进行&#xff1a; 打开终端。 使用包管理器安装Node.js。可以使用以下命令安装Node.js&#xff1a; sudo apt update sudo apt install nodejs安装Node.js后&a…

基于Java SSM框架实现人事员工考勤签到请假管理系统项目【项目源码+论文说明】

基于java的SSM框架实现人事员工考勤签到请假管理系统演示 摘要 在高速发展的时代&#xff0c;众多的软件被开发出来&#xff0c;给用户带来了很大的选择余地&#xff0c;而且人们越来越追求更个性的需求。在这种时代背景下&#xff0c;人们对人事管理系统越来越重视&#xff0…

css图片属性,图片自适应

CSS 图片属性指南&#xff1a;background-size 和 object-fit 在前端开发中&#xff0c;使用图片是非常常见的。为了让图片在网页中显示得更好&#xff0c;CSS 提供了多种属性来调整和控制图片的大小和布局。其中&#xff0c;background-size 和 object-fit 是两个常用的属性&a…

制作系统安装盘教程——烧录Windows原版镜像

前言 本次教程不经过WinPE工具进行安装Windows原版镜像&#xff0c;而是直接把系统镜像文件直接烧录进U盘&#xff0c;这样做的好处是不经过WinPE安装Win系统的过程&#xff0c;避免有些带木马病毒的WinPE在安装系统的过程把木马病毒带进系统&#xff0c;从而导致文件泄漏。 开…

【JavaWeb学习笔记】13 - JSP浏览器渲染技术

JSP 一、JSP引入 1.JSP现状 1.目前主流的技术是前后端分离(比如: Spring Boot Vue/React),我们会讲的.[看一下] 2. JSP技术使用在逐渐减少&#xff0c;但使用少和没有使用是两个意思&#xff0c;一些老项目和中小公司还在使用JSP&#xff0c;工作期间,你很有可能遇到JSP …

【设计模式-2.5】创建型——建造者模式

说明&#xff1a;本文介绍设计模式中&#xff0c;创建型设计模式中的最后一个&#xff0c;建造者模式&#xff1b; 入学报道 创建型模式&#xff0c;关注于对象的创建&#xff0c;建造者模式也不例外。假设现在有一个场景&#xff0c;高校开学&#xff0c;学生、教师、职工都…

Spring 5.x较上一版本的主要特性

Spring Framework 5.0 是在 2017 年发布的一个主要版本&#xff0c;它带来了许多改进和新特性&#xff0c;相比于 Spring Framework 4.x&#xff0c;主要的升级包括&#xff1a; 基于 Java 8 的基线&#xff1a; Spring 5 需要 Java 8 或更高版本&#xff0c;这使得框架得以利用…

LLaMA-Factory如何对Tokenization步骤提速

问题 数据量稍微大一些&#xff0c;在运行这个步骤“Running tokenizer on dataset”就要等半小时以上&#xff0c;然后才知道后续是否会报错。Tokenization步骤看上去并没有使用到GPU&#xff0c;只是在CPU上运行的。 是否有什么方法对这个步骤进行加速呢&#xff0c;比如多C…

c/c++实现隐藏密码

1. 我们在平常输入密码是,不能直接显示密码,应该显示*或者其它字符。 void inputPwd(char *pwd,int length) {char ch; // 用来存储getch()都进来的字符int i 0;while (1){ch getch(); /*这个函数可以实现输入不回显(输入不在终端显示)*/if (ch \r) /*密码输入结束输入回车…

Lua脚本在Redis中的高效应用

大家好&#xff0c;我是升仔 引言 Redis作为一个多功能的键值数据库&#xff0c;其性能非常出色&#xff0c;特别是在处理高速缓存和消息队列方面。而Lua脚本的引入&#xff0c;则进一步增强了Redis的能力。 1、Lua脚本与Redis的结合 Redis选择Lua作为脚本语言&#xff0c;主…

12.21

一、注意事项 1.CtrlShiftT用于从jar中查找类&#xff0c;这个eclipse键盘快捷键可以帮助快速找到类 2.更新upm和rest遇到重复解决方法 把upm文件里面多出来的三行代码删掉&#xff0c;右击upm文件&#xff0c;点击小组&#xff0c;点击标记为已解决&#xff0c;点击OK&#x…

ElasticSearch DSL Bool查询

Bool 查询的三个主要成分&#xff1a;must、should 和 must_not。 must&#xff1a; 这个条件是必须满足的。比如&#xff0c;你想找一本关于 Python 编程的书&#xff0c;那么你会在 must 里写上关键词 “Python”。 should&#xff1a; 这相当于你的偏好条件&#xff0c;…

OpenVAS 数据库管理

数据库概述为了更好地理解OpenVAS数据库管理&#xff0c;我们首先需要了解数据库的概念。数据库是一个组织和存储数据的软件系统&#xff0c;它允许用户在其中存储、访问和更新数据。在计算机系统中&#xff0c;数据库通常是用来存储大量数据的一个集合&#xff0c;这些数据可以…

Web前端-JavaScript(对象)

文章目录 1.对象1.1 概念1.2 创建对象三种方式**对象字面量创建对象**&#xff1a;new Object创建对象构造函数创建对象 1.3 遍历对象 2.作用域1.1 概述1.2 全局作用域1.3 局部作用域1.4 JS没有块级作用域1.5 变量的作用域1.6 作用域链1.7 预解析 1.对象 1.1 概念 什么是对象 …

Solon 开源框架,单月下载突破 250 万!!!

Solon 是什么开源项目&#xff1f; 一个&#xff0c;Java 生态型应用开发框架。它从零开始构建&#xff0c;有自己的标准规范与开放生态&#xff08;历时六年&#xff0c;已有全球第二级别的生态规模&#xff09;。与其他框架相比&#xff0c;它解决了两个重要的痛点&#xff…

jetbrains idea 报错 java.lang.ClassNotFoundException 之后自动搜索包导入包

-- 搜索类所在的包 导入包 搜索包 mac环境 pom中右键或者 cmdn