zoukankan      html  css  js  c++  java
  • 【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>

    效果图:

     

  • 相关阅读:
    UI: Form editor && use CRectTracker to allow user drag/move/resize graphics
    如何设置共享文件夹
    log4net每天生成一个log文件
    自动属性/匿名方法/Lamda表达式
    ASPOSE.CELL
    转载:动态调用WebService(C#)
    按钮Button动态事件的名称
    ASPOE.WORD
    操作MSSQL服务还有测试是否连接
    操作MSSQL服务还有测试是否连接1
  • 原文地址:https://www.cnblogs.com/handongxue/p/9686967.html
Copyright © 2011-2022 走看看