JSFiddle - React, Tailwind, and code Playground
by juvancica
HTML
<div align="center" id="eChart" style="width: 100%; height: 500px;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0-rc.1/echarts-en.min.js" integrity="sha512-yT7ns3Drvl+Fi4DxGXYOGF7CtPX94lhBcgjDRTeZWaaD4MUMQ1eFI4lH2eQx1CYMuxwyN+vPvUeukycLcBkT8Q==" crossorigin="anonymous"></script>
JavaScript
var podatki = {
"dimensions": [
"Leto",
"Prenesene nerešene ovadbe",
"Prejete ovadbe",
"Rešene ovadbe",
"Ovadbe v delu na zadnji dan leta"
],
"source": [{
"Leto": 2015,
"Prenesene nerešene ovadbe": 15223,
"Prejete ovadbe": 26247,
"Rešene ovadbe": 29594,
"Ovadbe v delu na zadnji dan leta": 12895
},
{
"Leto": 2016,
"Prenesene nerešene ovadbe": 12602,
"Prejete ovadbe": 25286,
"Rešene ovadbe": 27204,
"Ovadbe v delu na zadnji dan leta": 11592
},
{
"Leto": 2017,
"Prenesene nerešene ovadbe": 11602,
"Prejete ovadbe": 25672,
"Rešene ovadbe": 26201,
"Ovadbe v delu na zadnji dan leta": 11501
},
{
"Leto": 2018,
"Prenesene nerešene ovadbe": 11226,
"Prejete ovadbe": 25838,
"Rešene ovadbe": 26497,
"Ovadbe v delu na zadnji dan leta": 11150
},
{
"Leto": 2019,
"Prenesene nerešene ovadbe": 11131,
"Prejete ovadbe": 25657,
"Rešene ovadbe": 26169,
"Ovadbe v delu na zadnji dan leta": 10619
},
{
"Leto": 2020,
"Prenesene nerešene ovadbe": 10619,
"Prejete ovadbe": 12788,
"Rešene ovadbe": 13254,
"Ovadbe v delu na zadnji dan leta": 0
}
]
};
function json2list(object) {
res = []
res.push(object.dimensions)
for (var i = 0; i < object.source.length; i++) {
var obj = object.source[i];
tmp = [];
for (const [key, value] of Object.entries(obj)) {
tmp.push(value);
}
res.push(tmp);
}
return res;
}
function create_series(object) {
res = [];
for (i = 0; i < object.dimensions.length - 1; i++) {
res.push({
type: 'bar'
});
}
return res;
}
var eChart1 = echarts.init(document.getElementById('eChart'));
eChart1.setOption(option = {
legend: {},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
console.log(params[0].value)
}
...