柱状图作业-CSDN博客

本文链接：https://blog.csdn.net/weixin_58710813/article/details/124323737

柱状图

html

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js">
        </script>

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '衬衫',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [5, 6, 12, 20, 21, 21, 15,17,8,7,22,12]
    },
    {
      name: '羊毛衫',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [20, 18, 30, 22,22, 24, 9,12,21,24,22,12]
    },
    {
      name: '雪纺衫',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [36, 20, 20, 23,28,21,13,16,12,28,21,22]
    },
    {
      name: '裤子',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [10, 12, 18,21,25,22,12,14,32,21,18,21]
    },
     {
      name: '高跟鞋',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [10, 11, 17, 18,13,12,14,21,12,31,21,18]
    },
     {
      name: '袜子',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [20,19, 22,21,23,21,19,24,32,21,24,21]
    },
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>