echarts step line

在这里插入图片描述

https://ppchart.com/#/

<template><div class="c-box" ref="jsEchart"></div>
</template><script>
import * as $echarts from 'echarts'
// 事件处理函数
export default {props: {// 需要传递的数据data: {type: Array,default() {return [];}},axisLabelFormatter: {type: Function,default: null}},data() {return {// echarts对象myEchart: null,// echart的optionsoptions: {}};},// 创建元素mounted() {this.init();},// 销毁destroyed() {// 销毁图表this.destroyedChart();},methods: {// 设置默认参数setDefaultOptions() {// 默认的参数this.options = {legend: {data: [],},xAxis: {type: 'category',data: [],boundaryGap : false,position: 'bottom',show: false,axisTick: {show: false},axisLine:{show: true,lineStyle: {color: '#E3EEF6',}},axisLabel:{show: false,color: '#222B45',margin: 10},},yAxis: {type: 'value',max: 1,min: 0,axisTick:{show: false},axisLine:{show: false,},axisLabel:{show: true,color: '#222B45',formatter: this.axisLabelFormatter},splitLine: {show: false,lineStyle: {color: '#E3EEF6'}},},series: [{name: 'Step Start',type: 'line',step: 'start',data: [],lineStyle: {color: "rgba(51, 102, 255, 1)"},showSymbol: false}],};},/*** @description 初始化的方法* @name init* @return {*} 无*/init() {// 更新数据this.update(this.data);},/*** @description 刷新图表* @return {*} 无*/refresh() {if (this.myEchart) {this.myEchart.resize();}},/*** @description 设置图表的数据* @name getChartData* @param {object} data 参数* @return {*} 无*/update(data) {// 先判断数据是否存在if (!Array.isArray(data)) {return false;}// 如果不存在echartsif (!this.myEchart) {// 图表对象this.myEchart = $echarts.init(this.$refs.jsEchart);// 绑定resize 事件this.bindResizeEvent();}// 设置默认参数this.setDefaultOptions();// 更新数据this.updateData(data);// 清空图表this.myEchart.clear();// 生成图表this.myEchart.setOption(this.options);},// 更新数据对象updateData(data) {this.options.series[0].data = data;},// resize 事件处理函数resizeHandler() {if (this.myEchart) {this.myEchart.resize();}},/*** @description 绑定resize 事件* @name init* @return {*} 无*/bindResizeEvent() {// 绑定resize事件window.addEventListener('resize', this.resizeHandler);},// 取消事件绑定unbindResizeEvent() {// 取消绑定resize事件window.removeEventListener('resize', this.resizeHandler);},/*** @description 销毁图表* @name destroyedChart* @return {*} 无*/destroyedChart() {// 如果存在echartsif (this.myEchart) {// 销毁实例,销毁后实例无法再被使用。this.myEchart.dispose();this.myEchart = null;// 取消事件绑定this.unbindResizeEvent();}}}
};</script><style scoped></style>
<echarts-line:data="echartsData":axisLabelFormatter="axisLabelFormatter"></echarts-line>axisLabelFormatter: function (value) {if (value === 0) {return '未登录';} else if (value === 1) {return '登录';}}

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

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

相关文章

字符串匹配算法(z函数模版)来自灵神。

一个字符串s求出s的z[i]&#xff0c;z[i]表示以s[i:n]这一段和s[0:n]的从前往后的连续相等字母个数。 比如 abacaba,z[2] (acaba与abacaba比较) 1。

SpringBoot整合Flowable最新教程(一)Flowable介绍

一、Flowable 入门介绍 代码实现文章&#xff1a;SpringBoot整合Flowable最新教程&#xff08;二&#xff09; 官网地址&#xff1a;https://www.flowable.org/   Flowable6.3中文教程&#xff1a;中文教程地址   可以在官网下载对应的jar包在本地部署运行&#xff0c;官方…

【IC设计】Windows下基于IDEA的Chisel环境安装教程(图文并茂)

Chisel环境安装教程 第一步 安装jdk&#xff0c;配置环境变量第二步 安装sbt&#xff0c;不用配置环境变量第三步 安装idea社区版第四步 离线安装scala的idea插件第五步 配置sbt换源1.切换目录2.创建repositories文件3.配置sbtconfig.txt文件 第六步 使用chisel-tutorial工程运…

什么是边缘计算?

今天&#xff0c;我们探讨一个充满机遇和挑战的领域——边缘计算。 首先&#xff0c;让我们一起探讨一下什么是边缘计算。简单来说&#xff0c;边缘计算是指在网络的边缘&#xff0c;即数据生成的位置进行计算的一种模式。这与传统的云计算模式形成了鲜明对比&#xff0c;在云…

CISCRISC? CPU架构有哪些? x86 ARM?

编者按&#xff1a;鉴于笔者水平有限&#xff0c;文中难免有不当之处&#xff0c;还请各位读者海涵。 是为序 我猜&#xff0c;常年混迹CSDN的同学应该不会没听说过CPU吧&#xff1f; 但你真的了解CPU吗&#xff1f;那笔者问你CPU有哪些架构呢&#xff1f; 如果你对你的答案…

Equivariant GNN Networks(等变图神经网络)

3D CNN的缺陷&#xff1a; 旋转不等变、很难扩展到大的蛋白质口袋 The model was constructed based on the 3D CNN model which is not equivariant to rotation and hard to scale to large protein pockets. Vector Feature-based Equivariant Networks 基于向量特征的等…

FCIS 2023:洞悉网络安全新态势,引领创新防护未来

随着网络技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;成为全球共同关注的焦点。在这样的背景下&#xff0c;FCIS 2023网络安全创新大会应运而生&#xff0c;旨在汇聚业界精英&#xff0c;共同探讨网络安全领域的最新动态、创新技术和解决方案。 本文将从大会的…

C++的多态

C++中的多态(Polymorphism)是面向对象编程的三大特性之一,另外两个是封装(Encapsulation)和继承(Inheritance)。多态允许我们使用一个接口来处理不同的数据类型,这些数据类型可能来自基类和派生类。 多态可以分为两种:编译时多态和运行时多态。 编译时多态(早期绑定…

【BBF系列协议】TR101 基于以太网的宽带聚合的迁移

TR-101到基于以太网的宽带聚合的迁移 执行摘要 本技术报告概述了在基于TR-25和TR-59的架构中,如何将ATM聚合网络迁移到基于以太网的聚合网络。TR-101提供了这种基于以太网的聚合网络的架构/拓扑模型,该聚合网络支持TR-058中的业务需求。在此过程中,它描述了对宽带聚合网络…

JVM 性能调优 - Java 中的四种引用(4)

为什么会有四种引用 我们先回顾下在 Java 虚拟机内存体系(1) 中提到了的垃圾回收算法 1、引用计数法 原理:给对象添加一个引用计数器,每当有一个地方引用它,计数器的值就加一。每当有一个引用失效,计数器的值就减一。当计数器值为零时,这个对象被认为没有其他对象引用,…

如何处理旅游景区游客投诉 AIGC的应用场景之一

ChatGPT: Q : 作为景区管理人员&#xff0c;请关于如何处理旅游景区游客投诉给出一份管理制度 旅游景区游客投诉处理管理制度一、投诉接待1. 接待投诉&#xff1a;接待游客投诉的工作人员必须保持礼貌、耐心&#xff0c;认真倾听游客的投诉内容&#xff0c;并及时记录。2. 登记…

一维前缀和,一维差分,二维前缀和,二维差分模板

一维前缀和&#xff1a; 题目&#xff1a; 题目描述 给定一个长度为n的数组a1,a2,....ana_1, a_2,....a_na1​,a2​,....an​. 接下来有q次查询, 每次查询有两个参数l, r. 对于每个询问, 请输出alal1....ara_la_{l1}....a_ral​al1​....ar​ 输入描述: 第一行包含两个整…

JDK和Spring的SPI机制原理分析

目录 一、JDK 二、Spring框架介绍 三、SPI机制原理 一、JDK JDK是Java Development Kit的缩写&#xff0c;是Java开发工具包的意思。它是用于开发Java应用程序和运行Java程序的软件包。JDK包含了Java编译器&#xff08;javac&#xff09;和Java虚拟机&#xff08;JVM&#…

【快速上手QT】01-QWidgetQMainWindow QT中的窗口

总所周知&#xff0c;QT是一个跨平台的C图形用户界面应用程序开发框架。它既可以开发GUI程序&#xff0c;也可用于开发非GUI程序&#xff0c;当然我们用到QT就是要做GUI的&#xff0c;所以我们快速上手QT的第一篇博文就讲QT的界面窗口。 我用的IDE是VS2019&#xff0c;使用QTc…

【NodeJS】005- MongoDB数据库

1.简介 1.1 Mongodb 是什么 MongoDB 是一个基于分布式文件存储的数据库&#xff0c;官方地址 https://www.mongodb.com/ 1.2 数据库是什么 数据库&#xff08;DataBase&#xff09;是按照数据结构来组织、存储和管理数据的 应用程序 1.3 数据库的作用 数据库的主要作用就是…

Python实现排序算法

目录 一&#xff1a;快速排序 二&#xff1a;合并排序 三&#xff1a;冒泡排序 四&#xff1a;插入排序 五&#xff1a;选择排序 一&#xff1a;快速排序 def quicksort(arr): if len(arr) < 1: return arr pivot arr[len(arr) // 2] le…

Vu3中使用h函数

Vu3中使用h函数 h函数优缺点h函数介绍使用 h函数优缺点 h函数介绍 格式 h函数接受三个参数 依次是创建的节点,节点属性,节点内容 优点: 跳过了模板编译,性能高 缺点: 学习成本略高 使用 <template><div><div>h函数</div><table border"1…

【 BUUCTFmisc--爱因斯坦】

这题比较简单&#xff0c;but 对于macOS 的一个 bug 是无法右键查看图片的详细备注&#xff0c;这题就是例子&#xff0c;导致隐藏的密码看不见 Windows 可以看到。具体解决办法是用 exiftool 工具 brew install exiftool exiftool -verbose image.jpg 找到 XPComment 栏&am…

搭建自己的私服 maven 仓库

申明&#xff1a;本文章所使用docker-compose配置文件纯属学习运用&#xff0c;非商用如有雷同请联系本人协调处理。 一、配置docker-compose.yml文件 # 指定docker-compose的版本 version: 3 services: nexus: container_name: nexus_container image: sonatype/nex…

智能指针——浅析

智能指针 本人不才&#xff0c;只能将智能指针介绍一下&#xff0c;无法结合线程进行深入探索 介绍及作用 在异常产生进行跳转时&#xff0c;通过栈帧回收进行内存释放&#xff0c;防止内存泄漏 基于RAII思想可以创建出只能指针 RAII(Resource Acquisition Is Initializatio…