Echarts-畫疊加柱狀圖，雙折線圖

導入echarts包

<script src='../scripts/libraries/echarts/echarts-all.js'></script>

 

js如下

loadhyzsxygpsldjzzt_pjjlrzxt();
function loadhyzsxygpsldjzzt_pjjlrzxt(){
    $.ajax({
        url : webPath + '/neeqgpqy/zjghyzsxygpslAndnpjjlr',
        type : 'post',
        dataType : 'json',
        data:{
        },
        success : function(data) {
            console.log(data);
            var names=[];
            var xycounts=[];
            var zscounts=[];
            var xypjjlrs=[];
            var zspjjlrs=[];
            for(var i=(data.list.length-1);i>=0;i--){
                names.push(data.list[i].name);
                xycounts.push(data.list[i].xycount == null ?0:data.list[i].xycount);
                zscounts.push(data.list[i].zscount == null ?0:data.list[i].zscount);
                xypjjlrs.push(data.list[i].xypjjlr == null ?0:data.list[i].xypjjlr);
                zspjjlrs.push(data.list[i].zspjjlr == null ?0:data.list[i].zspjjlr);
            }
            drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs);
        }
    });
    
}

function drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs){
    console.log(zspjjlrs);
    var myChart = echarts.init(document.getElementById('main2'));
    myChart.setOption({
        title : {
            text : ""
        },
        tooltip : {
            trigger : 'axis',
            showDelay : 0, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
            axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
                type : 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
            }
        },
        legend: {
            data:['做市','協議','做市平均凈利潤','協議平均凈利潤']
        },
        xAxis : [
                 {
                     type : 'category',
                     data : names
                 }
             ],
        yAxis : [
                 {
                     type : 'value',
                     name : '企業數量',
                     axisLabel : {
                         formatter: '{value}'
                     }
                 },
                 {
                     type : 'value',
                     name : '凈利潤',
                     axisLabel : {
                         formatter: '{value}'
                     }
                 }],
        series : [

                  {
                      name:'做市',
                      type:'bar',
                      stack: '總量',
                      itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                      data:zscounts
                  },
                  {
                      name:'協議',
                      type:'bar',
                      stack: '總量',
                      itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                      data:xycounts
                  },
                  {
                      name:'做市平均凈利潤',
                      type:'line',
                      yAxisIndex: 1,
                      data:zspjjlrs
                  },
                  {
                      name:'協議平均凈利潤',
                      type:'line',
                      yAxisIndex: 1,
                      data:xypjjlrs
                  }
              ]
    });
}

 

html

<div class="chart" id="main2" style="margin-bottom:-70px;margin-top:-50px;"></div>