<!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--可拖动的曲线图的更多相关文章

  1. echarts 用marlkline画线 同时配置中含有datazoom，怎么设置markline

    由于项目需要设置边界值即用markline 画标线,通过echarts文档可以查看到(如下) 1.通过坐标点(xAxis和yAxis的设置) 通过网上搜索许多markline的配置都是通过下面来设置的 ...

  2. 获取Echarts的DataZoom的起始值

    创建DataZoom拖动事件 myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);   //事件名, 相关联的方法名 var ecConfig = requi ...

  3. 【Model Log】模型评估指标可视化，自动画Loss、Accuracy曲线图工具，无需人工参与!

    1. Model Log 介绍 Model Log 是一款基于 Python3 的轻量级机器学习(Machine Learning).深度学习(Deep Learning)模型训练评估指标可视化工具, ...

  4. easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  5. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  6. vue+echarts实现可拖动节点的折现图（支持拖动方向和上下限的设置）

    本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...

  7. (原创)用Microsoft Chart Controls（MSChart）实现曲线图，并支持拖动放大到秒

    Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...

  8. echarts实现多条可拖动节点的折现图

    这篇博文主要是利用echarts实现两条以及多条可拖动节点的曲线,demo脱胎于官方demo,在官方demo的基础上添加了另一条曲线.因为之前写过一篇在vue中使用echarts实现可拖动节点的折线图 ...

  9. 用Microsoft Chart Controls（MSChart）实现曲线图，并支持拖动放大到秒

    Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...

随机推荐

  1. 笔记常用Linux命令(三) 查看服务器日志

    服务器日志 用于记录服务器的运行情况 查看服务器日志 tail:查看后面几行 n 显示行数 f 持续侦测后面的内容,查看服务器日志常用 查看最新的服务日志(静态) 命令格式:tail -n 行数 日志 ...

  2. nginx之历史回溯

    前言 nginx是一个web应用及反向代理工具,由一名俄罗斯程序员(Igor)发明的:NGINX是一个免费的,开源的高性能HTTP服务器和反向代理,以及IMAP / POP3代理服务器. NGINX以 ...

  3. CAD制图系列之椭圆画法标注

    今天我将做一个极轴是92,150的椭圆画法和标注方法 1.打开2014版本CAD制图,快捷键EL,回车: 2.自己随便定一个点 3.输入第一个值,也就是短轴--横轴(输入实际长度,不需要除以二)并且鼠 ...

  4. 练习2-15 求简单交错序列前N项和 (15 分)

    练习2-15 求简单交错序列前N项和 (15 分) 本题要求编写程序,计算序列 1 - 1/4 + 1/7 - 1/10 + ... 的前N项之和. 输入格式: 输入在一行中给出一个正整数N. 输出格 ...

  5. void * 和 void 在函数返回值中的区别

    一个很容易糊涂的问题. 在函数的返回值中, void 是没有任何返回值, 而 void * 是返回任意类型的值的指针. 还是看代码吧: #include <stdlib.h> #inclu ...

  6. 【限时免费】近1000G JAVA学习视频下载

    2020的情人节是个极特殊的情人节,面对肆虐的疫情,我们无法出门,宅在家里,也无法阻止你作为一名优秀程序员的梦想. 或许没有鲜花.没有蛋糕…… 姜小白就为大家备好了一份大礼,将自己近几年整理收藏的全网 ...

  7. 90万条数据玩转RFM用户分析模型

    RFM,是一种经典的用户分类.价值分析模型: R,Rencency,即每个客户有多少天没回购了,可以理解为最近一次购买到现在隔了多少天. F,Frequency,是每个客户购买了多少次. M,Mone ...

  8. winform应用如何发布（不用打包）、并提醒用户自动更新

    环境:VS2019 community  C#  winform 应用程序 设计应用程序界面 编写对应代码 使用PS设计程序标识ICON F4打开属性: 设置ICON 设置背景 打开项目属性 打开“发 ...

  9. CCF_ 201403-2_窗口

    用deque模拟. #include<iostream> #include<cstdio> #include<deque> using namespace std; ...

  10. Android Studio MainActivity中的R为红色

    csdn解决链接 https://blog.csdn.net/M283592338/article/details/79880413