百度echarts柱状图数据分析（已售门票+未售门票=总门票）-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:380px;"></div>
    <script type="text/javascript">
        var option = {
          backgroundColor:'#030c2b',
          title: {
            text: '门票售卖情况',
            x: 'center',
            y:'20',
            textStyle: {
            color: '#fff',
            fontSize: 20,
            fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            },
          },
          grid: {
            left: '5%',
            right: '5%',
            top: '12%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitLine: {
            show: false
            },
            axisTick:  {
            show: false
            },
            axisLabel: {
            textStyle: {
              color: '#a8abbb',
              fontSize: 14
            }
            },
            axisLine: {
            lineStyle: {
              color: '#394773'
            }
            }
          },
          yAxis: {
            type: 'category',
            data: ['长城', '故宫', '圆明园','国家博物馆', '四合院'],
            splitLine:  {
            show: false
            },
            axisTick:  {
            show: false
            },
            axisLabel: {
            textStyle: {
              color: '#a8abbb',
              fontSize: 14
            },
            interval:0,
            rotate:0
            },
            axisLine: {
            lineStyle: {
              color: '#394773'
            }
            }
          },
          series: [{
            name: '已售门票',
            type: 'bar',
            stack: 'total',
            barWidth: '35',
            data: [170, 180, 190, 155, 195],
            itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#1CC6FC' // 0% 处的颜色
              }, {
              offset: 1,
              color: '#2A71FD' // 100% 处的颜色
              }], false),
              borderColor: '#2A71FD',
              padding: 0
            }
            },
            label: {
            normal: {
              show: true,
              formatter: '{c}',
              offset: [-2, 1.5],
              textStyle: {
              color: '#fff',
              fontSize: 12
              }
        
            }
            }
          }, {
            name: '未售门票',
            type: 'bar',
            barGap: '-100%',
            stack: 'total',
            itemStyle: {
            color: 'rgba(0,0,0,0)',
            borderColor: '#2A71FD',
            padding: 0
            },
            label: {
            normal: {
              show: true,
              lineHeight: 12,
              formatter: '{c}',
              offset: [-2, 1.5],
              textStyle: {
              color: '#ceced3',
              fontSize: 12
              }
        
            }
            },
            z: -10,
            data: [60, 70, 90, 70, 70]
          }, {
            name: '当天门票',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
            color: 'rgba(0,0,0,0)',
            padding: 0
            },
            label: {
            normal: {
              show: true,
              lineHeight: 12,
              formatter: '{c}',
              position: 'right',
              right: 0,
              offset: [1, 10],
              textStyle: {
              color: '#ceced3',
              fontSize: 12
              }
        
            }
            },
            z: -10,
            data: [230, 250, 280, 225, 265]
          }],
          barCategoryGap: '30%'
        };
        
        var myChart = echarts.init(document.getElementById('main'));
		myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        })
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：