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 效果预览
保存报表，点击「分页预览」，效果如下图所示：
注：不支持移动端。
上一篇：ECharts图表调用百度地图
