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>
  • 相关阅读:
    如何做一个按钮二个事件
    JavaScript中onmouseover时如何让鼠标指针变成一个小手状
    英语口语整理,灵活运用了,口语基本就没问题了
    javascript 传递 '' 时出错 换成 '&' ok
    一个按钮触发两个事件可以吗?
    Select中DISTINCT关键字的用法?
    使下拉框某项不可选的方法
    新打开窗口属性 a href
    调试和测试 Swing 代码
    打造专业外观九宫图
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4754536.html
Copyright © 2011-2022 走看看