Echarts统计图x轴实现拉伸滑动
2022-09-02 本文已影响0人
祈澈菇凉
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"
}
]
