• 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>
  • 相关阅读:
    搜书网站
    在Ubuntu 18.04上安装Git
    git 解决每次更新代码都要输入用户名密码
    《程序员修炼之道》笔记(四)
    《程序员修炼之道》笔记(三)
    《程序员修炼之道》笔记(二)
    《程序员修炼之道》笔记(一)
    学习MVC之租房网站(六)-用户登录和权限控制
    学习MVC之租房网站(五)-权限、角色、用户管理
    [翻译] 如何更好地编写单元测试(下)
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4754536.html
Copyright © 2020-2023  润新知