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工程运…

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

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

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

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

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

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

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…

Nicn的刷题日常之 有序序列判断

目录 1.题目描述 描述 输入描述&#xff1a; 输出描述&#xff1a; 示例1 示例2 示例3 2.解题 1.题目描述 描述 输入一个整数序列&#xff0c;判断是否是有序序列&#xff0c;有序&#xff0c;指序列中的整数从小到大排序或者从大到小排序(相同元素也视为有序)。 数据…

ROM/FLASH/RAM

ROM (Read Only Memory)程序存储器: 不能擦除&#xff0c;用于存储各种固化程序和数据&#xff0c;在单片机中用来存储程序数据及常量数据或变量数据&#xff0c;凡是c文件及h文件中所有代码、全局变量、局部变量、存储在ROM中 FLASH 存储器&#xff1a; Flash 存储器&#xf…

素数取りゲーム(线性筛、连续异或、博弈论

小结博弈论题型素数的特性连续异或 代码 题目&#xff1a;素数取りゲーム 临摹的题解&#xff1a;AT_ttpc2019d题解 这题真的看题解都断断续续看了两天才看懂这一个题解 : ( 小结 本题一下遇到了我好多没了解过的点&#xff0c;博弈论、素数的一些特性&#xff0c;连续异或的…

Python中的while循环,知其然知其所以然

文章目录 while循环结构1.用循环打印1 ~ 100步骤解析2. 1 ~ 100的累加和3.死循环1. 用死循环的方法实现 1 ~ 100累加和 4. 单向循环(1)打印 一行十个小星星*(2)通过打印一个变量的形式,展现一行十个小星星(3)一行十个换色的星星 ★☆★☆★☆★☆★☆(4)用一个循环,打印十行十列…

Zookeeper相关面试准备问题

Zookeeper介绍 Zookeeper从设计模式角度来理解&#xff0c;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它负责存储和管理大家都关心的数据&#xff0c;然后接受观察者的注册&#xff0c;一旦这些数据的状态发生了变化&#xff0c;Zookeeper就负责通知已经在Zoo…

DockerUI如何部署结合内网穿透实现公网环境管理本地docker容器

文章目录 前言1. 安装部署DockerUI2. 安装cpolar内网穿透3. 配置DockerUI公网访问地址4. 公网远程访问DockerUI5. 固定DockerUI公网地址 前言 DockerUI是一个docker容器镜像的可视化图形化管理工具。DockerUI可以用来轻松构建、管理和维护docker环境。它是完全开源且免费的。基…