潤乾報表如何使用Echarts
1. 集算報表中使用Echarts統計圖的步驟
2. 報表中新增echarts2統計圖
選中需要設為統計圖的單元格，點選 報表-第三方圖形 選單項，或者右鍵選單-第三方圖形，在圖形編輯視窗中點選開啟模版按鈕，預設會直接指向【安裝根目錄】/chart 目錄，使用者也可自行切換到模版的存放路徑。 如果需要畫的圖形在已有模版中不存在， 則可以直接在編輯視窗的右側 js 區域新增內容即可。
選擇好echarts2模板開啟後，程式會自動將echarts2模板中的的表示式${a}找出來列到左邊的引數列表中，也可以手動增刪引數。
左側引數值可為任意型別的引數，通過 C1{}的引用方式獲取報表資料為引數賦值，引數型別為陣列。該引用方式通常可用於對分類、系列、系列值的取值。
設定好統計圖的屬性，點選【確定】按鈕，設計器中選中的單元格就自動的插入了統計圖，可通過 web 預覽檢視第三方圖形。
3. 使用echarts2模板在報表中新增柱形圖
-
新建報表，連線資料來源，設定資料集，資料集名稱為ds2,資料如下圖所示：
-
A1單元格表示式為=ds2.select(地區)，C1單元格的表示式為=ds2.銷售額，設定第一行隱藏，在A6的合併單元格中增加echarts統計圖，右鍵A6單元格，在彈出的快捷選單中選擇第三方統計圖，開啟設計器下自帶的echarts2柱形圖的模板，在該第三方統計圖的對話方塊左側的引數列表中設定分類，系列的，資料的對應表示式，統計圖的設定如下圖所示：
報表的具體設計如下圖：
以上操作就在報表中添加了柱形的Echarts圖，由於echarts統計圖是在頁面上完成渲染的，所以我們想要看到統計圖的效果需要在Web端訪問，下面是在web端的顯示效果：
美化echarts統計圖
上面我們通過自帶的echart2柱形模板做的統計圖看著並不美觀，我們可以通過修改echarts模板的圖表選項option配置將統計圖美化成下圖的效果：
圖表選項，包含圖表例項任何可配置選項：公共選項，元件選項，資料選項。
Echarts統計圖的元件有十個：Axis(座標軸)、 xAxis橫軸（預設類目型）、 yAxis 縱軸（數值型）、Grid（網格）、Polar（極座標）、Title（標題）、legend（圖例）、
DataZoom（資料區域縮放）、DataRange（值域漫遊）、Toolbox（工具箱）、Timeline
（時間軸）。
上圖中的效果主要操作的元件是：
Legend，grid，xAxis，yAxis，series。
明確了設定的元件，我們可以通過echarts的配置項查詢工具瞭解其具體的屬性配置，例如需將圖例不顯示，那麼我們找到legend中show的選項檢視到該選項可設定的屬性值，具體設定為：
legend: {
show:false,
},
如果想調整柱子的寬度那麼操作的是series這個元件的barWidth選項，如：
Series:{
"type":"bar",
“barWidth”:35,
}
概括說明下其設定規則為：
元件名稱：{
選項名稱：選項值,
},
注：多個選項用英文的逗號分隔，多個元件之間也需用英文的逗號分隔。
下面是對於原有Echarts模板修改後的完整JS模板：
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<divid='id_15766045428286741'style="width:${width}px;height:${height}px"></div>
<!-- ECharts單檔案引入 -->
<!--<scriptsrc="http://echarts.baidu.com/build/dist/echarts.js"></script>-->
<scripttype="text/javascript">
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就載入bar模組，按需載入
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
varmyChart = ec.init(document.getElementById('id_15766045428286741'));
varoption = {
backgroundColor:"#000000", //全圖背景色
tooltip: {
show: false
},
legend: {
data:${series},
show:false //圖例隱藏
},
grid: {width:'80%',height: '50%',left: '50%', borderColor:"#000000", x: 40, x2: 6, y: 30, y2: 2},
xAxis : [
{
type : 'category',//座標軸型別
data :${categories},
axisLabel: {textStyle: {color:"#C2C2C2"}}, axisTick: {
alignWithLabel: true,
lineStyle: {
width: 18,
color: "#FFFFFF"
},
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#000000"
}
},
splitLine: {
lineStyle: {
width: 15,
color: "#000000"
},
show: false
},
}
],
yAxis : [
{
type : 'value',
axisLabel: {textStyle: {color:"#000000"}},
axisLine: {
show: true,
lineStyle: {
color:"#000000"
}
},
splitLine: {
show:false,
}
}
],
series : [
{
"name":${series},
"type":"bar",
"barWidth":35,
"data":${value},
itemStyle: {
normal: {
barBorderRadius:[5,5,5,5],
label: {
show: true,
position: 'top',
formatter: '{c}次'
}
}
},
}
]
};
// 為echarts物件載入資料
myChart.setOption(option);
}
);
</script>
5. 參考資料
（1） Echarts2使用者手冊
（2） Echarts2配置項查詢手冊
http://echarts.baidu.com/echarts2/doc/option.html#title~
（3） Echarts2官網例項
http://echarts.baidu.com/echarts2/doc/example.html1. 集算報表中使用Echarts統計圖的步驟
2. 報表中新增echarts2統計圖
選中需要設為統計圖的單元格，點選 報表-第三方圖形 選單項，或者右鍵選單-第三方圖形，在圖形編輯視窗中點選開啟模版按鈕，預設會直接指向【安裝根目錄】/chart 目錄，使用者也可自行切換到模版的存放路徑。 如果需要畫的圖形在已有模版中不存在， 則可以直接在編輯視窗的右側 js 區域新增內容即可。
選擇好echarts2模板開啟後，程式會自動將echarts2模板中的的表示式${a}找出來列到左邊的引數列表中，也可以手動增刪引數。
左側引數值可為任意型別的引數，通過 C1{}的引用方式獲取報表資料為引數賦值，引數型別為陣列。該引用方式通常可用於對分類、系列、系列值的取值。
設定好統計圖的屬性，點選【確定】按鈕，設計器中選中的單元格就自動的插入了統計圖，可通過 web 預覽檢視第三方圖形。
3. 使用echarts2模板在報表中新增柱形圖
（1） 新建報表，連線資料來源，設定資料集，資料集名稱為ds2,資料如下圖所示：
（2） A1單元格表示式為=ds2.select(地區)，C1單元格的表示式為=ds2.銷售額，設定第一行隱藏，在A6的合併單元格中增加echarts統計圖，右鍵A6單元格，在彈出的快捷選單中選擇第三方統計圖，開啟設計器下自帶的echarts2柱形圖的模板，在該第三方統計圖的對話方塊左側的引數列表中設定分類，系列的，資料的對應表示式，統計圖的設定如下圖所示：
報表的具體設計如下圖：
以上操作就在報表中添加了柱形的Echarts圖，由於echarts統計圖是在頁面上完成渲染的，所以我們想要看到統計圖的效果需要在Web端訪問，下面是在web端的顯示效果：
4. 美化echarts統計圖
上面我們通過自帶的echart2柱形模板做的統計圖看著並不美觀，我們可以通過修改echarts模板的圖表選項option配置將統計圖美化成下圖的效果：
圖表選項，包含圖表例項任何可配置選項： 公共選項 ， 元件選項 ， 資料選項。
Echarts統計圖的元件有十個：Axis(座標軸)、 xAxis橫軸（預設類目型）、 yAxis 縱軸（數值型）、Grid（網格）、Polar（極座標）、Title（標題）、legend（圖例）、
DataZoom（資料區域縮放）、DataRange（值域漫遊）、Toolbox（工具箱）、Timeline
（時間軸）。
上圖中的效果主要操作的元件是：
Legend，grid，xAxis，yAxis，series。
明確了設定的元件，我們可以通過echarts的配置項查詢工具瞭解其具體的屬性配置，例如需將圖例不顯示，那麼我們找到legend中show的選項檢視到該選項可設定的屬性值，具體設定為：
legend: {
show:false,
},
如果想調整柱子的寬度那麼操作的是series這個元件的barWidth選項，如：
Series:{
"type":"bar",
“barWidth”:35,
}
概括說明下其設定規則為：
元件名稱：{
選項名稱：選項值,
},
注：多個選項用英文的逗號分隔，多個元件之間也需用英文的逗號分隔。
下面是對於原有Echarts模板修改後的完整JS模板：
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id='id_15766045428286741' style="width:${width}px;height:${height}px"></div>
<!-- ECharts單檔案引入 -->
<!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> -->
<script type="text/javascript">
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就載入bar模組，按需載入
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('id_15766045428286741'));
var option = {
backgroundColor: "#000000", //全圖背景色
tooltip: {
show: false
},
legend: {
data:${series},
show:false //圖例隱藏
},
grid: {width: '80%',height: '50%',left: '50%', borderColor:"#000000", x: 40, x2: 6, y: 30, y2: 2},
xAxis : [
{
type : 'category', //座標軸型別
data : ${categories},
axisLabel: {textStyle: {color:"#C2C2C2"}}, axisTick: {
alignWithLabel: true,
lineStyle: {
width: 18,
color: "#FFFFFF"
},
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#000000"
}
},
splitLine: {
lineStyle: {
width: 15,
color: "#000000"
},
show: false
},
}
],
yAxis : [
{
type : 'value',
axisLabel: {textStyle: {color:"#000000"}},
axisLine: {
show: true,
lineStyle: {
color: "#000000"
}
},
splitLine: {
show: false,
}
}
],
series : [
{
"name":${series},
"type":"bar",
"barWidth":35,
"data":${value},
itemStyle: {
normal: {
barBorderRadius:[5,5,5,5],
label: {
show: true,
position: 'top',
formatter: '{c}次'
}
}
},
}
]
};
// 為echarts物件載入資料
myChart.setOption(option);
}
);
</script>
5. 參考資料
（1） Echarts2使用者手冊
http://echarts.baidu.com/echarts2/doc/doc.html
（2） Echarts2配置項查詢手冊
http://echarts.baidu.com/echarts2/doc/option.html#title~
（3） Echarts2官網例項
http://echarts.baidu.com/echarts2/doc/example.html