bootstrap图表

最新推荐文章于 2024-02-10 02:29:17 发布

xin_yan1

最新推荐文章于 2024-02-10 02:29:17 发布

阅读量877

点赞数

本文链接：https://blog.csdn.net/xin_yan1/article/details/124429025

版权

ue4

<body>
      <!-- http://localhost:443/code/echars/a.html -->
  
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 600px;height:400px;"></div>
      <script type="text/javascript">
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));
  
          // 指定图表的配置项和数据
         option = {
  title: {
    text: '折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋','袜子']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '衬衫',
      type: 'line',
      stack: 'Total',
      data: [5, 6, 12, 20, 21,21,15, 17,8,7,22,12]
    },
    {
      name: '羊毛衫',
      type: 'line',
      stack: 'Total',
      data: [20,18,30,22,22,24,9,12,21,24,22,12]
    },
    {
      name: '雪纺衫',
      type: 'line',
      stack: 'Total',
      data: [36,20,20,23,28,21,13,16,12,28,21,22]
    },
    {
      name: '裤子',
      type: 'line',
      stack: 'Total',
      data: [10,12,18,21,25,22,12,14,32,21,18,21]
    },
    {
      name: '高跟鞋',
      type: 'line',
      stack: 'Total',
      data: [10,11,17,18,13,12,14,21,12,31,21,18]
    },
	{
	  name: '袜子',
	  type: 'line',
	  stack: 'Total',
	  data: [20,19,22,21,23,21,19,24,32,21,24,21]
	}
  ]
};
  
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
      </script>
      </script>
  </body>

在这里插入图片描述