monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit bea5fbef9779ff13ef48e7281393b0759599079b 2 parents 5020f796 caf5092d

Merge branch 'master-V32-LH' into 'master' 

杭州-通知查询-echars 拖动条优化



See merge request !304
Inline Side-by-side
Showing 2 changed files with 117 additions and 16 deletions
... ... @@ -422,24 +422,125 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
}
}],
series: series,
}
echartObject.setOption(option)
}
/********************单独加载更多****************************/
function loadNoticeMoreChart(echartObject,xData,yData) {
var series = [{
name: '通知次数',
data: yData,
barWidth: 20,
type: 'bar',
label: {
show: true,
position: 'top',
textStyle: {
color: '#555'
},
},
itemStyle: {
normal: {
color: (params) => {
var colors = ['#b6c2ff', '#96edc1', '#fcb75b'];
return colors[params.dataIndex % 3]
}
}
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
}]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: [{
top: 20,
bottom: 70,
left: 30,
right: 5
}],
xAxis: [{
type: 'category',
data: xData,
axisLabel: {
color: '#333',
show: true,
interval:0,
rotate:15
},
axisLine: {
lineStyle: {
color: '#e7e7e7'
}
},
axisTick: {
lineStyle: {
color: '#e7e7e7'
}
},
zlevel: 1
}],
yAxis: [{
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#333'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
lineStyle: {
color: '#ccc'
}
}
}],
series: series,
dataZoom: [
{
type: 'inside'
{ type: 'slider',
show: true,
xAxisIndex: [0],
left: '1%',
bottom: -5,
start: 0,
end: 50 //初始化滚动条
}
],
}
echartObject.setOption(option)
const zoomSize = 6;
echartObject.on('click', function (params) {
echartObject.dispatchAction({
type: 'dataZoom',
startValue: xData[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
xData[Math.min(params.dataIndex + zoomSize / 2, yData.length - 1)]
});
});
window.onresize=function(){
echartObject.resize();
}
// const zoomSize = 6;
// echartObject.on('click', function (params) {
// echartObject.dispatchAction({
// type: 'dataZoom',
// startValue: xData[Math.max(params.dataIndex - zoomSize / 2, 0)],
// endValue:
// xData[Math.min(params.dataIndex + zoomSize / 2, yData.length - 1)]
// });
// });
}
//获取图表数据
function getChartData() {
var where = {
... ... @@ -522,7 +623,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
var yData = res.map.countList;
var xData = res.map.userList;
//展示前20条数据 @Editor LH
loadNoticeChart(noticeTypeChartNew,xData, yData);
loadNoticeMoreChart(noticeTypeChartNew,xData, yData);
}
}
})
... ...
... ... @@ -103,9 +103,9 @@
</article>
<!--上传弹框-->
<script id="more_info" type="text/html">
<div style="align:center;">
<div class="lay-row-title" > 人员分组统计 <div style=" float:right;"></div></div>
<div class="pie-chart" style="height: 350px" id="notice_chart_type_new"></div>
<div style="align:center;padding: 20px;height: 330px">
<div class="lay-row-title" lay-tips="灰色拖动条可以左右拉缩并拖动展示其它数据"> 人员分组统计 </div>
<div class="pie-chart" style="height: 100%" id="notice_chart_type_new"></div>
</div>
</script>
<script>
... ...