dataZo
dataZoom: [ { type: "slider", show: true, // x轴是否启用 start: 94, // 从哪里开始显示 end: 100, // 到哪里结束显示 handleSize: 8, }, { type: "inside", start: 94, end: 100, }, { type: "slider", show: false, // y轴是否启用 yAxisIndex: 0, filterMode: "empty" , width: 12, height: "70%", handleSize: 8, showDataShadow: false, left: "93%", }, ],
demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="mainE" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;width: 400px;"></div> <script> // ==============柱状图============== var names = []; //类别数组(实际用来盛放X轴坐标值) var staffs = []; $.ajax({ url: "test.json", data: { bTime:'', eTime:'' }, type: 'GET', success: function (data) { //请求成功时执行该函数内容，data即为服务器返回的json对象 $.each(data, function (index, item) { names.push(item.x); //挨个取出类别并填入类别数组 staffs.push(item.y); }); eFun(names, staffs); }, }); // 基于准备好的dom，初始化echarts实例 var eChart = echarts.init(document.getElementById('mainE')); // 指定图表的配置项和数据 function eFun(x_data, y_data) { eChart.setOption({ color: [ '#2EC7C9', ], legend: { left: 120, top: 20, data: ['周平均时长'], icon:'roundRect', textStyle: { // 图例文字的样式 color: 'red', }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, dataZoom: [ { type: "slider", show: true, // x轴是否启用 start: 94, // 从哪里开始显示 end: 100, // 到哪里结束显示 handleSize: 8, }, { type: "inside", start: 94, end: 100, }, { type: "slider", show: false, // y轴是否启用 yAxisIndex: 0, filterMode: "empty" , width: 12, height: "70%", handleSize: 8, showDataShadow: false, left: "93%", }, ], xAxis: [ { type: 'category', data: x_data, axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: 'red', width: 1, // 这里是为了突出显示加上的 } }, // axisLabel:{ // interval:0, // textStyle:{ // fontSize: 10, // }, // //竖排统计 // formatter: function (value) { // //x轴的文字改为竖版显示 // var str = value.split(""); // return str.join("\n"); // } // } } ], yAxis: [ { type: 'value', axisLine: { lineStyle: { color: 'red', width: 1, // 这里是为了突出显示加上的 } }, splitLine:{ show:false } } ], series: [ { name: '周平均时长', type: 'bar', barWidth: '60%', data: y_data } ] }) } </script> </body> </html>
json
[ { "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": "2022/1/22", "y": "35.3" },{ "x": 2, "y": "35.3" } ]
