報(bào)表怎么集成echarts官網(wǎng)

本篇內(nèi)容介紹了“報(bào)表怎么集成echarts官網(wǎng)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

第一步， echarts 官網(wǎng)找到自己需要的圖形代碼

我們以最簡單的折線圖為例

我們可以看到核心處理代碼在 option 中，option 里處理了 X 軸、Y 軸、系列。

第二步，潤乾報(bào)表新建 echarts 統(tǒng)計(jì)圖

右擊單元格，選擇第三方圖形，我們就進(jìn)入到了 echarts 配置頁面，如下圖所示：

復(fù)制下面的代碼到右側(cè) js 編輯區(qū)域：
echarts2 版本使用這個(gè)模板：

       <div id='${id}' style="width:${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>

<div id='${id}' style="width:${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>

echarts4：

<div id='${id}' style="width:${width}px;height:${height}px"></div>   
<script type="text/javascript">
    var ${id}_dom = document.getElementById('${id}');
    var myChart = echarts.init(${id}_dom); 
下面放從echarts官網(wǎng)下載的html文件中的剩余代碼

注意：require 部分需要導(dǎo)入需要的模塊，例如 line 對(duì)應(yīng)線圖、bar 對(duì)應(yīng)柱圖、pie 對(duì)應(yīng)餅圖等。

第三步，把 echarts 官網(wǎng)示例中的 option 代碼粘貼到對(duì)應(yīng)位置

第四步，echarts 關(guān)聯(lián)報(bào)表數(shù)據(jù)

第三步中分類和系列值都是固定值，我們需要把報(bào)表數(shù)據(jù)傳入，如何實(shí)現(xiàn)呢？很簡單，通過 ${參數(shù)名} 獲取。

如上圖所示，我們把分類和系列的值改為：${category}、${series}，點(diǎn)擊左上角的刷新，會(huì)顯示變量值配置入口，我們把單元格或者其他表達(dá)式配置到這里就可以了。

一般情況下，建議要求傳遞的報(bào)表數(shù)據(jù)格式與官網(wǎng)示例中的固定值格式一致。

PS：左側(cè)報(bào)表參數(shù)支持的參數(shù)類型有：

字符串類型：可直接填寫字符串值或返回值為字符串的表達(dá)式

序列：通過 A3{} 引用方式獲取的報(bào)表數(shù)據(jù)，參數(shù)類型為數(shù)組，該引用方式通?？捎糜趯?duì)分類、系列、系列值的取值，也可通過數(shù)據(jù)集. 字段名獲取，如 ds2.product。

json 串：可通過潤乾報(bào)表提供的 json 函數(shù)對(duì)數(shù)據(jù)集做轉(zhuǎn)換處理。具體 json 函數(shù)使用方法可以參見 json() 函數(shù)說明。

最后，我們預(yù)覽看下報(bào)表展現(xiàn)效果：

“報(bào)表怎么集成echarts官網(wǎng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！