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>

 

转载于:https://www.cnblogs.com/hwaggLee/p/4754536.html