JSFiddle - React, Tailwind, and code Playground
by juvancica
HTML
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = {
"dataset": {
"dimensions": ["c", "name0", "v0", "name1", "v1", "name2", "v2", "name3", "v3", "e"],
"source": [
[1539238205752, "Water Level", 0, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539238325508],
[1539238325508, "Water Level", 0, "Pump", 1, "Reservoir", 1, "Too Much", 0, 1539238337191],
[1539238337191, "Water Level", 1, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539239649318],
[1539239649318, "Water Level", 0, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539239665971],
[1539239665971, "Water Level", 1, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539239831727],
[1539239831727, "Water Level", 0, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539239877978],
[1539239877978, "Water Level", 1, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539239998636],
[1539239998636, "Water Level", 0, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539240118490],
[1539240118490, "Water Level", 0, "Pump", 1, "Reservoir", 1, "Too Much", 0, 1539240127930],
[1539240127930, "Water Level", 1, "Pump", 0, "Reservoir", 1, "Too Much", 0, 1539241894516]
]
},
"animation": false,
"useUTC": true,
"dataZoom": [{
"type": "inside",
"start": 0,
"end": 100,
"filterMode": "none"
}],
"tooltip": {
"trigger": "axis",
formatter:function(x) {
//console.log(x);
return...