历史版本7 :ECharts图表复用官方主题 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本插件版本
11.0
V1.0.0

1.2 问题描述

在 FineReport 中使用 ECharts图表集成插件 时，只有一种默认的主题，若要自己修改样式、颜色等，会比较麻烦。这时希望将 ECharts 官网 主题编辑器 中现成的主题拿来复用，该如何做呢？

Snag_f59dd59.png

1.3 解决思路

方法一：从 ECharts 官网 主题编辑器 中「复制」自己选择的主题样式，添加到设计器中 ECharts 图表的「代码编辑器」内实现。

方法二：从 ECharts 官网 主题编辑器 中「下载」自己选择的主题样式，保存到设计器 %FR_HOME%\webapps\webroot\help 文件夹，再在「代码编辑器」中通过引用实现。

注：这两种方法在决策报表中同样适用，设置方法相同。

1.4 安装插件

点击下载插件：ECharts图表集成

设计器插件安装方法请参见：设计器插件管理

服务器安装插件方法请参见：服务器插件管理

2. 示例-方法一编辑

2.1 准备模板

点击设计器左上角「文件>新建普通报表」，合并一片单元格区域后，插入 ECharts 图表。如下图所示：

2.2 复制主题代码

进入 主题编辑器 界面，选择想要的主题，点击下载主题，选择「JSON 版本」，点击复制。如下图所示：

Snag_f6ba941.png

回到 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 效果预览

保存报表，点击「分页预览」，效果如下图所示：

Snag_f7d0077.png

注：不支持移动端。

3. 示例-方法二编辑

3.1 下载主题

1）以上述示例模板和主题为例，在 主题编辑器 界面，点击下载主题，选择「JSON 版本」，点击复制。如下图所示：

Snag_f810e7d.png

2）将下载的主题保存至设计器 %FR_HOME%\webapps\webroot\help 文件夹下，如下图所示：

Snag_f8640d0.png

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 效果预览

保存报表，点击「分页预览」，效果如下图所示：

Snag_f8eae48.png

注：不支持移动端。

4. 模板下载编辑

点击下载模板：

复制ECharts官方主题示例.cpt

下载ECharts官方主题示例.cpt