JSFiddle - React, Tailwind, and code Playground

by pissang

HTML

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<div id="main">

</div>

CSS

#main {
  width: 600px;
  height: 300px;
}

JavaScript

var tupleData = [['10:15:25', 45 , true] , ['12:15:25', 35 , false]];

var option = {
    legend: {
        data: ['bar', 'bar2'],
        align: 'left'
    },
    toolbox: {
        // y: 'bottom',
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {},
    xAxis: {
        data: tupleData.map(item => item[0]),
        silent: false,
        splitLine: {
            show: false
        }
    },
    yAxis: {
    },
    series: [{
        type: 'bar',
        data: tupleData.map(item => {
        	return {
          	value: item[1],
            alert: item[2]
          }
        }),
        itemStyle: {
        	color: function (params) {
          	return params.data.alert ? 'red' : 'green';
          }
        }
    }]
};

var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);