Echarts统计图x轴实现拉伸滑动
echarts 实现 滑动 拉伸 统计图
2023-06-13 09:11:15 时间
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"
}
]
相关文章
- 基于VUE + Echarts 实现可视化数据大屏展示效果[通俗易懂]
- [Python从零到壹] 十七.可视化分析之Matplotlib、Pandas、Echarts入门万字详解
- echarts x轴最后一个文字加粗解决方法
- 「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表,得学学了,必须要会的基本操作了
- echarts中国地图散点实现自定义动画
- echart旭日图数据转换_echarts横坐标时间轴
- 二、基础平滑、面积折线图与折线堆叠、面积堆叠《手把手教你 ECharts 数据可视化详解》
- 数据可视化:基于 Echarts + SpringBoot 的动态实时大屏银行监管系统【源码】
- 用Echarts实现前端表格引用从属关系可视化
- echarts饼图鼠标移入时,悬停部分不放大突出 属性 ?
- echarts的引入和使用(fasadmin中如何使用echarts绘制图表)
- Echarts与SSM框架交互
- ECharts使用dataset管理数据
- Echarts实现3D环状图效果(非3d)