echarts 拖动markline，并计算中间区域的差值，标注红色虚线

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入 echarts.js --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"></script><script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;" class="mychart"></div><script type="text/javascript">var id = "main";// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var yName = '单位';var seriesData = [[0, 1],[1, 5],[2, 4],[3, 8],[4, 6]];var colors = ['#EE6666', '#48D1CC', '#FAC858', '#91CC75', '#EA7CCC','#9A60B4', '#3BA272', '#FC8452', '#E53E71', '#5470C6'];var option = {color: colors,title: {text: "",textStyle: {// color: 'white',color: 'black',fontWeight: 400,fontSize: 16},left: 'center',top: '0%'},tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: "#888888"}}},legend: {top: "30",x: "center",textStyle: {//color: "white",color: "black",fontSize: 12},},toolbox: {show: true,feature: {dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}},grid: {top: '20%',bottom: '15%',left: '2%',right: '10%',containLabel: true},xAxis: [{id: 'x0',type: "category",boundaryGap: true,axisLabel: {textStyle: {//color: "#FFF",color: "black",fontSize: 12}},axisLine: {show: true,lineStyle: {//color: "black",color: "black"}},axisTick: {show: false},}, {axisPointer: {show: false},axisLine: {show: false},position: "bottom",offset: 20}],yAxis: [{id: '2',name: yName,nameTextStyle: {//color: '#FFF',color: "black",fontSize: 12,},type: "value",axisTick: {show: false},axisLine: {show: true,lineStyle: {color: "black"}},axisLabel: {formatter: '{value}',textStyle: {//color: "#FFF",color: 'black',fontSize: 12}},splitLine: {show: false}}],dataZoom: [{type: 'inside',xAxisIndex: 0,zoomLock: false,filterMode: 'empty',}],series: [{id: 'serie0',type: 'line',z: 1,data: seriesData,symbolSize: 10,symbol: 'circle',smooth: true,itemStyle: {normal: {color: '#EE6666'//color: 'rgba(0,245,255,0.9)' 蓝色}},emphasis: {focus: 'series'},markPoint: {symbol: 'pin',// 标记的数据，可以是最大值最小值也可以是自定义的坐标data: []},}, {id: 'vline',z: 2,data: seriesData,type: 'line',// 隐藏seriessymbolSize: 0,showSymbol: false,lineStyle: {width: 0,color: 'rgba(0, 0, 0, 0)'},markPoint: {symbol: 'pin',// 标记的数据，可以是最大值最小值也可以是自定义的坐标data: []},}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//绘制垂直markLinemyChart.setOption(getVlineOpt(0, 2));function getMarkAxis() {var result = new Object();var option = myChart.getOption();$.each(option.series, function(i, series) {if (series.id == 'vline') {var markLine = series.markLine;result['L1'] = markLine.data[0].xAxis;result['L2'] = markLine.data[1].xAxis;return false;}});return result;}function getVlineOpt(x1, x2, select) {if (x1 == null || x1 == undefined) {x1 = getMarkAxis()['L1'];}if (x2 == null || x2 == undefined) {x2 = getMarkAxis()['L2'];}var color1 = '#FFBE00';var color2 = '#FFBE00';if (select == 'L1') {color1 = '#111111';}if (select == 'L2') {color2 = '#111111';}var option = {series: [{id: 'vline',markLine: {symbol: 'none',silent: true,label: {show: true,},data: [{xAxis: x1,name: 'L1',lineStyle: {normal: {type: "dashed",width: 1,color: color1}}}, {xAxis: x2,name: 'L2',lineStyle: {normal: {type: "dashed",width: 1,color: color2}}}]},markPoint: {symbol: 'pin',// 标记的数据，可以是最大值最小值也可以是自定义的坐标data: []},}]};return option;}//绘制L值的graphic linevar myHeight = myChart.getHeight() - 50;var myWidth = myChart.getWidth() - 50;myChart.setOption({graphic: {elements: [{type: 'rect',id: 'rect1',name: 'rect1',bottom: -myHeight,z: 10,invisible: true,shape: {width: 0,height: myHeight * 2},style: {fill: 'rgba(128,128,128,1)',stroke: 'rgba(128,128,128,1)',lineWidth: 6},// 转换坐标系上的点到像素坐标值position: [myChart.convertToPixel({xAxisId: 'x0'}, getMarkAxis()['L1']), 0],bouding: 'all',cursor: 'move',draggable: true,ondragstart: onLineDragStart,ondragend: onLineDragEnd}, {type: 'rect',id: 'rect2',name: 'rect2',bottom: -myHeight,z: 9,invisible: true,shape: {width: 0,height: myHeight * 2},style: {fill: 'rgba(128,128,128,1)',stroke: 'rgba(128,128,128,1)',lineWidth: 6},//转换坐标系上的点到像素坐标值position: [myChart.convertToPixel({xAxisId: 'x0'}, getMarkAxis()['L2']), 0],bouding: 'all',cursor: 'move',draggable: true,ondragstart: onLineDragStart,ondragend: onLineDragEnd}]}});//拖拽开始markline变色function onLineDragStart() {var graphicId = this.__ecGraphicId;if (graphicId == 'rect1') {myChart.setOption(getVlineOpt(null, null, 'L1'));} else if (graphicId == 'rect2') {myChart.setOption(getVlineOpt(null, null, 'L2'));}}//垂直线重新定位，拖拽结束markLine和graphic确定位置function onLineDragEnd() {//console.log(this.position);try {//转换像素坐标值到逻辑坐标系上的点，是convertToPixel的逆运算var x = getXAxis(this.position[0]);//markLine重新定位var vline_opt = {};var graphicId = this.__ecGraphicId;if (graphicId == 'rect1') {vline_opt = getVlineOpt(x, null);} else if (graphicId == 'rect2') {vline_opt = getVlineOpt(null, x);}myChart.setOption(vline_opt);//graphic重新定位var graph_opt = getGraphicOpt();myChart.setOption(graph_opt);} catch (e) {console.log('垂直线移动失败。');console.log(e);}}function getXAxis(Xpx) {var seriesData = getSeriesData(myChart, 'serie0');var x = myChart.convertFromPixel({xAxisId: 'x0'}, Xpx);if (x <= 0) {x = 0;} else if (x >= seriesData.length) {x = seriesData.length - 1;}return x;}function getSeriesData(myChart, serieId) {var data = [];try {var series = myChart.getOption().series;$.each(series, function(i, serie) {if (serie.id == serieId) {data = serie.data;return false;}});} catch (e) {console.log("获取数据失败。");console.log(e);}return data;}function onAreaDragEnd() {try {var x_start = getXAxis(this.position[0] - 5);var x_end = getXAxis(this.position[0] + this.shape.width + 5);//markLine重新定位var vline_opt = {};var result = getMarkAxis();if (result['L1'] < result['L2']) {vline_opt = getVlineOpt(x_start, x_end);} else {vline_opt = getVlineOpt(x_end, x_start);}myChart.setOption(vline_opt);//graphic重新定位var graph_opt = getGraphicOpt();myChart.setOption(graph_opt);//getX(id, x_start, x_end);} catch (e) {console.log('垂直线移动失败。');console.log(e);}}//graphic重新定位function getGraphicOpt() {var result = getMarkAxis();var option = {graphic: {elements: [{id: 'rect1',$action: 'merge',position: [myChart.convertToPixel({xAxisId: 'x0'}, result['L1']), 0]},{id: 'rect2',$action: 'merge',position: [myChart.convertToPixel({xAxisId: 'x0'}, result['L2']), 0]}]}};return option;}// 防止datazoom缩放，markline无法拖动myChart.on('dataZoom', (param) => {var graph_opt = getGraphicOpt();myChart.setOption(graph_opt);})</script></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Linux 学习 --- 编辑 vi 命令

Linux 学习 --- 编辑 vi 命令

1、vi 基本概念&#xff08;了解&#xff09; 基本上 vi 可以分为三种状态&#xff0c;分别是命令模式 (command mode)、插入模式 (Insert mode) 和底行模式 (last line mode)&#xff0c;各模式的功能区分如下: 命令行模式 command mode&#xff09;　　控制屏幕光标的移动&a…
阅读更多...
工业项目组态用这个开源软件ScadaBR

工业项目组态用这个开源软件ScadaBR

软件介绍 ScadaBR 是一个开源软件&#xff0c;提供完整的 SCADA&#xff08;Supervisory Control and Data Acquisition&#xff0c;监控与数据采集&#xff09;系统的所有功能。SCADA 类型的软件自60年代末开始存在&#xff0c;并且在涉及机器、可编程逻辑控制器&#xff08;P…
阅读更多...
ssh远程访问windows系统下的jupyterlab

ssh远程访问windows系统下的jupyterlab

网上配置这一堆那一堆&#xff0c;特别乱&#xff0c;找了好久整理后发在这里 由于既想打游戏又想做深度学习&#xff0c;不舍得显卡性能白白消耗&#xff0c;这里尝试使用笔记本连接主机 OpenSSH 最初是为 Linux 系统开发的&#xff0c;现在也支持包括 Windows 和 macOS 在内…
阅读更多...
《R语言与农业数据统计分析及建模》学习——数字图像处理

《R语言与农业数据统计分析及建模》学习——数字图像处理

数字图像处理&#xff08;digital image processing&#xff09;又称计算机图像处理&#xff0c;它是指将图像信号转换成数字信号并利用数字图像处理计算机对其进行处理的过程。 常见的数字图像处理是通过计算机对图像进行去除噪声、增强、复原、分割、提取特征等处理。 R语言…
阅读更多...
QT上位机的学习

QT上位机的学习

后面又该找工作了&#xff0c;这块的内容也需要好好学习&#xff01; QT 篇 QT上位机串口编程-CSDN博客 (1)可以通过安装虚拟串口来模拟串口通信的情况 发现我之前安装过&#xff08;9.0): 可以生成虚拟串口&#xff0c;无需实际硬件串口就可以实现同一台电脑上串口模拟通信…
阅读更多...
电路笔记 : 电容电阻大小表示（103、104、151、2R5、R15的含义）

电路笔记 : 电容电阻大小表示（103、104、151、2R5、R15的含义）

电容电阻大小表示 电阻 数字索位标称法 数字索位标称法就是在电阻体上用三位数字来标明其阻值。它的第一位和第二位为有效数字&#xff0c;第三位表示在有效数字后面所加“0”的个数.这一位不会出现字母。如果阻值是小数.则用“R”表示“小数点”.并占用一位有效数字&#xf…
阅读更多...
【51单片机普中板子74LS138+245+573可调时钟整点蜂鸣中级应用】2022-12-7

【51单片机普中板子74LS138+245+573可调时钟整点蜂鸣中级应用】2022-12-7

缘由用51单片机普中开发板实现数字时钟-嵌入式-CSDN问答 #include "reg52.h" //定义按键 sbit key0P3^0; sbit key1P3^1; sbit key2P3^2; sbit key3P3^3; //定义数码管位驱运位 sbit L1P2^2; sbit L2P2^3; sbit L3P2^4; sbit beepP2^5; unsigned char code ShuMaGua…
阅读更多...
微调Mistral 7B以实现命名实体识别 (NER)

微调Mistral 7B以实现命名实体识别 (NER)

文章来源&#xff1a;fine-tuning-mistral-7b-for-named-entity-recognition-ner 2024 年 4 月 19 日 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;命名实体识别&#xff08;NER&#xff09;被认为是一项关键任务&#xff0c;应用范围广泛&#xff0c;包括信息…
阅读更多...
tensorflow报错

tensorflow报错

参考 TensorFlow binary is optimized to use available CPU instructions in performance-critical operations._this tensorflow binary is optimized to use availab-CSDN博客 解决Python中cuBLAS插件无法注册问题_unable to register cudnn factory: attempting to re-CS…
阅读更多...
SQL数据库

SQL数据库

一.什么是数据库 数据库&#xff1a;存储数据的仓库&#xff0c;数据是有组织的进行存储。&#xff08;database 简称DB&#xff09; 数据库管理系统&#xff1a;管理数据库的大型软禁&#xff08;DataBase Management System 简称DBMS&#xff09; SQL&#xff1a;操作关系…
阅读更多...
【MySQL 5.7安装时候 出现2503报错，解决方案】

【MySQL 5.7安装时候 出现2503报错，解决方案】

MySQL5.7 安装遇 2503问题如何解决 1.能正常安装就点这里2.出现2503问题就看这2.1先看问题2.1.1在官网下载好安装包后&#xff0c;首先先确认安装包是否完整&#xff0c;排除安装包损坏的问题2.1.2 安装时候出现这个2503问题 2.2上解决方案2.2.1 打开任务管理器2.2.2 解决 1.能…
阅读更多...
「C/C++ 01」volatile关键字 和 修改const修饰的变量

「C/C++ 01」volatile关键字 和 修改const修饰的变量

目录 一、修改const修饰的局部变量 二、无法修改const修饰的全局变量 三、volatile关键字 面试题】 一、修改const修饰的局部变量 可以通过指针和强转来修改const修饰的局部变量。 #include <iostream> using namespace std;int main(void) {const int a 1;int* pa (in…
阅读更多...
hive表基本语法

hive表基本语法

hive表基本语法 青少年是一个美好而又是一去不可再得的时期 是将来一切光明和幸福的开端 目录 hive表基本语法 1.ROW FORMAT用法 2.LOCATION用法 3.EXTERNAL用法 &#xff08;外部表&#xff09; 4.STORED AS 用法&#xff1a;设置数据存储格式 5.TBLPROPERTIES 用法 6.P…
阅读更多...
.位运算.

.位运算.

本题涉及到计算机组成与原理的相关知识 找了一篇相当不错的讲解&#xff0c;大家可以借鉴&#xff1a;位运算&#xff1a;按位与、按位或、按位异或、按位左移、按位右移-CSDN博客 给定一个长度为 n&#x1d45b; 的数列&#xff0c;请你求出数列中每个数的二进制表示中 11 的…
阅读更多...
设计模式: 工厂模式

设计模式: 工厂模式

工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一&#xff0c;这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种创建对象的方式&#xff0c;而无需指定要创建的具体类。 工厂模式属于创建型…
阅读更多...
网络架构建模：一个云案例研究-文章翻译

网络架构建模：一个云案例研究-文章翻译

网络架构建模：一个云案例研究 摘要 互联网支持广泛服务的能力取决于网络架构以及未来网络所需的理论和实践创新。本文中的网络体系结构指的是计算机网络系统的结构及其物理组件、配置和通信协议之间的交互。多年来，人们对网络架构进行了各种各样的描述，其中有大量的表面图…
阅读更多...
ICode国际青少年编程竞赛- Python-1级训练场-基本操作

ICode国际青少年编程竞赛- Python-1级训练场-基本操作

ICode国际青少年编程竞赛- Python-1级训练场-基本操作 1、 Dev.step(3)2、 Dev.step(1)3、 Dev.step(7)4、 Dev.step(-1)5、 Dev.step(-5)6、 Dev.step(3) Dev.step(-8)7、 Dev.turnRight() Dev.step(1)8、 Dev.turnLeft() Dev.step(1)9、 Dev.step(4) Dev.tur…
阅读更多...
Linux下top命令指标说明

Linux下top命令指标说明

目录 Linux下top命令指标说明1. 概览2. CPU利用率3. 内存利用率4. 进程信息 Linux下top命令指标说明 在Linux系统中&#xff0c;top 命令是一个用于实时监视系统运行状态的工具。通过 top 命令&#xff0c;我们可以了解系统的负载情况、CPU利用率、内存使用情况以及各个进程的…
阅读更多...
免费开源语音克隆-GPT-SoVITS-WebUI只需 5 秒的声音样本

免费开源语音克隆-GPT-SoVITS-WebUI只需 5 秒的声音样本

语音克隆-GPT-SoVITS-WebUI 强大的少样本语音转换与语音合成Web用户界面。 功能&#xff1a; 零样本文本到语音&#xff08;TTS&#xff09;&#xff1a; 输入 5 秒的声音样本&#xff0c;即刻体验文本到语音转换。 少样本 TTS&#xff1a; 仅需 1 分钟的训练数据即可微调模型…
阅读更多...
Matlab|二阶锥松弛在配电网最优潮流计算中的应用

Matlab|二阶锥松弛在配电网最优潮流计算中的应用

目录 一、主要内容 二、部分代码 三、程序代码 四、下载链接 一、主要内容 最优潮流计算是电网规划、优化运行的重要基础。首先建立了配电网全天有功损耗最小化的最优潮流计算模型&#xff1b;其次结合辐射型配电网潮流特点建立支路潮流约束&#xff0c;并考虑配电网中的可…
阅读更多...
最新文章

Copyright @ 2022~2023