
代码
<body>
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '服装销售统计图表'
},
tooltip: {},
legend: {
data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
},
xAxis: {
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
},
yAxis: {},
series: [{
name: '衬衫',
type: 'bar',
data: [5,6,12,20,21,21,15,17,8,7,22,12]
},{
name: '羊毛衫',
type:'bar',
data: [20,18,30,22,22,24,9,12,21,24,22,12]
}, {
name: '雪纺衫',
type:'bar',
data: [36,20,20,23,28,21,13,16,12,28,21,22]
}, {
name: '裤子',
type:'bar',
data: [10,12,18,21,25,22,12,14,32,21,18,21]
},{
name: '高跟鞋',
type:'bar',
data: [10,11,17,18,13,12,14,21,12,31,21,18]
}, {
name: '袜子',
type:'bar',
data: [20,19,22,21,23,21,19,24,32,21,24,21]
},]
};
myChart.setOption(option);
</script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>