echarts--可拖动的曲线图
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input[type=range] {
-webkit-appearance: none;
width: 100%;
/*这个属性设置使填充进度条时的图形为圆角*/
} input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
} input[type=range]::-webkit-slider-runnable-track {
height: 0px;
/*轨道内置阴影效果*/
} input[type=range]:focus {
outline: none;
} input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 6px;
width: 40px;
margin-top: -3px;
/*使滑块超出轨道部分的偏移量相等*/
background: #3a4764;
border: solid 0.125em #3a4764;
/*设置边框*/
}
</style>
</head> <body>
<div style="width: 500px;height: 500px;background-color: #1c1f2b; position: absolute;">
<div id="main" style="height: 100%;"></div> <div id="move-panel" style="position: relative;z-index: 2;bottom: 60px;left: 50px; width: 400px; height: 0;">
<!-- <div id="move" style="background-color: #3a4764;height: 10px;width: 30px;margin-top:-5px;cursor: pointer;">
</div> -->
<input type="range" value="0" style="display: block;margin: 0;">
</div>
</div>
<input type="button" value="切换" id="btn_click" />
</body> </html>
<script src="echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script> var myChart;
var option; function loadLine() {
option = {
xAxis: {
type: 'category',
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
axisLabel: {
color: 'red'
},// x轴文字颜色
axisLine: {
lineStyle: {
color: '#2d303b'
}
},// 坐标轴颜色
axisPointer: {
show: true
},
boundaryGap: false,
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#2d303b'
}
},// 坐标轴颜色
splitLine: {
lineStyle: {
color: ['#c555cc']
}
},// 分割线颜色
axisLabel: {
color: 'red'
},// 坐标轴的文字颜色
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934],
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 4,
label: {
show: true,
color: '#28edff'
},
lineStyle: {
color: '#28edff',
width: 1,
},
itemStyle: {
color: "#28edff"
}
}],
dataZoom: [
{
type: 'inside',//slider表示有滑动块的，inside表示内置的
show: true,
xAxisIndex: [0],
start: 0,
end: 50,
backgroundColor: 'rgba(0,0,0,0.5)',// 滑块背景颜色
fillerColor: 'rgba(255,255,0,0.5)',// 填充颜色
showDetail: false,// 拖拽时，是否显示详细信息
}
],
};
myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option) } $(function () {
loadLine(); $("#btn_click").click(function () {
option.dataZoom[0].start = option.dataZoom[0].start + 10;
option.dataZoom[0].end = option.dataZoom[0].end + 10;
myChart.setOption(option)
}) $('input').RangeSlider({
min: 0, max: 12, step: 1, callback: function ($value) {
var p = 100 / 24 * $value if (p != option.dataZoom[0].start) {
option.dataZoom[0].start = p;
option.dataZoom[0].end = p + 50;
myChart.setOption(option)
}
}
}); myChart.on('datazoom',function(result){
var h = Math.round(result.batch[0].start * 23 / 100)
var val = $('input').val(); if(h != val){
$('input').val(h);
} })
}) $.fn.RangeSlider = function (cfg) {
this.sliderCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && Number(cfg.step) ? cfg.step : 1,
callback: cfg && cfg.callback ? cfg.callback : null
}; var $input = $(this);
var min = this.sliderCfg.min;
var max = this.sliderCfg.max;
var step = this.sliderCfg.step;
var callback = this.sliderCfg.callback; $input.attr('min', min)
.attr('max', max)
.attr('step', step); $input.bind("input", function (e) {
$input.attr('value', this.value); if ($.isFunction(callback)) {
callback(this.value);
}
});
};
</script>
echarts--可拖动的曲线图的更多相关文章
- echarts 用marlkline画线 同时配置中含有datazoom，怎么设置markline
由于项目需要设置边界值即用markline 画标线,通过echarts文档可以查看到(如下) 1.通过坐标点(xAxis和yAxis的设置) 通过网上搜索许多markline的配置都是通过下面来设置的 ...
- 获取Echarts的DataZoom的起始值
创建DataZoom拖动事件 myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole); //事件名, 相关联的方法名 var ecConfig = requi ...
- 【Model Log】模型评估指标可视化，自动画Loss、Accuracy曲线图工具，无需人工参与!
1. Model Log 介绍 Model Log 是一款基于 Python3 的轻量级机器学习(Machine Learning).深度学习(Deep Learning)模型训练评估指标可视化工具, ...
- easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- vue+echarts实现可拖动节点的折现图（支持拖动方向和上下限的设置）
本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...
- (原创)用Microsoft Chart Controls（MSChart）实现曲线图，并支持拖动放大到秒
Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...
- echarts实现多条可拖动节点的折现图
这篇博文主要是利用echarts实现两条以及多条可拖动节点的曲线,demo脱胎于官方demo,在官方demo的基础上添加了另一条曲线.因为之前写过一篇在vue中使用echarts实现可拖动节点的折线图 ...
- 用Microsoft Chart Controls（MSChart）实现曲线图，并支持拖动放大到秒
Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...
随机推荐
- 【WPF学习】第四章 加载和编译XAML
前面已经介绍过,尽管XAML和WPF这两种技术具有相互补充的作用,但他们也是相互独立的.因此,完全可以创建不使用XAML和WPF应用程序. 总之,可使用三种不同的编码方式来创建WPF应用程序: 只使用 ...
- Docker底层架构之基础架构
Docker 采用了 C/S架构,包括客户端和服务端. Docker daemon 作为服务端接受来自客户 的请求,并处理这些请求(创建.运行.分发容器). 客户端和服务端既可以运行在一个机器上,也可 ...
- learn more ,study less(二):整体性学习技术(上)
前言:在学习整体性学习概念时,一个很好的方法是把它比喻成下棋,首先你要了解下棋的 基本规则和基本目标,本书第一部分可以看做是介绍关于整体性学习的一整套规则和目标. 一旦你理解了下棋的基本规则,你就要开 ...
- python基础面试集锦(51-100)
目录 51.把aaabbbcccdd这种形式的字符串压缩成a3b3c3d2的形式? 52.给你一个字符串'abc',打印出该字符串的所有排列组合? 53.执行以下代码后,x的值为? 54.对于一个非空 ...
- MyBatis 介绍
MyBatis 介绍 MyBatis 是一款优秀的 ORM(Object Relational Mapping,对象关系映射)框架,它可以通过对象和数据库之间的映射,将程序中的对象自动存储到数据库中. ...
- 在VMware中如何清理多余的空间
问题描述 平时用的编程计算机只有250G空间,c盘和d盘,今天准备做实验,发现删除虚拟机中系统的内容不但没有减少空间,反而增加了,这时我意识到虚拟机内部可能与咱们想象的操作模式不一样. 解决办法 我的 ...
- mysql随机查询若干条数据
条不重复的数据,使用以下: 秒以上 搜索Google,网上基本上都是查询max(id) * rand()来随机获取数据. SELECT * FROM `table` AS t1 JOIN (SELE ...
- python 中的反斜杠匹配的问题
关于反斜杠的匹配问题可以参考: https://www.cnblogs.com/mzc1997/p/7689235.html 文章中提出了两个概念: 字符串转义和正则转义,我觉得是理解反斜杠的关键所在 ...
- python 函数3（模块）
1.将函数存储在模块中 1.1.导入整个模块 要将函数导入,得先创建模块,模块 是扩展名为.py的文件,包含要导入到程序中的代码. 首先定义编写一个.py的文件,命名为pizza.py,代码如下: d ...
- Codeforces_831
A.线性判断. #include<bits/stdc++.h> using namespace std; ] = {}; int main() { ios::sync_with_stdio ...