反饋已提交

網絡繁忙

ECharts圖表複用官方主題

一、概述

1
版本。
報表伺服器版本插件版本
11.0
V1.0.0

2
問題描述。

  1. 在 FineReport 中使用 ECharts圖表整合插件 時，只有一種預設主題，若要自己修改樣式、顔色等，會比較麻煩。這時希望將 ECharts 官網 主題編輯器 中現成的主題拿來複用，該如何做呢？

3
解決思路。

  1. 方法一：從 ECharts 官網 主題編輯器 中【複制】自己選擇的主題樣式，新增到設計器中 ECharts 圖表的【代碼編輯器】內實現。

  2. 方法二：從 ECharts 官網 主題編輯器 中【下載】自己選擇的主題樣式，儲存到設計器 【%FR_HOME%\webapps\webroot\help 】資料夾，再在【代碼編輯器】中透過引用實現。

注：這兩種方法在決策報表中同樣適用，設定方法相同。

4
安裝插件。

  1. 點選下載插件：ECharts圖表整合。

  2. 伺服器安裝插件方法請參見：伺服器插件管理。

  3. 設計器安裝插件方法請參見：設計器插件管理。

二、範例-方法一

1
準備範本。

  1. 點選設計器左上角【檔案】→【建立普通報表】，合併一片儲存格區域後，插入 ECharts 圖表。如下圖所示。

2
複制主題代碼。

  1. 進入 主題編輯器 介面，選擇想要的主題，點選下載主題，選擇【JSON 版本】，點選【复制】。如下圖1所示。

  2. 輸入代碼後，點選【执行】，在右側預覽框中即可預覽效果。如下圖2所示。

  3. 回到 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);

3
效果預覽。

  1. 儲存報表，點選【分頁預覽】，效果如下圖所示。

注：不支援行動端。

三、範例-方法二

1
下載主題。

  1. 以上述範例範本和主題為例，在 主題編輯器 介面，點選【下載主題】，選擇【JSON 版本】，點選【下載】。如下圖1所示。

  2. 將下載的主題儲存至設計器 【%FR_HOME%\webapps\webroot\help 】資料夾下，如下圖2所示。

2
引用 JSON 檔案。

  1. 回到 FineReport 範本介面，選中 ECharts 圖表，點選【儲存格元素】→【設定】→【代碼編輯器】，輸入代碼如下。

  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);
});

3
效果預覽。

  1. 儲存報表，點選【分頁預覽】，效果如下圖所示。

注：不支持移動端。

四、範本下載

  1. 點選下載範本：

    複製ECharts官方主題範例.cpt。

    下載ECharts官方主題範例.cpt。



附件列表


主題： 圖表應用
上一篇：ECharts圖表實現定時重新整理
下一篇：儲存格聯動ECharts圖表
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文（简体） English 日本語
中文（繁體）

滑鼠選中內容，快速回饋問題

滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援，快速幫助您解決問題
工作日9:00-12:00，13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
獲取報價：
FineReport FineBI
預約演示：
FineReport FineBI
業務咨詢
電話：0933-790886或 0989-092892
郵箱：taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙