zoukankan      html  css  js  c++  java
  • 报表如何集成 echarts 官网示例图

    Echarts,江湖人称一个纯 Javascript 的图表库,图形种类星罗棋布且个个颜值爆表,可以轻松驾驭 PC 和移动设备,与绝大部分浏览器都可称兄道弟,而且已然众多拥趸,还有不少报表对它采取了嫁接技术。Echarts 如何与润乾报表嫁接呢?接下来跟着我一探究竟。

    第一步, echarts 官网找到自己需要的图形代码

    我们以最简单的折线图为例:https://echarts.baidu.com/examples/editor.html?c=line-simple

    我们可以看到核心处理代码在 option 中,option 里处理了 X 轴、Y 轴、系列。

    第二步,润乾报表新建 echarts 统计图

    右击单元格,选择第三方图形,我们就进入到了 echarts 配置页面,如下图所示:

    复制下面的代码到右侧 js 编辑区域:
    echarts2 版本模板:

           
    <div id='${id}' style="${width}px;height:${height}px"></div>
     <script type="text/javascript">
     require(
    [
     'echarts',
     'echarts/chart/line'
    ],
     function (ec) {
     var myChart = ec.init(document.getElementById('${id}'));
     var option = {
    
     };
     myChart.setOption(option);
     }
     );
    </script>
    

     echarts3/echarts4 版本模板:

    <div id='${id}' style="${width}px;height:${height}px"></div> <script type="text/javascript">
    //数据预处理可以在这里完成
    	var ${id}_dom = document.getElementById('${id}');
    	var myChart = echarts.init(${id}_dom); 
     var option = {
    //复制下载下来的官网html部分的option配置
     };
     myChart.setOption(option);
    </script>
    

    注意:require 部分需要导入需要的模块,例如 line 对应线图、bar 对应柱图、pie 对应饼图等。

    第三步,把 echarts 官网示例中的 option 代码粘贴到对应位置

    第四步,echarts 关联报表数据

    第三步中分类和系列值都是固定值,我们需要把报表数据传入,如何实现呢?很简单,通过 ${参数名} 获取。

    如上图所示,我们把分类和系列的值改为:${category}、${series},点击左上角的刷新,会显示变量值配置入口,我们把单元格或者其他表达式配置到这里就可以了。

    一般情况下,建议要求传递的报表数据格式与官网示例中的固定值格式一致。

    PS:左侧报表参数支持的参数类型有:

    字符串类型:可直接填写字符串值或返回值为字符串的表达式

    序列:通过 A3{} 引用方式获取的报表数据,参数类型为数组,该引用方式通常可用于对分类、系列、系列值的取值,也可通过数据集. 字段名获取,如 ds2.product。

    json 串:可通过润乾报表提供的 json 函数对数据集做转换处理。具体 json 函数使用方法可以参见 json() 函数说明。

    最后,我们预览看下报表展现效果:

    至此,我们就把 echarts 统计图集成到报表中了,简单四步轻轻松松完成。

    附:Echarts 官方示例地址:https://echarts.baidu.com/examples/

    Echarts 配置项教程地址:https://www.echartsjs.com/option.html#title

  • 相关阅读:
    数学+高精度 ZOJ 2313 Chinese Girls' Amusement
    最短路(Bellman_Ford) POJ 1860 Currency Exchange
    贪心 Gym 100502E Opening Ceremony
    概率 Gym 100502D Dice Game
    判断 Gym 100502K Train Passengers
    BFS POJ 3278 Catch That Cow
    DFS POJ 2362 Square
    DFS ZOJ 1002/HDOJ 1045 Fire Net
    组合数学(全排列)+DFS CSU 1563 Lexicography
    stack UVA 442 Matrix Chain Multiplication
  • 原文地址:https://www.cnblogs.com/shiGuangShiYi/p/12100868.html
Copyright © 2011-2022 走看看