反饋已提交
網絡繁忙
在 FineReport 中使用 ECharts圖表整合插件 時,只有一種預設主題,若要自己修改樣式、顔色等,會比較麻煩。這時希望將 ECharts 官網 主題編輯器 中現成的主題拿來複用,該如何做呢?
方法一:從 ECharts 官網 主題編輯器 中【複制】自己選擇的主題樣式,新增到設計器中 ECharts 圖表的【代碼編輯器】內實現。
方法二:從 ECharts 官網 主題編輯器 中【下載】自己選擇的主題樣式,儲存到設計器 【%FR_HOME%\webapps\webroot\help 】資料夾,再在【代碼編輯器】中透過引用實現。
注:這兩種方法在決策報表中同樣適用,設定方法相同。
點選下載插件:ECharts圖表整合
伺服器安裝插件方法請參見:A11-18 伺服器-插件管理
點選設計器左上角【檔案】→【建立普通報表】,合併一片儲存格區域後,插入 ECharts 圖表。如下圖所示。
進入 主題編輯器 介面,選擇想要的主題,點選下載主題,選擇【JSON 版本】,點選複制。如下圖1所示
輸入代碼後,點選【運作】,在右側預覽框中即可預覽效果。如下圖2所示。
回到 FineReport 範本介面,選中 ECharts 圖表,點選【儲存格元素】→【配置】→【代碼編輯器】,輸入代碼如下。
// 先獲取dom節點var dom = myChart.getDom();// 重新初始化echarts實體myChart.dispose();// 主題樣式var theme ={ "color": [ "#dd6b66", "#759aa0", "#e69d87", "#8dc1a9", "#ea7e53", "#eedd78", "#73a373", "#73b9bc", "#7289ab", "#91ca8c", "#f49f42" ], "backgroundColor": "rgba(51,51,51,1)", "textStyle": {}, "title": { "textStyle": { "color": "#eeeeee" }, "subtextStyle": { "color": "#aaaaaa" } }, "line": { "itemStyle": { "borderWidth": 1 }, "lineStyle": { "width": 2 }, "symbolSize": 4, "symbol": "circle", "smooth": false }, "radar": { "itemStyle": { "borderWidth": 1 }, "lineStyle": { "width": 2 }, "symbolSize": 4, "symbol": "circle", "smooth": false }, "bar": { "itemStyle": { "barBorderWidth": 0, "barBorderColor": "#ccc" } }, "pie": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } }, "scatter": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } }, "boxplot": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } }, "parallel": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } }, "sankey": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } }, "funnel": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } }, "gauge": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } }, "candlestick": { "itemStyle": { "color": "#fd1050", "color0": "#0cf49b", "borderColor": "#fd1050", "borderColor0": "#0cf49b", "borderWidth": 1 } }, "graph": { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" }, "lineStyle": { "width": 1, "color": "#aaaaaa" }, "symbolSize": 4, "symbol": "circle", "smooth": false, "color": [ "#dd6b66", "#759aa0", "#e69d87", "#8dc1a9", "#ea7e53", "#eedd78", "#73a373", "#73b9bc", "#7289ab", "#91ca8c", "#f49f42" ], "label": { "color": "#eeeeee" } }, "map": { "itemStyle": { "areaColor": "#eee", "borderColor": "#444", "borderWidth": 0.5 }, "label": { "color": "#000" }, "emphasis": { "itemStyle": { "areaColor": "rgba(255,215,0,0.8)", "borderColor": "#444", "borderWidth": 1 }, "label": { "color": "rgb(100,0,0)" } } }, "geo": { "itemStyle": { "areaColor": "#eee", "borderColor": "#444", "borderWidth": 0.5 }, "label": { "color": "#000" }, "emphasis": { "itemStyle": { "areaColor": "rgba(255,215,0,0.8)", "borderColor": "#444", "borderWidth": 1 }, "label": { "color": "rgb(100,0,0)" } } }, "categoryAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisTick": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisLabel": { "show": true, "color": "#eeeeee" }, "splitLine": { "show": true, "lineStyle": { "color": [ "#aaaaaa" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "#eeeeee" ] } } }, "valueAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisTick": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisLabel": { "show": true, "color": "#eeeeee" }, "splitLine": { "show": true, "lineStyle": { "color": [ "#aaaaaa" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "#eeeeee" ] } } }, "logAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisTick": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisLabel": { "show": true, "color": "#eeeeee" }, "splitLine": { "show": true, "lineStyle": { "color": [ "#aaaaaa" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "#eeeeee" ] } } }, "timeAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisTick": { "show": true, "lineStyle": { "color": "#eeeeee" } }, "axisLabel": { "show": true, "color": "#eeeeee" }, "splitLine": { "show": true, "lineStyle": { "color": [ "#aaaaaa" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "#eeeeee" ] } } }, "toolbox": { "iconStyle": { "borderColor": "#999999" }, "emphasis": { "iconStyle": { "borderColor": "#666666" } } }, "legend": { "textStyle": { "color": "#eeeeee" } }, "tooltip": { "axisPointer": { "lineStyle": { "color": "#eeeeee", "width": "1" }, "crossStyle": { "color": "#eeeeee", "width": "1" } } }, "timeline": { "lineStyle": { "color": "#eeeeee", "width": 1 }, "itemStyle": { "color": "#dd6b66", "borderWidth": 1 }, "controlStyle": { "color": "#eeeeee", "borderColor": "#eeeeee", "borderWidth": 0.5 }, "checkpointStyle": { "color": "#e43c59", "borderColor": "#c23531" }, "label": { "color": "#eeeeee" }, "emphasis": { "itemStyle": { "color": "#a9334c" }, "controlStyle": { "color": "#eeeeee", "borderColor": "#eeeeee", "borderWidth": 0.5 }, "label": { "color": "#eeeeee" } } }, "visualMap": { "color": [ "#bf444c", "#d88273", "#f6efa6" ] }, "dataZoom": { "backgroundColor": "rgba(47,69,84,0)", "dataBackgroundColor": "rgba(255,255,255,0.3)", "fillerColor": "rgba(167,183,204,0.4)", "handleColor": "#a7b7cc", "handleSize": "100%", "textStyle": { "color": "#eeeeee" } }, "markPoint": { "label": { "color": "#eeeeee" }, "emphasis": { "label": { "color": "#eeeeee" } } }}//使用主題建立圖表myChart = echarts.init(dom, theme);var TABLE_DATA = [ ["分類名", "系列1", "系列2", "系列3"], ["分類1", "40", "50", "30"], ["分類2", "35", "25", "15"], ["分類3", "25", "45", "55"],];var option = { legend: {}, tooltip: {}, dataset: { // 提供一份資料。 source: TABLE_DATA, }, // 宣告一個 X 軸,類目軸(category)。預設情況下,類目軸對應到 dataset 第一欄。 xAxis: { type: "category" }, // 聲明一個 Y 軸,數值軸。 yAxis: {}, // 宣告多個 bar 系列,預設情況下,每個系列會自動對應到 dataset 的每一欄。 series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],};//修改 option 配置myChart.setOption(option);
儲存報表,點選【分頁預覽】,效果如下圖所示。
注:不支援行動端。
以上述範例範本和主題為例,在 主題編輯器 介面,點選下載主題,選擇【JSON 版本】,點選複制。如下圖1所示。
將下載的主題儲存至設計器 【%FR_HOME%\webapps\webroot\help 】資料夾下,如下圖2所示。
但是用引用 JSON 檔案的方法複用主題時,在代碼編輯器中運作無預覽效果,預覽報表時才有效果。如下圖所示。
$.getJSON('/webroot/help/dark.json', function (themeJSON) { // 先獲取dom節點 var dom = myChart.getDom(); // 重新初始化echarts實體 myChart.dispose(); echarts.registerTheme('dark', themeJSON); myChart = echarts.init(dom, 'dark'); var TABLE_DATA = [ ["分類名", "系列1", "系列2", "系列3"], ["分類1", "40", "50", "30"], ["分類2", "35", "25", "15"], ["分類3", "25", "45", "55"], ]; var option = { legend: {}, tooltip: {}, dataset: { // 提供一份資料。 source: TABLE_DATA, }, // 宣告一個 X 軸,類目軸(category)。預設情況下,類目軸對應到 dataset 第一欄。 xAxis: { type: "category" }, // 宣告一個 Y 軸,數值軸。 yAxis: {}, // 宣告多個 bar 系列,預設情況下,每個系列會自動對應到 dataset 的每一欄。 series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }], }; myChart.setOption(option);});
注:不支持移動端。
點選下載範本:
複製ECharts官方主題範例.cpt
下載ECharts官方主題範例.cpt
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉