zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    多态
    没有抽象方法的抽象类有什么意义
    抽象类继承(雇员练习)
    怎样在win7中 安装Tomcat7.0
    继承训练
    Java的接口和抽象类
    jQuery插件的学习
    jQuery学习之路-A
    android之路-android事件处理-OnTouchListener
    丢弃的东西,还能否找回?
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4754536.html
Copyright © 2011-2022 走看看