• 【OBIEE】OBIEE集成Echarts作图


    前缀:

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/AnalyticsRes/echarts.min.js"></script>
    </head>

    <body>
      <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style=" 890px;height:320px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var ks = [];
    var todayMoney = [];
    var money = [];
    var leftData = [];
    var rightData = [];

    叙述:

    ks.push('@1');
    todayMoney.push('@2')
    money.push('@3')

    后缀:

    for (var i = 0; i < ks.length; i++) {
      var leftValue = todayMoney[i].replace(/,/g,'');
      var rightValue = money[i].replace(/,/g,'');
      var ksName = ks[i];
      leftData.push({
        value: leftValue
      });

      rightData.push({
        value: rightValue
      });
    }

    option = {
      legend: {
        data: ['今日收入', '昨日收入']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '1%',
        top:'3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLine : { // 轴线
          show: true,
          lineStyle: {
            color: '#EEEEEE',
             1
          }
        }
      },
      yAxis: {
        type: 'category',
        axisLine : { // 轴线
          show: true,
          lineStyle: {
            color: '#EEEEEE',
             1
          }
        },
        data: ks
      },
      series: [
      {
        name: '今日收入',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            color: '#CC3333'
          }
        },
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: leftData
      },
      {
        name: '昨日收入',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            color: '#24C72C'
          }
        },
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: rightData
      }
    ]};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    </script>
    </body>

    </html>

    效果图:

     

  • 相关阅读:
    转载: 如何让form表单在enter键入时不提交
    26个Jquery使用小技巧
    PHP网站页面静态化的生成方法介绍
    用jquery绑定输入框正在输入时返回操作
    PHP开发规范手册之PHP代码规范详解
    Web开发中9个有用的提示和技巧
    TSINGSEE青犀视频边缘计算网关EasyNVR在视频整体监控解决方案中的应用分析
    应急消防通道总是被占用?安防告警视频平台越加必要
    新冠疫情涨涨落落,企业做好线上办公该如何转型?
    【解决方案】如何实现AI自动识别高空抛物行为?
  • 原文地址:https://www.cnblogs.com/handongxue/p/9686967.html
Copyright © 2020-2023  润新知