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', 75 , false, 'C1'] , ['10:45:25', 35 , false, 'C1'], ['11:15:25', 45 , true, 'C1'],  ['11:20:25', 40 , false, 'C2'],
    ['12:05:10', 50 , false, 'C1'],  ['12:10:15', 42 , false, 'C2'], ['13:25:28', 35 , false, 'C2'], ['13:45:55', 15 , false, 'C1'],
    ['14:15:25', 75 , true, 'C1'],   ['14:45:25', 25 , false, 'C3'], ['15:30:20', 40 , false, 'C2'], ['15:45:21', 22 , false, 'C1'],
    ['16:25:30', 55 , false, 'C2'],  ['16:38:25', 51 , false, 'C1'], ['17:20:25', 5 , false, 'C3'],  ['17:22:25', 8 , false, 'C2'],
];

var typeColor = {
	'C1': 'green',
  'C2': 'blue',
  'C3': 'gray'
};

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],
           	dataType: item[3]
          }
        }),
        itemStyle: {
        	color: function (params) {
          	return params.data.alert ? 'red' : typeColor[params.data.dataType];
          }
        }
    }]
};

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