echart 图表添加数据分析功能,可区域选择数据,右上按钮,控制echart行为
chart.on('globalcursortaken', onGlobalcursortaken); //绑定事件
chart.off("brushSelected");//解绑事件处理函数
chart.on('brushSelected', renderBrushed);
getBarDev2(eIndex, eTimeArr, eSeriesArr, eSensorId, eDeviceId, eDeviceType) {
//console.log('EEEEEEE', eIndex, eTimeArr, eSeriesArr, eSensorId, eDeviceId, eDeviceType)
this.$refs.chart.removeAttribute('_echarts_instance_')
const chart = this.$echarts.init(this.$refs.chart, 'light')
var option;
option = {
title: {
text: eSensorId + " : " + eDeviceId,
textStyle: {
//文字颜色
color: '#fff',
}
},
textStyle: {
color: '#fff',//'red'，字体颜色
},
legend: {
textStyle: {
//文字颜色
color: '#fff',
}
},
tooltip: {
trigger: 'axis',
show: true,
formatter: (params) => {
var listData = params
var list = []
var listItem = ''
var html = ''
html += '<span>' + listData[0].name + '<span><br>'
for (var i = 0; i < listData.length; i++) {
html += '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
listData[i].color +
';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
listData[i].seriesName +
': ' +
listData[i].data +
'</span><br>'
}
list.push(html)
listItem = list.join('<br>')
return '<div class="showBox">' + listItem + '</div>'
}
},
grid: {
left: '3%',
right: '4%',
// bottom: '5%',
// containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: eTimeArr,
axisLabel: {
textStyle: {
color: "#2afcfd",
},
},
axisLine: {
lineStyle: {
color: ["#2afcfd"],
width: 0,
type: "dashed",
},
},
splitLine: {
show: true,
lineStyle: {
color: ["#315070"],
width: 1,
type: "dashed",
},
},
},
yAxis: {
type: 'value',
min: 'dataMin',
max: "dataMax",
axisLabel: {
textStyle: {
color: "#fff",
},
boundaryGap: [0, '100%']
},
axisLine: {
lineStyle: {
onZero: false,
color: ["#859fce"],
// width: 0,
// type: "dashed",
},
},
splitLine: {
show: true,
lineStyle: {
color: ["#315070"],
width: 1,
type: "dashed",
},
},
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
bottom: "auto",
}
],
toolbox: {
feature: {
brush: {
title: {
lineX: '数据分析'
}
},
//自定义关闭按钮
myClear: {
show: true,
title: '退出分析',
icon: 'path://M22,14.7l30.9,31 M52.9,14.7L22,45.7 M4.7,16.8V4.2h13.1 M26,4.2h7.8 M41.6,4.2h7.8 M70.3,16.8V4.2H57.2 M4.7,25.9v8.6 M70.3,25.9v8.6 M4.7,43.2v12.6h13.1 M26,55.8h7.8 M41.6,55.8h7.8 M70.3,43.2v12.6H57.2',
onclick: function () {
//brush状态
chart.dispatchAction({
type: 'takeGlobalCursor'
});
//清除选区
chart.dispatchAction({
type: 'brush',
areas: []
});
}
},
}
},
brush: {
toolbox: ['lineX'],
xAxisIndex: 0,
throttleType: 'debounce',
throttleDelay: 600,
//『单击清除所有选框』
removeOnClick: false
},
series: eSeriesArr
};
chart.setOption(option, true)
//brush状态事件
chart.on('globalcursortaken', onGlobalcursortaken);
function onGlobalcursortaken(params) {
//可以根据 params.brushOption.brushType = false 来判断是否退出刷选状态。此处无论进入或者退出状态都清空选取即可
chart.dispatchAction({
type: 'brush',
areas: []
});
}
chart.off("brushSelected");//解绑事件处理函数（可根据情况而定是否需要，这里我这边会重绘几次表，所以需要解绑事件处理函数）。
chart.on('brushSelected', renderBrushed);
function renderBrushed(params) {
// console.log('renderBrushed', params);
var brushed = [];
var brushComponent = params.batch[0];
var selArea = params.batch[0].areas[0] ? params.batch[0].areas[0].coordRange : ''
var selIdxs = []
var selTimes = []
var selDatas = []
for (var sIdx = selArea[0]; sIdx <= selArea[1]; sIdx++) {
selIdxs.push(sIdx)
selTimes.push(eTimeArr[sIdx])
}
eSeriesArr.forEach((e, i) => {
var obj = {
name: e.name,
data: []
}
selDatas.push(obj)
selIdxs.forEach(item => {
selDatas[i].data.push(e.data[item])
});
});
// console.log('selTimes', selTimes)
// console.log('selDatas', selDatas)
//最大值，最小值，最大相邻差，最大差值
// var paramsArr = params.batch[0].selected
// console.log('paramsArr', paramsArr)
selDatas.forEach((e, i) => {
e['startTime'] = selTimes[0]
e['endTime'] = selTimes[selTimes.length - 1]
e['maxVal'] = Math.max(...e.data)
e['minVal'] = Math.min(...e.data)
e['maxGap'] = maximumGap(e.data)
e['maxDiff'] = maximunDiff(e.data)
});
// console.log('selDatas', selDatas)
// console.log('params', params)
if (selIdxs.length > 0) {
chart.setOption({
tooltip: {
show: true,
formatter: function (params) {
selDatas.forEach((e, i) => {
params.forEach((pe, pi) => {
if (e.name == pe.seriesName) {
e['color'] = pe.color
}
});
});
var list = []
var listItem = ''
var html = ''
html += '<span>' + selDatas[0].startTime + '~' + selDatas[0].endTime + '<span><br>'
selDatas.forEach((e, i) => {
if (e.color) {
html +=
"<div style='font-size: 14px; font-weight:bold;'>" +
"<div class='yuan' style='width: 12px;height: 12px;background: #ffffff;border-radius: 50%;display: inline-block;border: 3px solid " + e.color + "; '></div>" +
" 曲线: <span>" + e.name + "</span>" +
"</div>" +
"<p style='font-size: 12px;'>最大值: " + e.maxVal + "; 最小值: " + e.minVal + "</p>" +
"<p style='font-size: 12px;'>最大相邻差: " + e.maxGap + "; 最大差值: " + e.maxDiff + "</p>"
}
});
list.push(html)
listItem = list.join('<br>')
return '<div style="margin: 0px 10px 10px 10px; ">' + listItem + '</div>'
},
}
});
} else {
chart.setOption({
tooltip: {
show: true,
formatter: (params) => {
var listData = params
var list = []
var listItem = ''
var html = ''
html += '<span>' + listData[0].name + '<span><br>'
for (var i = 0; i < listData.length; i++) {
html += '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
listData[i].color +
';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
listData[i].seriesName +
': ' +
listData[i].data +
'</span><br>'
}
list.push(html)
listItem = list.join('<br>')
return '<div class="showBox">' + listItem + '</div>'
}
}
});
}
function maximumGap(nums) {
if (nums) {
if (nums.length < 2) return 0
nums.sort((a, b) => a - b)
let max = nums[1] - nums[0]
for (let i = 0; i < nums.length - 1; i++) {
max = Math.max(max, nums[i + 1] - nums[i])
}
return max.toFixed(2)
}
}
function maximunDiff(arr) {
var max = Math.max.apply(null, arr);
var min = Math.min.apply(null, arr);
return (max - min).toFixed(2);
}
// brushSelected over
}
//over
},