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 xAxisData = [];
var data = [];
for (var i = 0; i < 100; i++) {
    xAxisData.push('类目' + i);
    data.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
}

var option = {
    title: {
        text: '柱状图动画延迟'
    },
    legend: {
        data: ['bar', 'bar2'],
        align: 'left'
    },
    toolbox: {
        // y: 'bottom',
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
            show: false
        }
    },
    yAxis: {
    },
    visualMap: {
        type: 'piecewise',
        pieces: [{
            lt: 80,
            color: 'green'
        }, {
            gt: 80,
            color: 'red'
        }]
    },
    series: [{
        type: 'bar',
        data: data
    }]
};

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