博客zhu虎康
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!
展开
-
Echarts图表快速上手指南
echarts的快速上手指南前言数据可视化已经成为了前端工程师必备的一项技能,数据可视化的工具有好多,今天我们来聊聊echarts。话不多少,我们先分析她的结构文章目录echarts的快速上手指南一、安装二、引入三、使用四、`option`结构如下一、安装官网:https://echarts.apache.org/examples/zh/index.htmlnpm install echarts --save二、引入<script src="echarts.js" chars原创 2022-03-08 11:42:21 · 910 阅读 · 0 评论 -
Echarts 展示——在指定位置添加标题文字
如图所示,定制化该图中文字展示,在echarts图表上添加一串文字或者标题,echarts图上指定位置添加标题文字。因为之前有做过热力图展示,所以第一想到的是使用热力图的label展示,并格式化label展示。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 使用 RGBA 颜色定义透明度。// 初始化 Echarts 实例。// 初始化 Echarts 实例。// 指定图表的配置项和数据。// 指定图表的配置项和数据。但是效果是这样的,不太好。原创 2024-08-06 08:43:05 · 372 阅读 · 0 评论 -
Echarts 展示——中轴线展示
Echarts 展示——中轴线展示。原创 2024-08-06 08:42:39 · 313 阅读 · 0 评论 -
Echarts 展示——取消或改变鼠标移上效果
鼠标一移上去老闪(显示浮框信息和图变大了)原创 2024-07-11 09:45:37 · 759 阅读 · 0 评论 -
Echarts 展示——实现空心圆的绘制
基于准备好的 DOM,初始化 echarts 实例。// 使用刚指定的配置项和数据显示图表。'空心圆绘制......”'如图所示,绘制空心圆。原创 2024-07-09 15:32:57 · 165 阅读 · 0 评论 -
Echarts 展示——在折线图平滑位置处添加该处信息
通过自定义折线图的标签(label)来实现。在 ECharts 中,可以通过设置 series 中的 label.normal.formatter 属性来实现这一点。原创 2024-06-13 09:03:04 · 613 阅读 · 0 评论 -
Echarts 展示——绘制自定义图形
在这个示例中,我们使用了 ECharts 的『自定义图形』功能,通过指定一组点的坐标来绘制一个六边形。然后,我们设置了该六边形的填充颜色、边框颜色和边框宽度。可以使用 ECharts 中的『自定义图形』来绘制一个封闭的六边形。在 Echarts 中绘制一个不规则图形放置在指定位置。可以先从一个六边形画起。原创 2024-06-13 08:59:42 · 141 阅读 · 0 评论 -
Echarts 展示——在折线图的指定位置绘制一个图标展示
在线段交汇处用一个六边形图标展示。原创 2024-06-05 11:19:01 · 407 阅读 · 0 评论 -
Echarts 展示——柱状图中每个柱状图如何自定义展示内容
在这个示例中,我通过设置 label 的 formatter 属性,使用了一个自定义的回调函数来定义每个柱子的展示内容。在这个示例中,我将每个柱子的展示内容设置为了固定的字符串 “自定义内容:” 加上柱子的值。您可以根据需要自定义回调函数,来显示您想要的任何内容。要自定义柱状图中每个柱子的展示内容,您可以通过设置 label 的 formatter 属性来实现。formatter 是一个回调函数,可以用来自定义 label 的显示内容。原创 2024-06-05 11:18:44 · 570 阅读 · 0 评论 -
Echarts 展示——取消鼠标滑动时产生的竖线
在这个示例中,tooltip.axisPointer.type 被设置为 ‘none’,从而取消了鼠标滑动时产生的竖线。这两种方法都可以有效地取消鼠标滑动时产生的竖线效果。选择其中一种方法即可实现你想要的效果。当我们在坐标轴中使用多组数据时会产生如下效果,出现两根竖线,不太美观。原创 2024-06-04 14:33:26 · 382 阅读 · 0 评论 -
Echarts 展示——在指定部分做文字标记
其中,我们通过设置标记的 yAxis 和 label 来控制标记的位置和显示内容。最后,通过设置 lineStyle 的 color 为 ‘transparent’,来隐藏标记线,只显示 ‘abc’ 文字。使用 ECharts 的自定义标记来实现在折线图中相同 Y 值的两点之间显示 ‘abc’。通过遍历数据,找到相邻的 Y 值相同的点,并在这些点上添加了自定义标记 ‘abc’。实现在Echarts的折线图中,相同Y值的两点之间显示’abc’原创 2024-06-04 14:33:04 · 655 阅读 · 0 评论 -
Echarts 问题:type是value的X轴在设置了interval间隔后没有展示
之前代码是这样写的:axisLabel 属性中设置了 interval ,但未起作用,原因如下。Echarts中type是value的X轴在设置了interval间隔后没有展示。原创 2024-06-03 09:43:27 · 476 阅读 · 0 评论 -
Echarts 展示——指定 series 中的数据对应指定类型的X轴或Y轴
下图中,既有折线又有柱状图,也就是说X轴既有 value 的类型,又有 category 类型的数据,如果都要在一张图中展示,因为数据来源不同,且数据所对应的 X 轴和 Y 轴也不同,所以需要在设置数据源时添加所对应的索引。原创 2024-05-31 15:26:35 · 592 阅读 · 0 评论 -
Echarts 展示——让柱状图在图表中展示,离开X轴
话不多说,直接源码展示。原创 2024-05-31 15:17:27 · 194 阅读 · 0 评论 -
Echarts 展示——实现自定义曲线的弧度
在 ECharts 中,可以通过控制数据点的位置来调整曲线的弧度。具体来说,可以通过设置数据项的控制点来调整曲线的形状。ECharts 中的折线图和曲线图都是通过控制点来绘制曲线的,可以通过设置数据项的控制点来调整曲线的弧度。可以尝试不同的值来调整曲线的形状,从而调整两点间的曲线弧度。另外,ECharts 也提供了 lineStyle 属性,可以通过设置 lineStyle 来调整线条的样式,包括曲线的颜色、宽度等。通过调整这些属性,您可以灵活地控制两点间曲线的弧度以及整体的曲线形状。原创 2024-05-31 14:42:22 · 594 阅读 · 0 评论 -
Echarts 展示——实现线条绘制
用 Echarts 实现如下效果。原创 2024-05-29 08:56:26 · 270 阅读 · 0 评论 -
大屏自适应解决方案
当我们在看视频时,会发现把窗口缩小,视频也会缩小但处于窗口正中间,等比例的进行了缩放,横纵比例还是保持在 16:9 的这么一个状态,这个状态是如何做。可以实现,但不够优雅,继而继续写出了以下,添加了防抖,添加了过渡,添加了居中展示。这里浅浅自己封装一下进行使用,原创 2024-05-22 15:09:27 · 213 阅读 · 0 评论 -
Echarts 展示——将 x 轴左右留白
如图所示,将X轴的左右留白。原创 2024-05-22 15:08:52 · 411 阅读 · 0 评论 -
Echarts 展示——实现将X轴放在图表顶部并且自动播放展示提示信息内容
以下是一个简单的示例,演示了如何使用 ECharts 来创建一个柱状图,并将 Y 轴进行倒序排序:并且该案例中还添加了。使用 ECharts 来实现对 Y 轴的倒序排序时,可以通过设置 yAxis 的。如下图所示,实现柱状图中反转倒着绘制。原创 2024-05-20 17:04:26 · 555 阅读 · 0 评论 -
Echarts 问题:弹出提示框被遮挡
false 表示,tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。设置为true将提示框的 DOM 节点添加为 HTML 的 的子节点,这样就可以无视容器的超出隐藏了。在上面的代码中,首先获取了 ECharts 实例对象,然后获取到 tooltip 的 DOM 元素,并设置了它的 z-index 属性为一个较高的值(例如9999)。通过这种方式,你可以调整 tooltip 的层级,确保它不会被其他 div 所遮挡。如下图所示,弹出提示框被遮挡。原创 2024-05-20 17:04:03 · 950 阅读 · 0 评论 -
Echarts 展示——通过dataZoom,实现x轴和y轴放大缩小
【代码】Echarts 通过dataZoom,实现x轴和y轴放大缩小。原创 2024-05-10 15:32:26 · 461 阅读 · 0 评论 -
Echarts问题: 数据更新后原数据还存在于图中的问题
如下图所示,图一是选择的两组数据进行展示,图二是选择的一组数据进行展示,但图中的绘制数据还是两组的,这个时候打印一下watch监听到变化的值如图三,发现值是正常的。如果传入新的option不希望保留原来的数据则在调用setOption时,传入第二个参数(notMerge)为true。官网中有一个这样的选项。原创 2024-04-07 09:25:00 · 974 阅读 · 0 评论 -
Echarts 展示——自适应宽高,或指定宽高进行自适应
因为我习惯使用 ref 来获取组件的 DOM 元素,然后进行挂载。有一个按钮实现对Echarts的指定缩放与拉长,形成自适应效果。因此在监听变化的时候,要修改 ref 获取到的元素的宽度和高度。该块元素缩短后效果图。因此采用如下解决办法。原创 2024-04-03 16:52:49 · 781 阅读 · 0 评论 -
Echarts 展示——添加多个 Y 轴并可对 Y 轴的最大最小值进行自定义编辑
过程线图Y主轴:Y次轴:编辑y轴 相关图原创 2024-04-02 14:21:36 · 673 阅读 · 0 评论 -
Echarts 展示——自定义折线图的拐点与图标
如图所示需要自定义节点的图标展示。这里是我的几个图片转出来的svg。原创 2024-04-02 13:12:16 · 1032 阅读 · 0 评论 -
Echarts 展示——给折线图区域填充颜色
【代码】Echarts 给折线图区域填充颜色。原创 2024-03-28 08:58:11 · 787 阅读 · 0 评论 -
Echarts 报错:[ECharts] DEPRECATED: textStyle hierarchy in axisLabel has been removed sin
根据错误提示,自 ECharts 4.0 版本开始,axisLabel 中的 textStyle 层级关系已被移除,所有的文本样式属性现在直接在 axisLabel 中配置。因此,您需要调整您的 ECharts 配置,将原来 textStyle 中的属性直接移到 axisLabel 中。请在您的 ECharts 配置中找到所有使用了 textStyle 的部分,并按照以上示例将其更新为在 axisLabel 中配置文本样式属性。原创 2024-03-06 14:55:38 · 1701 阅读 · 0 评论 -
Echarts 展示——配置项 series 中的 data 是多维度
首先是 Y 轴的格式需要改变,之前是value,但value会导致数据变为这种情况。在绘制折线图时,通常我们的 series 中的 data 数据是这样的格式。如下图数据格式所示,现要求按照该格式进行绘制折线图。但是给定的格式是如下的这种,我们就需要进行一些变换。因此需要将Y轴格式改为如下,效果就出来了。原创 2024-03-06 09:29:15 · 1343 阅读 · 0 评论 -
手写一个图形验证码
使用 JS 写一个验证码,并在前端进行校验。原创 2024-01-24 17:21:58 · 431 阅读 · 0 评论 -
Echarts 展示——对饼状图上的各模块添加点击事件
然后,使用 echarts.init 方法创建了一个 ECharts 实例,并设置了饼状图的数据。接着,使用 myChart.on 方法监听了饼状图的 ‘click’ 事件,并在回调函数中获取被点击项的名称和数值,并将其输出到控制台和一个弹窗中。最后,使用 myChart.setOption(option) 将配置项应用到 ECharts 实例中,从而显示饼状图。当用户点击饼状图上的各个模块时,我们可以通过 JavaScript 监听 click 事件来实现相应的交互逻辑。原创 2024-01-16 16:54:08 · 2944 阅读 · 0 评论 -
Echarts 展示——折线图圆点属性【圆点大小】【鼠标悬停时放大圆点】
在样式中。原创 2024-01-12 14:53:42 · 3775 阅读 · 0 评论 -
Echarts 展示——柱状图合集
思路:将数据合起来放到series中的data中series: [data: [ ],large:true,// 开启大数据量优化,在数据图形特别多而出现卡顿时候可以开启},data: [ ],large:true,// 开启大数据量优化,在数据图形特别多而出现卡顿时候可以开启。原创 2024-01-12 14:46:09 · 367 阅读 · 0 评论 -
【海康威视】场景中遇到的那些问题
在使用 海康威视 插件进行做视频接入时,出现的一些奇奇怪怪的问题,今天整理一下吧!!!原创 2024-01-10 10:20:03 · 716 阅读 · 0 评论 -
Echarts 展示——绘制自定义热力图
文章目录需求分析需求用Echarts 绘制自定义热力图分析源码<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>源码</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="js/echarts.js"></script> </原创 2023-12-18 17:05:49 · 287 阅读 · 0 评论 -
GeoServer 安装及使用教程
GeoServer是一个开源的地理空间数据服务器,可以将地图数据发布为Web服务。在本篇教程中,我们将介绍如何安装GeoServer并发布地理数据。一般用在 openlayer 开发中。原创 2023-09-11 18:51:57 · 1463 阅读 · 0 评论 -
Vue + electron 构建桌面应用程序
编写Vue.js代码:使用Vue.js编写你的应用程序代码。你可以在Vue.js组件中编写你的代码,并使用Vue.js生命周期函数管理你的组件。这将在Vue.js项目中安装Electron,并使用electron-builder插件配置Vue.js项目以构建Electron应用程序。安装Vue CLI:使用Vue CLI可以快速创建Vue.js项目和组件。安装Electron:在Vue.js项目中安装Electron。创建Vue.js项目:使用Vue CLI创建一个新的Vue.js项目。原创 2023-07-04 14:51:09 · 682 阅读 · 0 评论 -
ECharts 展示——通过组件 visualMap 指定渲染数据某一维度
想让visualMap指定渲染某一列,可以使用visualMap.dimension属性来指定映射的数据维度2。ECharts中可以让visualMap指定渲染某一列吗 或指定渲染某个维度。这样,visualMap就会根据第三个维度(z)的值来改变每个点的颜色。原创 2023-06-14 18:37:13 · 1178 阅读 · 0 评论 -
Echarts 展示——显示指定区域内容 + 不允许控制缩放
在开发中,遇到如下一个需求,要展示指定区域的图形,并控制其不允许缩放。第一想到的就是控件 dataZoom 中设置指定展示的区域,总结如下。原创 2023-06-13 18:19:30 · 3483 阅读 · 0 评论 -
Echarts 展示——在图表中标记出一个或多个区域
【代码】Echarts 在图表中标记出一个或多个区域。原创 2023-06-13 15:55:34 · 718 阅读 · 1 评论 -
Echarts 展示——用散点图绘制一个圆
【代码】Echarts 用散点图绘制一个圆。原创 2023-06-13 15:51:37 · 670 阅读 · 0 评论