JSFiddle - React, Tailwind, and code Playground

by wayne chauncy

HTML

<script src="https://cdn.bootcss.com/echarts/3.1.9/echarts.common.js"></script>
<div id="chart"></div>

CSS

#chart {
  width: 800px;
  height: 500px;
}

JavaScript

var xAxisData = [];
var data = [];
for (var i = 9; i < 16; i++) {
    xAxisData.push('5月' + i + '日');
    data.push(Math.round(Math.random() * 500) + 200);
}

var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
    title: {
        text: '柱状图示例',
        subtext: 'https://segmentfault.com/q/1010000005137138',
        sublink: 'https://segmentfault.com/q/1010000005137138'
    },
    xAxis: [{
        data: xAxisData,
        axisLabel: {
            textStyle: {
                color: '#03a9f4'
            }
        },
        axisTick: {
	        	show: false
        },
        axisLine: {
        		show: false
        },
        splitLine: {
            show: false
        }
    }, {
        // 辅助 x 轴
        show: false,
        data: xAxisData  
    }],
    yAxis: {
        max: 1000,
        axisLine: {
            show: false
        }
    },
    series: [{
        // 辅助系列
        type: 'bar',
        silent: true,
        xAxisIndex: 1,
        itemStyle: {
            normal: {
                barBorderRadius: 20,
                color: '#ddd'      
            }
        },
        barWidth: 40,
        data: data.map(function (val) {
            return 1000;
        })
    }, {
        type: 'bar',
        data: data,
        barWidth: 40,
        itemStyle: {
            normal: {
                barBorderRadius: 20,
                color: '#03a9f4',
                shadowColor: 'rgba(0, 0, 0, 0.4)',
                shadowBlur: 20
            }
        }
    }]
});