1. 概述
1.1 版本
| 報表伺服器版本 | 插件版本 |
|---|---|
| 11.0 | V1.0.0 |
1.2 問題描述
在 FineReport 中使用 ECharts圖表整合插件 時，只有一種預設主題，若要自己修改樣式、顏色等，會比較麻煩。這時希望將 ECharts 官網 主題編輯器 中現成的主題拿來複用，該如何做呢？
1.3 解決思路
方法一：從 ECharts 官網 主題編輯器 中「複製」自己選擇的主題樣式，新增到設計器中 ECharts 圖表的「程式碼編輯器」內實現。
方法二：從 ECharts 官網 主題編輯器 中「下載」自己選擇的主題樣式，儲存到設計器 %FR_HOME%\webapps\webroot\help 資料夾，再在「程式碼編輯器」中透過引用實現。
注：這兩種方法在決策報表中同樣適用，設定方法相同。
2. 範例-方法一
2.1 準備範本
點選設計器左上角「檔案>建立普通報表」，合併一片儲存格區域後，插入 ECharts 圖表。如下圖所示：
2.2 複製主題程式碼
進入 主題編輯器 介面，選擇想要的主題，點選下載主題，選擇「JSON 版本」，點選複製。如下圖所示：
回到 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);显示代码輸入程式碼後，點選「運作」，在右側預覽框中即可預覽效果。如下圖所示：
2.3 效果預覽
儲存報表，點選「分頁預覽」，效果如下圖所示：
注：不支援行動端。
3. 範例-方法二
3.1 下載主題
1）以上述範例範本和主題為例，在 主題編輯器 介面，點選下載主題，選擇「JSON 版本」，點選複製。如下圖所示：
2）將下載的主題儲存至設計器 %FR_HOME%\webapps\webroot\help 資料夾下，如下圖所示：
3.2 引用 JSON 檔案
回到 FineReport 範本介面，選中 ECharts 圖表，點選「儲存格元素>配置>程式碼編輯器」，輸入程式碼如下:
$.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);
});显示代码但是用引用 JSON 檔案的方法複用主題時，在程式碼編輯器中運作無預覽效果，預覽報表時才有效果。如下圖所示：
3.3 效果預覽
儲存報表，點選「分頁預覽」，效果如下圖所示：
注：不支援行動端。
