Я пытаюсь привязать данные из базы данных к Echart, мой запрос возвращает следующее значение:
Итерация транзакции1
Инициализация ----------------- 0,02
Вход ------------- 2.29
Приложение --------------- 6.08
Вверх --------------- 4.88
Выберите ----------- 3.46
Журнал ---------------- 0,26
Столбец итерации увеличивается, например, если я выберу две итерации, я получу 3 столбца, которые являются Транзакция ---- Итерация1 ----- Итерация2
Мой запрос работает нормально.
Мой формат json:
data[ { Transaction:init, iteration:0.02 }, { Transaction:Login,iteration1:2.29 }, { Transaction:App, iteration1:6.08 }, { Transaction:Up, iteration1:4.88 }, { Transaction:select, iteration1:3.46 }, {Transaction:Log, iteration1:0.26 } ]
var myChart = echarts.init(document.getElementById('main'));
var params = {
runIds: '1'
};
$.ajax({
url: transactionUrl,
type: 'POST',
dataType: 'JSON',
contentType: 'application/json;',
data: JSON.stringify(params),
beforeSend: function () {
},
success: function (d) {
var seriesHeader = [];
if (seriesHeader.length === 0) {
seriesHeader.push('Transaction');
for (var key in d[0]) {
if (d[0].hasOwnProperty(key)) {
if (key !== 'Transaction') {
seriesHeader.push(key);
}
}
}
}
$.each(d, function (i, item) {
var count = 0;
while (count < seriesHeader.length) {
count += 1;
}
});
var option = {
title: {
//text: 'ECharts entry example'
},
tooltip: {},
legend: {
data: seriesHeader
},
xAxis: {
data: ???
},
yAxis: {},
series: [{
name: seriesHeader[1],
type: 'bar',
data: ??
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
},
error: function () {
}
});
Я немного запутался, как передать данные в Echart. Я буду рад помочь.





Пожалуйста, проверьте эту демонстрацию, если есть 2 итерации. Вы этого хотите?
let echartsObj = echarts.init(document.querySelector('#canvas'));
let d = [{
Transaction: 'init',
iteration1: 0.02,
iteration2: 2.02,
}, {
Transaction: 'Login',
iteration1: 2.29,
iteration2: 0.52,
}, {
Transaction: 'App',
iteration1: 6.08,
iteration2: 3.53,
}, {
Transaction: 'Up',
iteration1: 4.88,
iteration2: 5.32,
}, {
Transaction: 'select',
iteration1: 3.46,
iteration2: 2.11,
}, {
Transaction: 'Log',
iteration1: 0.26,
iteration2: 1.02,
}]
let seriesHeader = d.map(item => item.Transaction)
let datas = [];
Object.keys(d[0]).forEach(key => {
if (key !== 'Transaction') {
datas.push({
name: key,
type: 'bar',
data: d.map(item => item[key])
})
}
})
option = {
xAxis: {
type: 'category',
data: seriesHeader
},
yAxis: {
type: 'value'
},
legend: {
data: datas.map(item => item.name)
},
series: datas
};
echartsObj.setOption(option)<html>
<header>
<script src = "https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id = "canvas" style = "width: 100%; height: 200px">
</div>
</body>
</html>