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

Echarts 配置横轴竖轴指示线,更换颜色、线型和大小

在这里插入图片描述

第018个

点击查看专栏目录


本示例是描述如何在Echarts上配置横轴竖轴指示线,更换颜色、线型和大小。方法很简单,参考示例源代码。

文章目录

    • 示例效果
    • 示例源代码(共85行)
    • 相关资料参考
    • 专栏介绍

示例效果

在这里插入图片描述

示例源代码(共85行)

/*
* @Author: 还是大剑师兰特(CSDN)
* @下面源代码版权归还是大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-17
*/
<template><div class="container"><h3>vue+echarts:配置横轴竖轴指示线,更换颜色、线型和大小</h3><p>大剑师兰特,还是大剑师兰特</p><div id="vue-echarts" ref="refEcharts"> </div></div>
</template>
<script>import * as echarts from 'echarts'; //局部引用,如果采用全局模式,这里不写export default {name: 'cuclife',data() {return {}},methods: {initCharts() {let myChart = echarts.init(this.$refs.refEcharts);myChart.setOption({tooltip: {trigger: 'axis',axisPointer: { // 设置指示线type: 'line', // 默认为直线,可选为:'line' | 'shadow'lineStyle: {color:'#f00',type: [5, 15],	 //设置折线类型 					dashOffset: 10,width:5, }}},title: {text: '基本曲线图'},legend: {data: ['cuclife', 'openlayers']},color: ['orange', 'blue'],xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name:'cuclife',type: 'line',		// 设置拐点的大小和形状				symbol :'rect',// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCirclesymbolSize : 10,symbolRotate: 45,	data: [820, 932, 901, 934, 1290, 1330, 1320],smooth: true,}]});}},mounted() {this.initCharts();}}
</script>
<style scoped>.container {width: 840px;height: 580px;margin: 50px auto 0;border: 1px solid rgb(228, 57, 97);}#vue-echarts {width: 800px;height: 460px;border: 1px solid #d8d;margin: 0 auto;}
</style>

相关资料参考

https://echarts.apache.org/zh/option.html#series-line.markLine

专栏介绍

在vue和echarts联合技术栈的操控下,本专栏提供行之有效的源代码示例。这里既包括样式的修改,又包括常用bug的解决。
(1)提供title示例:展示控制标题的颜色、位置、子标题,连接等
(2)提供legend示例:展示控制图例的类型、宽度、高度、位置、间隙,边框、阴影、透明度、偏移,字体、颜色,提示语等
(3)提供grid示例:展示控制绘图网格的位置、宽度、高度、边框、阴影等
(4)提供xAxis示例:展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(5)提供yAxis示例:展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(6)提供dataZoom示例:展示控制区域缩放的类型、位置、filterMode等
(7)提供tooltip示例:展示控制提示框组件的触发方式、位置、样式,标签、动画、内容格式器等
(8)提供地理坐标系示例:展示控制地理坐标的经纬度、放缩、位置,距离、字体、边框等
(9)提供animation示例:展示控制动画的持续时间、延迟时间、动画方式,连接等
(10)提供其他示例:展示series等组件的信息内容。

相关文章:

Echarts 配置横轴竖轴指示线,更换颜色、线型和大小

第018个点击查看专栏目录本示例是描述如何在Echarts上配置横轴竖轴指示线&#xff0c;更换颜色、线型和大小。方法很简单&#xff0c;参考示例源代码。 文章目录示例效果示例源代码&#xff08;共85行&#xff09;相关资料参考专栏介绍示例效果 示例源代码&#xff08;共85行&a…...

OpenAI 官方API Java版SDK,两行代码即可调用。包含GhatGPT问答接口。

声明&#xff1a;这是一个非官方的社区维护的库。 已经支持OpenAI官方的全部api&#xff0c;有bug欢迎朋友们指出&#xff0c;互相学习。 注意&#xff1a;由于这个接口&#xff1a; https://platform.openai.com/docs/api-reference/files/retrieve-content 免费用户无法使…...

SpringBoot 日志文件

(一)日志文件有什么用&#xff1f;除了发现和定位问题之外&#xff0c;我们还可以通过日志实现以下功能&#xff1a;记录用户登录日志&#xff0c;以便分析用户是正常登录还是恶意破解用户。记录系统的操作日志&#xff0c;以便数据恢复和定位操作 。记录程序的执行时间&#x…...

SQL71 检索供应商名称

描述Vendors表有字段供应商名称&#xff08;vend_name&#xff09;、供应商国家&#xff08;vend_country&#xff09;、供应商州&#xff08;vend_state&#xff09;vend_namevend_countryvend_stateappleUSACAvivoCNAshenzhenhuaweiCNAxian【问题】编写 SQL 语句&#xff0c;…...

02:入门篇 - 漫谈 CTK

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 十万个为什么 五千个在哪里?七千个怎么办?十万个为什么?。。。生活中,有很多奥秘在等着我们去思考、揭示! 同样地,在使用 CTK 时,很多小伙伴一定也存在诸多疑问: 为什么 CTK Plugin Framework 要借…...

SpringBoot常用注解

SpringBootApplication注解包含如下三个SpringBootConfigurationEnableAutoConfigurationComponentScanSpringBootConfiguration等同于Configuration&#xff0c;是属于spring的一个配置类这里的 Configuration 对我们来说并不陌生&#xff0c;它就是 JavaConfig 形式的 Spring…...

RBAC权限模型

什么是RBAC权限模型&#xff1f; RBAC是基于角色的访问控制&#xff0c;在RBAC中&#xff0c;权限与角色相关联&#xff0c;用户通过成为适当角色的成员而得到这些角色的权限。 1.0级 用户、角色、权限 2.0 权限分级 公司>部门>小组 2.1 权限继承 ps: 这个人是一个小组长…...

【郭东白架构课 模块一:生存法则】07|法则三:架构师如何找到自己的商业模式?

你好&#xff0c;我是郭东白&#xff0c;今天我们来聊聊架构活动中对商业价值的考量。 今天我们要讲的是架构师的第三个生存法则&#xff1a;作为一个架构师&#xff0c;必须要在有限的资源下最大化架构活动所带来的商业价值。对于任何一个架构活动而言&#xff0c;架构师的可…...

STM32 - 看门狗

独立看门狗 IWDG专业时钟LSI 低功耗仍可以运行对定时的控制比较松喂狗这些时间是按照40kHz时钟给出。实际上&#xff0c;MCU内部的RC频率会在30kHz到60kHz之间变化。此外&#xff0c;即使RC振荡器的频率是精确的&#xff0c;确切的时序仍然依赖于APB接口时钟与RC振荡器时钟之间…...

Redis集群搭建

一、哨兵模式 在 redis3.0之前&#xff0c;redis使用的哨兵架构&#xff0c;它借助 sentinel 工具来监控 master 节点的状态&#xff1b;如果 master 节点异常&#xff0c;则会做主从切换&#xff0c;将一台 slave 作为 master。 哨兵模式的缺点&#xff1a; &#xff08;1&…...

车载基础软件——AUTOSAR AP典型应用案例

我是穿拖鞋的汉子&#xff0c;魔都中一位坚持长期主义的工程师&#xff01; 最近不知道为何特别喜欢苏轼的一首词&#xff1a; 缺月挂疏桐&#xff0c;漏断人初静。谁见幽人独往来&#xff0c;缥缈孤鸿影。 惊起却回头&#xff0c;有恨无人省。拣尽寒枝不肯栖&#xff0c;寂寞…...

消息中间件----内存数据库 Redis7(第3章 Redis 命令)

Redis 根据命令所操作对象的不同&#xff0c;可以分为三大类&#xff1a;对 Redis 进行基础性操作的命令&#xff0c;对 Key 的操作命令&#xff0c;对 Value 的操作命令。3.1 Redis 基本命令首先通过 redis-cli 命令进入到 Redis 命令行客户端&#xff0c;然后再运行下面的命令…...

react-03-react-router-dom-路由

react-router-dom:react路由 印记中文:react-router-dom 1、路由原理 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>前端路由的基石_history</title> </head> <body><a hre…...

2自由度悬架LQR控制

目录 1 悬架系统 1.1 悬架结构示意图 1.2 悬架数学模型 1.3 路面激励 2.仿真分析 2.1simulink模型 2.2 仿真结果 2.3 结论 3. 总结 1 悬架系统 1.1 悬架结构示意图 1.2 悬架数学模型 其中&#xff1a;x1为悬架动扰度&#xff0c;x2为车身加速度&#xff0c;x3为轮胎…...

C语言返回类型为指针的一些经典题目(下)

续上一篇文章&#xff0c;上一篇文章题目都很经典&#xff0c;这一篇也不例外。一.返回类型为指针经典题目(下)1.代码(第六题)char *GetMemory3(int num) {char *p (char *)malloc(sizeof(char) * num);return p; } void Test3(void) {char *str NULL;str GetMemory3(100…...

OpenAI 官方api 阅读笔记

网站 API Key concepts Prompts and completions You input some text as a prompt, and the model will generate a text completion that attempts to match whatever context or pattern you gave it. Token  模型通过将文本分解成token来理解和处理, 处理token数量取…...

微服务项目【分布式锁】

创建Redisson模块 第1步&#xff1a;基于Spring Initialzr方式创建zmall-redisson模块 第2步&#xff1a;在zmall-redisson模块中添加相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</a…...

JavaWeb5-线程常用属性

目录 1.ID 2.名称 3.状态 4.优先级 5.是否守护线程 5.1.线程类型&#xff1a; ①用户线程&#xff08;main线程默认是用户线程&#xff09; ②守护线程&#xff08;后台/系统线程&#xff09; 5.2.守护线程作用 5.3.守护线程应用 5.4.守护线程使用 ①在用户线程&am…...

JVM调优及垃圾回收GC

一、说一说JVM的内存模型。JVM的运行时内存也叫做JVM堆&#xff0c;从GC的角度可以将JVM分为新生代、老年代和永久代。其中新生代默认占1/3堆内存空间&#xff0c;老年代默认占2/3堆内存空间&#xff0c;永久代占非常少的对内存空间。新生代又分为Eden区、SurvivorFrom区和Surv…...

JAVA练习53-打乱数组

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、题目-打乱数组 1.题目描述 2.思路与代码 2.1 思路 2.2 代码 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 2月17日练习内…...

基于RK3588的嵌入式linux系统开发(三)——Uboot镜像文件合成

本章uboot镜像文件的合成包括官网必备文件rkbin下载和uboot镜像文件合成两部分内容&#xff0c;具体分别如下所述。 &#xff08;一&#xff09;下载rkbin文件包 以上uboot编译生成的uboot镜像不能直接烧录到板卡中运行&#xff0c;需要与atf、bl31、ddr配置文件等必备文件合成…...

wireshark抓包后通过工具分包

分包说明&#xff1a;关于现场问题分析&#xff0c;一般都是通过日志&#xff0c;这个属于程序中加的打印&#xff0c;或存数据库&#xff0c;或者存文本形式&#xff0c;这种一般比较符合程序逻辑&#xff1b;还有一种就是涉及到网络通信方面的&#xff0c;需要通过抓包来分析…...

举个栗子~Tableau 技巧(251):统一多个工作表的坐标轴范围

在工作汇报场景&#xff0c;有一个很常见、很多数据粉反馈的需求&#xff1a;同一看板上的两个图表&#xff0c;因为轴范围不一致&#xff08;如下图&#xff09;&#xff0c;很难直观比较。有什么办法可以统一它们的坐标轴范围呢&#xff1f; 类似需求&#xff0c;不论两个还是…...

Centos7 调整磁盘空间

1. 查看磁盘空间占用情况&#xff1a; df -h 可以看到 /home 有很多剩余空间,占了绝大部分&#xff0c; 而我又很少把文件放在home下。 2. 备份 /home 下的内容&#xff1a; cp -r /home/ /homebak/ 3. 关闭home进程&#xff1a; fuser -m -v -i -k /home 报错: -bash: fuser…...

小菜版考试系统——“C”

各位CSDN的uu们你们好呀&#xff0c;今天&#xff0c;小雅兰的内容是小菜版考试系统&#xff0c;最近一直在忙C语言课程设计的事&#xff0c;那么&#xff0c;就请uu们看看我的学习成果吧。 课程设计任务 摘要 题目分析 流程图 关键程序代码 程序运行结果 结论与心得 参…...

Twitter被封号了?最详细的申诉教程在此

由于Twitter检测系统是十分敏感的&#xff0c;所以在运营的时候很容易莫名就出现“此账号被封禁”或者“此账号被冻结”的情况。出现这种情况大多是因为账号发送了垃圾信息、面临安全风险、发太多广告或者太久没上线被判为机器人这几个原因。被封号后&#xff0c;我们可以通过向…...

Docker 安装配置

本章背景知识 本章主要介绍在 Centos 操作系统平台上进行安装和配置Docker Engine。 环境准备 1、操作系统支持。 CentOS、Debian、Fedora、Raspbian、RHEL、SLES、Ubuntu、Binaries 2、启用yum 软件仓库源。 centos-extras 编者注&#xff1a;Centos 默认已经开启cento…...

死锁检测组件-设想

死锁检测组件-设想 现在有三个临界资源和三把锁绑定了&#xff0c;三把锁又分别被三个线程占用。&#xff08;不用关注临界资源&#xff0c;因为锁和临界资源是绑定的&#xff09; 但现在出现这种情况&#xff1a;线程1去申请获取锁2&#xff0c;线程2申请获取锁3&#xff0c;…...

线程池的使用

为什么要使用线程池 复习一下创建线程的几种方式&#xff1a; 继承Thread 实现Runnable 实现Callable 但是如果频繁的创建/销毁线程&#xff0c;就会造成资源浪费。这时候就需要将线程创建好之后存起来&#xff0c;以后要用取出来&#xff0c;用完后再放回去。 注意 &#xff…...

字节码指令

目录 2.1 入门 2.2 javap 工具 2.3 图解方法执行流程 1&#xff09;原始 java 代码 2&#xff09;编译后的字节码文件 3&#xff09;常量池载入运行时常量池 4&#xff09;方法字节码载入方法区 5&#xff09;main 线程开始运行&#xff0c;分配栈帧内存 6&#xff09;…...

企业网站开发课程培训/免费b站软件推广网站

启动服务器的方法如果您已经确定了用来运行服务器的账号&#xff0c;则可以选择安排怎样启动服务器。可以从命令行手工运行&#xff0c;或在系统启动过程中自动运行服务器。有三种启动服务器的主要方法&#xff1a;直接调用mysqld。这或许是最小的命令方法。除了说明mysqld –h…...

网站权限分配代码/关键词怎么找出来

InitializingBean接口只包括afterPropertiesSet方法&#xff0c;凡是继承该接口的类&#xff0c;在初始化bean的时候会执行该方法 import org.springframework.beans.factory.InitializingBean; public class TestBean implements InitializingBean{   Override   public v…...

博彩类网站开发源代码/百度知道app官方下载

题面 题解 解法一 这个思路要基于以下一个结论&#xff1a; 当你删掉某条边\((x,x1)\)时&#xff0c;最短路路线为&#xff1a;\(1\to x(\leq u)\to y(>u) \to n\),并且\(x\to y\)一定不会属于原最短路。 我们枚举删掉最短路上的哪条边&#xff0c;然后把这条边的\(s\)加进队…...

宿迁seo/优化网站找哪家

今天我们的会议如期举行了。这次会议中&#xff0c;我们讨论了第一轮迭代的最后收尾工作。我们打算将前一阶段的任务汇总&#xff0c;把每个人所完成的代码进行合成&#xff0c;进而可以完成一份比较完整的产品。由于第一轮迭代已经完成&#xff0c;第二轮迭代即将开始&#xf…...

wordpress中国优化/自助建站网站

在页面展示图片中&#xff0c;总会遇到图片展示不符合自己想法的事情&#xff0c;比如固定了图片宽高&#xff0c;图片会变形 其实CSS提供了一个object-fit属性&#xff0c;object-fit: cover; 就可以解决图片变形的问题 介绍&#xff1a; object-fit 属性指定元素的内容应该如…...

北京网站建设公司空间续费北京/seo是什么职位简称

前言本文主要给大家介绍的是关于Android自定义View实现游戏摇杆键盘的相关内容&#xff0c;为什么会有这篇文章呢&#xff1f;因为在之前的一个项目&#xff0c;操作方向的方式为上下左右&#xff0c;左上需要同时按住左键和右键的方式进行操作。如下图&#xff1a;近来需要升级…...