Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to integrate reports into echarts official website". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

The first step is to find the graphic code you need.

Let's take the simplest line chart as an example

We can see that the core processing code is in option, and option handles X axis, Y axis and series.

Step 2: Dry the report and create echarts statistics

Right-click the cell and select the third-party graphic, we will enter the echarts configuration page, as shown in the following figure:

复制下面的代码到右侧 js 编辑区域：

echarts2 版本使用这个模板：

require([ 'echarts', 'echarts/chart/line'], function (ec) { var myChart = ec.init(document.getElementById('${id}')); var option = { }; myChart.setOption(option); } );

require( [ 'echarts', 'echarts/chart/line' ], function (ec) { var myChart = ec.init(document.getElementById('${id}')); var option = { }; myChart.setOption(option); } );

echarts4：

var ${id}_dom = document.getElementById('${id}');

var myChart = echarts.init(${id}_dom);

下面放从echarts官网下载的html文件中的剩余代码

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

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

第四步，echarts 关联报表数据

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

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

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

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

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

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

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

最后，我们预览看下报表展现效果：

"报表怎么集成echarts官网"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.