Echarts图表之堆积柱形图

最新推荐文章于 2025-06-04 17:22:05 发布

原创最新推荐文章于 2025-06-04 17:22:05 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Echarts图表</title>
       
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body>
       <div id="main" style="width: 600px;height:400px;"></div>
       <script type="text/javascript">
           var myChart = echarts.init(document.getElementById('main'));
           var option = {
               color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
               backgroundColor: '#000',
               legend: {
                   top: 10,
                   textStyle: {
                       fontSize: 10,
                       color: 'rgba(255,255,255,.7)'
                   },
                   data: ['涉恐人员', '涉稳人员', '涉毒人员', '在逃人员', '重点上访人员', '肇事肇祸精神病人', '刑事犯罪前科人员']
               },
               grid: {
                   left: 10,
                   right: 10,
                   top: 40,
                   bottom: 10,
                   containLabel: true
               },

               xAxis: [{
                   //类目轴
                   type: 'category',
                   axisLine: {
                       lineStyle: {
                           color: 'rgba(255,255,255,.3)'
                       }
                   },
                   splitLine: {
                       lineStyle: {
                           color: 'rgba(255,255,255,.01)'
                       }
                   },
                   data: ['康定市', '泸定县', '丹巴县', '九龙县', '新龙县', '巴塘县', '得荣县', '理塘县', '甘孜县', '道孚县', '德格县', '色达县']
               }],
               yAxis: [{
                       axisLine: {
                           lineStyle: {
                               color: 'rgba(255,255,255,.3)'
                           }
                       },
                       splitLine: {
                           lineStyle: {
                               color: 'rgba(255,255,255,.01)'
                           }
                       },
                       axisLabel: {
                           formatter: '{value} ml'
                       },
                       type: 'value'
                   }
               ],
               series: [
                   {
                       name: '涉恐人员',
                       // 类型：堆积柱形图
                       type: 'bar',
                       // 柱形宽度
                       barWidth: 30,
                       // 统一的名，代表一类图，实现堆积效果
                       stack: '搜索引擎',
                       data: [620, 732, 701, 734, 1090, 1130, 1120, 620, 732, 701, 734, 1090, ]
                   },
                   {
                       name: '涉稳人员',
                       type: 'bar',
                       stack: '搜索引擎',
                       data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
                   },
                   {
                       name: '涉毒人员',
                       type: 'bar',
                       stack: '搜索引擎',
                       data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
                   }, ,
                   {
                       name: '在逃人员',
                       type: 'bar',
                       stack: '搜索引擎',
                       data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
                   },
                   {
                       name: '重点上访人员',
                       type: 'bar',
                       stack: '搜索引擎',
                       data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
                   },
                   {
                       name: '肇事肇祸精神病人',
                       type: 'bar',
                       stack: '搜索引擎',
                       data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
                   },
                   {
                       name: '重大刑事犯罪前科人员',
                       type: 'bar',
                       stack: '搜索引擎',
                       data: [62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
                   }
               ]
           };
           myChart.setOption(option);
       </script>
   </body>
</html>