百度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:450px;"></div>
    <script type="text/javascript">
        var lineitemStyle = {
          normal: {
            color: '#FF8432',
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: 'rgba(0, 0, 0, .6)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
        };
        
        option = {
          grid: {
            top: 50,
            left: 20,
            right: 20,
            bottom: 90
          },
          dataZoom: [{
            show: false,
            height: 30,
            xAxisIndex: [0],
            bottom: 0,
            type: 'slider',
            start: 1,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#555'
            }
          }],
        
          xAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                backgroundColor: '#FF8432',
                padding: 10,
                borderColor: 'rgba(255, 255, 255, .3)',
                borderWidth: '10',
              },
            },
            data: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009'],
        
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
            },
          },
          series: [{
            type: 'scatter',
            symbolSize: 5,
            itemStyle: {
              color: {
                type: 'radial',
                r: 1,
                colorStops: [{
                  offset: 0,
                  color: '#dddd'
                }, {
                  offset: 1,
                  color: '#dddd'
                }],
                global: false
              },
            },
            silent: true,
            data: [34, 35, 45, 65, 67, 43, 24, 43, 24]
          }, {
            name: '拆线',
            type: 'line',
            stack: '总量',
            symbolSize: 25,
            symbol: 'circle',
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: "{c}%",
                color: '#fff',
              }
            },
            
            itemStyle: lineitemStyle,
        
            lineStyle: {
              normal: {
                color: '#52c1ee',
                width: 1.5,
                shadowColor: 'rgba(0,0,0,.3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              }
            },
            data: [30, 50, 48, 58, 70, 63, 55, 56, 53]
          }, {
            name: '柱子',
            type: 'bar',
            barGap: '-100%',
            barWidth: 35,
            label: {
              normal: {
                color: '#00f3fb'
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(255, 255, 255, .3)',
                borderWidth: '1',
                barBorderRadius: 25,
                color: '#FF8432',
              }
            },
            z: -12,
            data: [100,100,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
          }]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：