You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
8.6 KiB
318 lines
8.6 KiB
3 years ago
|
var dom1 = document.getElementById('container1');
|
||
|
var dom2 = document.getElementById('container2');
|
||
|
lineGraph(dom1, '温度', '℃')
|
||
|
lineGraph2(dom2, '血氧', '%')
|
||
|
|
||
|
function lineGraph(dom, title, unit){
|
||
|
var myChart = echarts.init(dom, null, {
|
||
|
renderer: 'canvas',
|
||
|
useDirtyRect: false
|
||
|
});
|
||
|
var app = {};
|
||
|
var ROOT_PATH = '';
|
||
|
var option;
|
||
|
var dataAll = [];
|
||
|
|
||
|
$.get(
|
||
|
ROOT_PATH + '/loraData',
|
||
|
function (_rawData) {
|
||
|
_rawData.forEach(value => dataAll.push(value));
|
||
|
run(_rawData);
|
||
|
}
|
||
|
);
|
||
|
function run(_rawData) {
|
||
|
_rawData.unshift(["Income","Life Expectancy","Population","Country","Year"])
|
||
|
// var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
|
||
|
const countries = [title];
|
||
|
const datasetWithFilters = [];
|
||
|
const seriesList = [];
|
||
|
echarts.util.each(countries, function (country) {
|
||
|
var datasetId = 'dataset_' + country;
|
||
|
datasetWithFilters.push({
|
||
|
id: datasetId,
|
||
|
fromDatasetId: 'dataset_raw',
|
||
|
transform: {
|
||
|
type: 'filter',
|
||
|
config: {
|
||
|
and: [
|
||
|
// { dimension: 'Year', gte: 1950 },
|
||
|
{ dimension: 'Country', '=': country }
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
seriesList.push({
|
||
|
type: 'line',
|
||
|
datasetId: datasetId,
|
||
|
showSymbol: false,
|
||
|
smooth: true,
|
||
|
name: country,
|
||
|
endLabel: {
|
||
|
show: true,
|
||
|
formatter: function (params) {
|
||
|
return params.value[3] + ': ' + params.value[0] + unit;
|
||
|
}
|
||
|
},
|
||
|
labelLayout: {
|
||
|
moveOverlap: 'shiftY'
|
||
|
},
|
||
|
emphasis: {
|
||
|
focus: 'series'
|
||
|
},
|
||
|
encode: {
|
||
|
x: 'Year',
|
||
|
y: 'Income',
|
||
|
label: ['Country', 'Income'],
|
||
|
itemName: 'Year',
|
||
|
tooltip: ['Income']
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
option = {
|
||
|
animationDuration: 10000,
|
||
|
dataset: [
|
||
|
{
|
||
|
id: 'dataset_raw',
|
||
|
source: _rawData
|
||
|
},
|
||
|
...datasetWithFilters
|
||
|
],
|
||
|
tooltip: {
|
||
|
order: 'valueDesc',
|
||
|
trigger: 'axis'
|
||
|
},
|
||
|
xAxis: {
|
||
|
type: 'category',
|
||
|
nameLocation: 'middle'
|
||
|
},
|
||
|
yAxis: [
|
||
|
{
|
||
|
scale: false,
|
||
|
name: '体温',
|
||
|
min: 30,
|
||
|
max: 40,
|
||
|
},
|
||
|
{
|
||
|
type: 'value',
|
||
|
name: '血氧',
|
||
|
min: 0,
|
||
|
max: 100,
|
||
|
position: 'left',
|
||
|
offset: 30,
|
||
|
axisLabel: {
|
||
|
formatter: '{value} °C'
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
grid: {
|
||
|
right: 140
|
||
|
},
|
||
|
series: seriesList
|
||
|
};
|
||
|
myChart.setOption(option);
|
||
|
}
|
||
|
|
||
|
setInterval(function () {
|
||
|
$.get(
|
||
|
ROOT_PATH + '/loraData?item=' + title,
|
||
|
function (_rawData2) {
|
||
|
|
||
|
if (dataAll.length > 40){
|
||
|
dataAll.shift();
|
||
|
dataAll.shift();
|
||
|
}
|
||
|
|
||
|
_rawData2.forEach(value => dataAll.push(value));
|
||
|
|
||
|
_rawData = [["Income","Life Expectancy","Population","Country","Year"]];
|
||
|
dataAll.forEach(value => _rawData.push(value));
|
||
|
|
||
|
myChart.setOption({
|
||
|
dataset: [
|
||
|
{
|
||
|
source: _rawData
|
||
|
}
|
||
|
],
|
||
|
});
|
||
|
|
||
|
let original = '';
|
||
|
dataAll.forEach((elem, index) => {
|
||
|
original += elem[3] + elem[0];
|
||
|
if (elem[3] == "血氧") {
|
||
|
original += '%'
|
||
|
} else {
|
||
|
original += '℃'
|
||
|
}
|
||
|
original += ' '
|
||
|
})
|
||
|
|
||
|
$(".sound-code-chunk-default-content").html(original);
|
||
|
|
||
|
|
||
|
}
|
||
|
);
|
||
|
|
||
|
|
||
|
|
||
|
}, 1000);
|
||
|
|
||
|
|
||
|
if (option && typeof option === 'object') {
|
||
|
myChart.setOption(option);
|
||
|
}
|
||
|
|
||
|
window.addEventListener('resize', myChart.resize);
|
||
|
|
||
|
}
|
||
|
|
||
|
function lineGraph2(dom, title, unit){
|
||
|
var myChart = echarts.init(dom, null, {
|
||
|
renderer: 'canvas',
|
||
|
useDirtyRect: false
|
||
|
});
|
||
|
var app = {};
|
||
|
var ROOT_PATH = '';
|
||
|
var option;
|
||
|
var dataAll = [];
|
||
|
|
||
|
$.get(
|
||
|
ROOT_PATH + '/loraData',
|
||
|
function (_rawData) {
|
||
|
_rawData.forEach(value => dataAll.push(value));
|
||
|
run(_rawData);
|
||
|
}
|
||
|
);
|
||
|
function run(_rawData) {
|
||
|
_rawData.unshift(["Income","Life Expectancy","Population","Country","Year"])
|
||
|
// var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
|
||
|
const countries = [title];
|
||
|
const datasetWithFilters = [];
|
||
|
const seriesList = [];
|
||
|
echarts.util.each(countries, function (country) {
|
||
|
var datasetId = 'dataset_' + country;
|
||
|
datasetWithFilters.push({
|
||
|
id: datasetId,
|
||
|
fromDatasetId: 'dataset_raw',
|
||
|
transform: {
|
||
|
type: 'filter',
|
||
|
config: {
|
||
|
and: [
|
||
|
// { dimension: 'Year', gte: 1950 },
|
||
|
{ dimension: 'Country', '=': country }
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
seriesList.push({
|
||
|
type: 'line',
|
||
|
datasetId: datasetId,
|
||
|
showSymbol: false,
|
||
|
smooth: true,
|
||
|
name: country,
|
||
|
endLabel: {
|
||
|
show: true,
|
||
|
formatter: function (params) {
|
||
|
return params.value[3] + ': ' + params.value[0] + unit;
|
||
|
}
|
||
|
},
|
||
|
labelLayout: {
|
||
|
moveOverlap: 'shiftY'
|
||
|
},
|
||
|
emphasis: {
|
||
|
focus: 'series'
|
||
|
},
|
||
|
encode: {
|
||
|
x: 'Year',
|
||
|
y: 'Income',
|
||
|
label: ['Country', 'Income'],
|
||
|
itemName: 'Year',
|
||
|
tooltip: ['Income']
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
option = {
|
||
|
animationDuration: 10000,
|
||
|
dataset: [
|
||
|
{
|
||
|
id: 'dataset_raw',
|
||
|
source: _rawData
|
||
|
},
|
||
|
...datasetWithFilters
|
||
|
],
|
||
|
tooltip: {
|
||
|
order: 'valueDesc',
|
||
|
trigger: 'axis'
|
||
|
},
|
||
|
xAxis: {
|
||
|
type: 'category',
|
||
|
nameLocation: 'middle'
|
||
|
},
|
||
|
yAxis: {
|
||
|
scale: false,
|
||
|
name: 'Income'
|
||
|
},
|
||
|
grid: {
|
||
|
right: 140
|
||
|
},
|
||
|
color:[
|
||
|
'rgba(231,82,27,0.94)'
|
||
|
],
|
||
|
series: seriesList
|
||
|
};
|
||
|
myChart.setOption(option);
|
||
|
}
|
||
|
|
||
|
setInterval(function () {
|
||
|
$.get(
|
||
|
ROOT_PATH + '/loraData?item=' + title,
|
||
|
function (_rawData2) {
|
||
|
|
||
|
if (dataAll.length > 40){
|
||
|
dataAll.shift();
|
||
|
dataAll.shift();
|
||
|
}
|
||
|
|
||
|
_rawData2.forEach(value => dataAll.push(value));
|
||
|
|
||
|
_rawData = [["Income","Life Expectancy","Population","Country","Year"]];
|
||
|
dataAll.forEach(value => _rawData.push(value));
|
||
|
|
||
|
myChart.setOption({
|
||
|
dataset: [
|
||
|
{
|
||
|
source: _rawData
|
||
|
}
|
||
|
],
|
||
|
});
|
||
|
|
||
|
let original = '';
|
||
|
dataAll.forEach((elem, index) => {
|
||
|
original += elem[3] + elem[0];
|
||
|
if (elem[3] == "血氧") {
|
||
|
original += '%'
|
||
|
} else {
|
||
|
original += '℃'
|
||
|
}
|
||
|
original += ' '
|
||
|
})
|
||
|
|
||
|
$(".sound-code-chunk-default-content").html(original);
|
||
|
|
||
|
|
||
|
}
|
||
|
);
|
||
|
|
||
|
|
||
|
|
||
|
}, 1000);
|
||
|
|
||
|
|
||
|
if (option && typeof option === 'object') {
|
||
|
myChart.setOption(option);
|
||
|
}
|
||
|
|
||
|
window.addEventListener('resize', myChart.resize);
|
||
|
|
||
|
}
|
||
|
|