<!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>
相关文章：