<!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=" 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; 400px; height: 0;"> <!-- <div id="move" style="background-color: #3a4764;height: 10px; 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', 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>
