数据可视化：Echart中k图实现动态阈值报警及实时更新数据
1 目标
使用Echart的k图展现上下阈值，并且当真实值超过上阈值或低于下阈值时候，标红报警。
2 实现效果
如下：
3 代码
1）头文件，引用jquery.js和echart.js;其中，jquery是实现ajax读取数据的，echart负责数据前端可视化。
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js" />
<script src="jquery.min.js" />
<script>
$(document).ready(function(){
})
</script>
</head>
2）body中创建id为main的div布局。
<div id="main" style="width: 600px;height:400px;"></div>
3）ajax获取数据，数据放在同级目录中，这种同域的数据传递ajax是允许的，但是非同域是不允许的，需使用jsonp。echart的k图api参照官方文档即可。
<script type="text/javascript"> htmlobj=$.ajax({url: "example-helium-all.json", async: false}); dataobj = htmlobj.responseText data = JSON.parse(dataobj) // dataobj = String(dataobj) // alert(dataobj) htmlobj=$.ajax({url: "example-helium-line.json", async: false}); dataobj = htmlobj.responseText dataLine = JSON.parse(dataobj) // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest) var data0 = splitData(data) function splitData(rawData) { var categoryData = []; var values = [] for (var i = 0; i < rawData.length; i++) { categoryData.push(rawData[i].splice(0, 1)[0]); values.push(rawData[i]) } return { categoryData: categoryData, values: values }; } option = { title: { text: '动态阈值', left: 0 }, tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }, legend: { data: ['阈值', '真实值'] }, grid: { left: '10%', right: '10%', bottom: '15%' }, xAxis: { type: 'category', data: data0.categoryData, scale: true, boundaryGap : false, axisLine: {onZero: false}, splitLine: {show: false}, splitNumber: 20, min: 'dataMin', max: 'dataMax' }, yAxis: { scale: true, splitArea: { show: true } }, dataZoom: [ { type: 'inside', start: 50, end: 100 }, { show: true, type: 'slider', y: '90%', start: 50, end: 100 } ], series: [ { name: '阈值', type: 'candlestick', data: data0.values, }, { name: '真实值', type: 'line', data: dataLine, smooth: true, lineStyle: { normal: {opacity: 0.5} } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
4）example-helium-all.json文件
[[1465800000000, 377.52664, 344.38693, 377.52664, 344.38693], [1465801200000, 427.24643, 294.71213, 427.24643, 294.71213], [1465802400000, 427.26904, 294.73474, 427.26904, 294.73474], [1465803600000, 427.29175, 294.75745, 427.29175, 294.75745], [1465804800000, 393.14163, 328.95248, 393.14163, 328.95248], [1465806000000, 393.1645, 328.97534, 393.1645, 328.97534], [1465807200000, 393.1877, 328.99857, 393.1877, 328.99857], [1465808400000, 390.47244, 331.762, 390.47244, 331.762], [1465809600000, 390.49747, 331.78702, 390.49747, 331.78702], [1465810800000, 390.52338, 331.81293, 390.52338, 331.81293], [1465812000000, 377.9352, 344.4537, 377.9352, 344.4537], [1465813200000, 377.9616, 344.4801, 377.9616, 344.4801], [1465814400000, 377.98856, 344.50705, 377.98856, 344.50705], [1465815600000, 380.20532, 342.34515, 380.20532, 342.34515], [1465816800000, 380.233, 342.37283, 380.233, 342.37283], [1465818000000, 342.40057, 380.26074, 342.40057, 380.26074], [1465819200000, 381.4104, 341.30634, 381.4104, 341.30634], [1465820400000, 381.43872, 341.33466, 381.43872, 341.33466], [1465821600000, 381.46735, 341.36328, 381.46735, 341.36328], [1465822800000, 408.49902, 314.3891, 408.49902, 314.3891], [1465824000000, 408.5277, 314.4178, 408.5277, 314.4178], [1465825200000, 408.55652, 314.4466, 408.55652, 314.4466], [1465826400000, 390.49387, 332.5676, 390.49387, 332.5676], [1465827600000, 390.52307, 332.5968, 390.52307, 332.5968], [1465828800000, 390.55234, 332.62607, 390.55234, 332.62607], [1465830000000, 388.86066, 334.37592, 388.86066, 334.37592], [1465831200000, 388.88956, 334.40482, 388.88956, 334.40482], [1465832400000, 388.91815, 334.4334, 388.91815, 334.4334], [1465833600000, 388.12985, 335.27853, 388.12985, 335.27853], [1465834800000, 388.1578, 335.3065, 388.1578, 335.3065], [1465836000000, 388.1856, 335.3343, 388.1856, 335.3343], [1465837200000, 374.74588, 348.8292, 374.74588, 348.8292], [1465838400000, 374.77365, 348.85696, 374.77365, 348.85696], [1465839600000, 374.8015, 348.88483, 374.8015, 348.88483], [1465840800000, 378.441, 345.3013, 378.441, 345.3013], [1465842000000, 378.46896, 345.32925, 378.46896, 345.32925], [1465843200000, 378.49673, 345.35703, 378.49673, 345.35703], [1465844400000, 428.2217, 295.6874, 428.2217, 295.6874], [1465845600000, 428.24954, 295.71524, 428.24954, 295.71524], [1465846800000, 428.277, 295.7427, 428.277, 295.7427], [1465848000000, 394.1316, 329.94244, 394.1316, 329.94244], [1465849200000, 394.15836, 329.9692, 394.15836, 329.9692], [1465850400000, 394.18527, 329.99612, 394.18527, 329.99612], [1465851600000, 391.473, 332.76254, 391.473, 332.76254], [1465852800000, 391.5003, 332.78986, 391.5003, 332.78986], [1465854000000, 391.5281, 332.81766, 391.5281, 332.81766], [1465855200000, 378.94186, 345.46036, 378.94186, 345.46036], [1465856400000, 378.9704, 345.4889, 378.9704, 345.4889], [1465857600000, 378.99878, 345.51727, 378.99878, 345.51727], [1465858800000, 381.21622, 343.35605, 381.21622, 343.35605], [1465860000000, 381.24405, 343.38388, 381.24405, 343.38388], [1465861200000, 381.27158, 343.4114, 381.27158, 343.4114], [1465862400000, 342.31696, 382.42108, 342.31696, 382.42108], [1465863600000, 382.44885, 342.3448, 382.44885, 342.3448], [1465864800000, 382.47766, 342.37354, 382.47766, 342.37354], [1465866000000, 409.51004, 315.40012, 409.51004, 315.40012], [1465867200000, 409.5399, 315.42996, 409.5399, 315.42996], [1465868400000, 409.56937, 315.45944, 409.56937, 315.45944], [1465869600000, 391.50705, 333.58078, 391.50705, 333.58078], [1465870800000, 391.5363, 333.61002, 391.5363, 333.61002], [1465872000000, 391.56555, 333.63928, 391.56555, 333.63928], [1465873200000, 389.8735, 335.38876, 389.8735, 335.38876], [1465874400000, 389.90186, 335.4171, 389.90186, 335.4171], [1465875600000, 389.92975, 335.445, 389.92975, 335.445], [1465876800000, 336.28903, 389.14035, 336.28903, 389.14035], [1465878000000, 336.31522, 389.16653, 336.31522, 389.16653], [1465879200000, 336.33966, 389.19098, 336.33966, 389.19098], [1465880400000, 349.82953, 375.74622, 349.82953, 375.74622], [1465881600000, 349.85077, 375.76746, 349.85077, 375.76746], [1465882800000, 375.78818, 349.8715, 375.78818, 349.8715], [1465884000000, 379.42075, 346.28104, 379.42075, 346.28104], [1465885200000, 379.44193, 346.30222, 379.44193, 346.30222], [1465886400000, 379.46292, 346.3232, 379.46292, 346.3232], [1465887600000, 429.18085, 296.64655, 429.18085, 296.64655], [1465888800000, 429.20102, 296.66672, 429.20102, 296.66672], [1465890000000, 429.22095, 296.68665, 429.22095, 296.68665], [1465891200000, 395.06793, 330.87878, 395.06793, 330.87878], [1465892400000, 330.89856, 395.0877, 330.89856, 395.0877], [1465893600000, 330.91904, 395.1082, 330.91904, 395.1082], [1465894800000, 392.3911, 333.68066, 392.3911, 333.68066], [1465896000000, 392.41495, 333.7045, 392.41495, 333.7045], [1465897200000, 392.43954, 333.7291, 392.43954, 333.7291], [1465898400000, 346.36862, 379.85013, 346.36862, 379.85013], [1465899600000, 379.87607, 346.39456, 379.87607, 346.39456], [1465900800000, 346.4222, 379.90372, 346.4222, 379.90372], [1465902000000, 382.12134, 344.26117, 382.12134, 344.26117], [1465903200000, 344.29022, 382.1504, 344.29022, 382.1504], [1465904400000, 382.1796, 344.31943, 382.1796, 344.31943], [1465905600000, 383.33154, 343.22742, 383.33154, 343.22742], [1465906800000, 383.3615, 343.25745, 383.3615, 343.25745], [1465908000000, 383.39148, 343.28735, 383.39148, 343.28735], [1465909200000, 410.4246, 316.31467, 410.4246, 316.31467], [1465910400000, 410.45514, 316.3452, 410.45514, 316.3452], [1465911600000, 410.4862, 316.37628, 410.4862, 316.37628], [1465912800000, 392.4257, 334.49942, 392.4257, 334.49942], [1465914000000, 392.4575, 334.53122, 392.4575, 334.53122], [1465915200000, 392.4896, 334.56332, 392.4896, 334.56332], [1465916400000, 390.801, 336.31625, 390.801, 336.31625], [1465917600000, 390.83313, 336.3484, 390.83313, 336.3484], [1465918800000, 390.8652, 336.38046, 390.8652, 336.38046], [1465920000000, 390.0809, 337.22958, 390.0809, 337.22958], [1465921200000, 390.11383, 337.2625, 390.11383, 337.2625], [1465922400000, 390.1475, 337.29617, 390.1475, 337.29617], [1465923600000, 376.71426, 350.79758, 376.71426, 350.79758], [1465924800000, 376.7484, 350.83173, 376.7484, 350.83173], [1465926000000, 350.86603, 376.7827, 350.86603, 376.7827], [1465927200000, 380.429, 347.28928, 380.429, 347.28928], [1465928400000, 380.46454, 347.32483, 380.46454, 347.32483], [1465929600000, 380.50003, 347.36032, 380.50003, 347.36032], [1465930800000, 430.23248, 297.69818, 430.23248, 297.69818], [1465932000000, 430.26746, 297.73315, 430.26746, 297.73315], [1465933200000, 430.3025, 297.7682, 430.3025, 297.7682], [1465934400000, 396.16522, 331.97607, 396.16522, 331.97607], [1465935600000, 396.20044, 332.0113, 396.20044, 332.0113], [1465936800000, 396.23636, 332.0472, 396.23636, 332.0472], [1465938000000, 393.53366, 334.8232, 393.53366, 334.8232], [1465939200000, 393.57144, 334.861, 393.57144, 334.861], [1465940400000, 393.60995, 334.8995, 393.60995, 334.8995], [1465941600000, 347.55325, 381.03476, 347.55325, 381.03476], [1465942800000, 381.07446, 347.59296, 381.07446, 347.59296], [1465944000000, 381.11465, 347.63315, 381.11465, 347.63315], [1465945200000, 383.34467, 345.4845, 383.34467, 345.4845], [1465946400000, 383.3861, 345.52594, 383.3861, 345.52594], [1465947600000, 383.42804, 345.56787, 383.42804, 345.56787], [1465948800000, 384.59198, 344.48785, 384.59198, 344.48785], [1465950000000, 344.5304, 384.63446, 344.5304, 384.63446], [1465951200000, 344.57343, 384.67755, 344.57343, 384.67755], [1465952400000, 411.72388, 317.61395, 411.72388, 317.61395], [1465953600000, 317.65616, 411.76608, 317.65616, 411.76608], [1465954800000, 317.6962, 411.80612, 317.6962, 411.80612], [1465956000000, 335.82434, 393.7506, 335.82434, 393.7506], [1465957200000, 393.78247, 335.8562, 393.78247, 335.8562], [1465958400000, 393.81055, 335.88428, 393.81055, 335.88428], [1465959600000, 392.11594, 337.6312, 392.11594, 337.6312], [1465960800000, 392.1417, 337.65695, 392.1417, 337.65695], [1465962000000, 337.6819, 392.16663, 337.6819, 392.16663], [1465963200000, 338.5215, 391.37283, 338.5215, 391.37283], [1465964400000, 391.3923, 338.541, 391.3923, 338.541], [1465965600000, 391.40927, 338.55795, 391.40927, 338.55795], [1465966800000, 377.9583, 352.04163, 377.9583, 352.04163], [1465968000000, 377.9751, 352.0584, 377.9751, 352.0584], [1465969200000, 377.99252, 352.07584, 377.99252, 352.07584]]
example-helium-line.json
[358.67776, 363.2309, 372.22437, 342.15842, 359.8767, 347.37265, 335.09103, 338.20914, 362.7288, 357.2203, 344.53592, 360.79996, 347.97, 361.26456, 374.37595, 334.7296, 359.95694, 362.09586, 360.83908, 362.14783, 351.358, 362.20294, 363.099, 363.26163, 366.8852, 371.4975, 363.97583, 372.9193, 366.46884, 368.6597, 353.8582, 364.29865, 359.6017, 359.1352, 370.92117, 366.0819, 352.75568, 373.61697, 370.7204, 373.44116, 354.07553, 360.90137, 361.7277, 346.60703, 354.61337, 357.924, 362.93018, 370.84097, 371.3528, 365.05255, 363.6487, 364.72665, 331.72076, 347.15277, 361.86887, 367.90466, 357.74023, 380.17484, 351.12756, 379.3863, 374.55054, 368.18207, 376.91376, 388.53027, 401.68597, 404.37204, 394.19757, 377.06522, 348.3718, 362.94482, 370.46066, 367.6459, 374.73242, 370.07297, 371.77652, 354.373, 356.7892, 319.9135, 321.75665, 350.61856, 361.6026, 338.83517, 320.3914, 356.28757, 341.77798, 370.03214, 334.49667, 368.4542, 370.7614, 348.8684, 361.56375, 349.89218, 359.81036, 353.53598, 353.7006, 366.23633, 363.70132, 364.98026, 357.15714, 353.59332, 344.67834, 355.84622, 363.01233, 360.78107, 357.91162, 339.39948, 366.5738, 375.84412, 370.97528, 354.89505, 358.1854, 377.84225, 337.85956, 349.05484, 346.08597, 342.8614, 344.65094, 365.4992, 344.89862, 354.4756, 355.1951, 345.89526, 360.9815, 366.35294, 347.9596, 336.87717, 414.79993, 410.76266, 423.71893, 484.97372, 458.05707, 381.40176, 384.40518, 391.46295, 381.3163, 464.92358, 427.91922, 357.6434, 362.6532, 352.11038, 366.34616, 358.90466]
4 实时更新数据
setInterval方法每个时间段更新一次数据，装配数据option的json串，option.series[0].data = data0.values，最后setoption即可。
function getData(){ htmlobj=$.ajax({url: "example-helium-all.json", async: false}); dataobj = htmlobj.responseText data = JSON.parse(dataobj) htmlobj=$.ajax({url: "example-helium-line.json", async: false}); dataobj = htmlobj.responseText dataLine = JSON.parse(dataobj) var data0 = splitData(data) // alert(option.series[0].name) option.xAxis.data = data0.categoryData; option.series[0].data = data0.values; option.series[1].data = dataLine; // myChart.setOption(option, true); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } setInterval(function(){ getData(); },2000);
5 接下来更新
接下来更新非同源数据的传递，即在非本地读取，例如需在url为http:10.4.45.236/data/metric/ 的路径获取数据，需使用jsonp实现即可：
备份：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<script src="jquery.min.js" />
<script>
$(document).ready(function(){
})
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// dataobj = String(dataobj)
// alert(dataobj)
var data;
var dataLine;
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
option = {
title: {
text: '动态阈值',
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
legend: {
data: ['阈值', '真实值']
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
// data: data0.categoryData,
scale: true,
boundaryGap : false,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
scale: true,
splitArea: {
show: true
}
},
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
type: 'slider',
y: '90%',
start: 50,
end: 100
}
],
series: [
{
name: '阈值',
type: 'candlestick',
// data: data0.values,
},
{
name: '真实值',
type: 'line',
// data: dataLine,
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
}
]
};
function splitData(rawData) {
var categoryData = [];
var values = []
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i])
}
return {
categoryData: categoryData,
values: values
};
}
function getData(){
htmlobj=$.ajax({url: "example-helium-all.json", async: false});
dataobj = htmlobj.responseText
data = JSON.parse(dataobj)
htmlobj=$.ajax({url: "example-helium-line.json", async: false});
dataobj = htmlobj.responseText
dataLine = JSON.parse(dataobj)
var data0 = splitData(data)
// alert(option.series[0].name)
option.xAxis.data = data0.categoryData;
option.series[0].data = data0.values;
option.series[1].data = dataLine;
// myChart.setOption(option, true);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
setInterval(function(){
getData();
},2000);
</script>
</body>
</html>
