Pentaho6.1中Echarts3.X圖形聯動與下鑽詳解
一、軟件環境
- 操做系統：Windows10 64位
- 可視化圖形庫版本：Echarts3.X
- Pentaho版本： biserver-ce-6.1.0.1-196
約定：本文將不對echarts的庫文件的引入和echarts風格的代碼編寫規範作講解，如有不懂地方，請閱讀本人的博客文章http://www.javashuo.com/article/p-swipnxkc-hc.htmljavascript
二、本文寫做目標
- 實現Echarts圖形的聯動與下鑽
- 實現多個Echarts圖形的自適應
- 實現Echarts圖形與Pentaho CDE組件的交互
- 代碼優化
三、本文繪圖目標
（1）圖形樣本
（2）圖形元素
該圖形分爲2個區：頂部的查詢按鈕和圖形展現區前端
- 查詢按鈕使用的是Pentaho的按鈕組件
- 圖形展現區的聯動是經過點擊門店柱狀圖來實現的
四、代碼講解
咱們使用Pentaho CDE做圖時，通常不多考慮圖形聯動，由於Pentaho自身的一套傳參、監聽機制幫咱們作了不少事情，這大大提升了咱們的開發效率；一旦引入第三方可視化庫（Echarts），開發者就要本身實現 這一套機制。java
圖形聯動思路：大致分爲如下幾大步ajax
- 點擊門店柱狀圖時獲取當前柱子的信息，這就要給門店柱狀圖綁定一個click事件；
- click事件須要作2件事：（1）傳遞參數，（2）刷新與之關聯的圖形；
- 傳遞參數能夠經過ajax異步加載來實現，數據走的是經過Pentaho CDA來獲取；此外，咱們還要寫個函數從新渲染Echarts圖形，實現刷新的功能。
廢話很少說，直接上代碼，，，，，數據庫
代碼片斷一：
下圖是代碼片斷一的位置：json
代碼片斷一的具體內容見下面編輯框：api
/**
* 頁面初始化的圖形渲染
*/
function initCharts(){
/*********************************************
* 支付方式餅圖 *
*********************************************/
var discountTypeUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=DiscountTypeQueryBefore";
discountTypeUrl += "¶mbutton_event=" + button_event;
var discountTypeJSON = readJSONFile(discountTypeUrl).resultset;
var discountTypeChart = echarts.init(document.querySelector("#DiscountTypeHtmlObj"));
EchartsChartsEncapsulation(
GetDiscountTypeOption(
PieDataEncapsulation(discountTypeJSON).getDatas(),
PieDataEncapsulation(discountTypeJSON).getDatas()
),
discountTypeChart
);
/*********************************************
* 時段柱狀圖 *
*********************************************/
var hourNoUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=HourNoQueryBefore";
hourNoUrl += "¶mbutton_event=" + button_event;
var hourNoJSON = readJSONFile(hourNoUrl).resultset;
var hourNoChart = echarts.init(document.querySelector("#HourNoHtmlObj"));
EchartsChartsEncapsulation(
GetHourNoOption(
BarDataEncapsulation(hourNoJSON).getLegends(),
BarDataEncapsulation(hourNoJSON).getDatas()
),
hourNoChart
);
/*********************************************
* 門店柱狀圖 *
*********************************************/
var outletUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=OutletQuery";
outletUrl += "¶mbutton_event=" + button_event;
var outletJSON = readJSONFile(outletUrl).resultset;
var outletChart = echarts.init(document.querySelector("#OutletHtmlObj"));
var ShowSecondBarEcharts = function(){
outletChart.setOption(
GetOutletOption(
BarDataEncapsulation(outletJSON).getLegends(),
BarDataEncapsulation(outletJSON).getDatas()
)
);
//給門店柱狀圖綁定click事件
outletChart.on('click',function(param){
refreshCharts(param.name); //從新加載圖形，達到刷新效果
});
}();
AdaptionWindows(outletChart);
}
/**
* 點擊聯動後頁面的圖形渲染
*/
function refreshCharts(outletId){
//刷新參數，實現與Pentaho CDE組件的交互
Dashboards.fireChange("outletParam",outletId);
/*********************************************
* 支付方式餅圖 *
*********************************************/
var discountTypeUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=DiscountTypeQuery";
discountTypeUrl += "¶mbutton_event=" + button_event + "¶moutletParam=" + outletParam;
var discountTypeJSON = readJSONFile(discountTypeUrl).resultset;
var discountTypeChart = echarts.init(document.querySelector("#DiscountTypeHtmlObj"));
EchartsChartsEncapsulation(
GetDiscountTypeOption(
PieDataEncapsulation(discountTypeJSON).getDatas(),
PieDataEncapsulation(discountTypeJSON).getDatas()
),
discountTypeChart
);
/*********************************************
* 時段柱狀圖 *
*********************************************/
var hourNoUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=HourNoQuery";
hourNoUrl += "¶mbutton_event=" + button_event + "¶moutletParam=" + outletParam;
var hourNoJSON = readJSONFile(hourNoUrl).resultset;
var hourNoChart = echarts.init(document.querySelector("#HourNoHtmlObj"));
EchartsChartsEncapsulation(
GetHourNoOption(
BarDataEncapsulation(hourNoJSON).getLegends(),
BarDataEncapsulation(hourNoJSON).getDatas()
),
hourNoChart
);
/*********************************************
* 下鑽到分類柱狀圖 *
*********************************************/
var itemCategoryUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=ItemCategoryQuery";
itemCategoryUrl += "¶mbutton_event=" + button_event + "¶moutletParam=" + outletParam;
var itemCategoryJSON = readJSONFile(itemCategoryUrl).resultset;
var itemCategoryChart = echarts.init(document.querySelector("#OutletHtmlObj"));
EchartsChartsEncapsulation(
//hourNoUrl,
//option GetOutletOption GetItemCategoryOption
GetOutletOption( // 這裏沿用門店柱狀圖的封裝
BarDataEncapsulation(itemCategoryJSON).getLegends(),
BarDataEncapsulation(itemCategoryJSON).getDatas()
),
itemCategoryChart
);
}
/**
* 對下鑽圖形的返回原始狀態的圖形渲染
*/
function goBackCharts(){
/*********************************************
* 門店柱狀圖 *
*********************************************/
var outletUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=OutletQuery";
outletUrl += "¶mbutton_event=" + button_event;
var outletJSON = readJSONFile(outletUrl).resultset;
var outletChart = echarts.init(document.querySelector("#OutletHtmlObj"));
var ShowSecondBarEcharts = function(){
outletChart.setOption(
//option
GetOutletOption(
BarDataEncapsulation(outletJSON).getLegends(),
BarDataEncapsulation(outletJSON).getDatas()
)
);
outletChart.on('click',function(param){
refreshCharts(param.name);
});
}();
AdaptionWindows(outletChart);
}
代碼片斷一是上述思路的最直接體現，代碼主體有2個函數：initCharts()和refreshCharts()。initCharts()用於網頁首次加載時渲染Echarts圖形的，refreshCharts()用於點擊聯動的刷新；瀏覽代碼你會發現，上述代碼的結構都差很少，是的。這裏將相關功能作了封裝，具體的實現細節將在代碼片斷二中給你們展現。上述代碼的核心是繪製門店柱狀圖的代碼片斷，接下來我將這部分帶單獨抽出來作詳細的講解，其他的繪圖代碼功能相似，就不作重複敘述了。echarts
門店柱狀圖代碼片斷詳解（見圖解）：
Ecahrts與Pentaho CDE交互代碼片斷詳解（見圖解）
理解下鑽：
在這裏，我將下鑽分爲2種狀況：異步
- 狀況一：單個圖形的下鑽，點擊圖形，在原有圖形的基礎上下鑽到另外一個圖形，下鑽前的圖形和下鑽後的圖形綁定同一個DOM對象; 見例子：http://www.highcharts.com/demo/column-drilldown
- 狀況二：2個以上圖形之間的下鑽，點擊某個圖形引發其餘圖形的從新渲染，也就是咱們所說的「圖形之間的聯動」。
狀況二咱們以前已經說明過，此部分 只針對狀況一作詳細的講解。實現起來也很簡單，在refreshCharts()函數中添加這段代碼即可（下鑽到分類柱狀圖）：async
/*********************************************
* 下鑽到分類柱狀圖 *
*********************************************/
var itemCategoryUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=ItemCategoryQuery";
itemCategoryUrl += "¶mbutton_event=" + button_event + "¶moutletParam=" + outletParam;
var itemCategoryJSON = readJSONFile(itemCategoryUrl).resultset;
var itemCategoryChart = echarts.init(document.querySelector("#OutletHtmlObj"));
EchartsChartsEncapsulation(
//hourNoUrl,
//option GetOutletOption GetItemCategoryOption
GetOutletOption( // 這裏沿用門店柱狀圖的封裝
BarDataEncapsulation(itemCategoryJSON).getLegends(),
BarDataEncapsulation(itemCategoryJSON).getDatas()
),
itemCategoryChart
);
下鑽前
下鑽後
代碼片斷二：
片斷一的代碼實現了咱們的業務流程，具體功能上的邏輯問題在代碼片斷二中實現；在講解代碼片斷二以前，咱們來思考幾個問題：
- 在用Echarts圖形庫作數據可視化展示以前，前端攻城獅須要作哪些準備工做？
- 本文的樣例涉及到對圖形的重複性調用，不一樣的數據源綁定到同一個圖形上；若是咱們不對所寫代碼的結構作適當的更改，咱們的程序中將會出現大量的冗餘的代碼，做爲一名開發攻城獅如何避免「重複造輪子」這一常見現象？如何寫出可讀性好、易於維護的代碼？如何優化代碼？
<1> 繪圖前的準備工做；
- 咱們要想圖形化數據庫中的數據，首先就要解決數據的抓取問題，好在Pentaho軟件幫咱們解決了這一比較頭疼的問題；不然，咱們就要經過java到後臺數據庫中獲取數據。利用Pentaho的CDA很方便地就能獲取數據庫中的數據，具體是經過CDA的URL路徑獲取的，具體看下面代碼：
// 讀取CDA文件
var readJSONFile = function(url){
var jsonData;
$.ajax({
type : 'GET',
url : url,
async : false,
dataType : 'json',
data : null,
success : function(response){
jsonData = response;
}
});
return jsonData;
};
所以，在片斷一的每一個繪圖代碼裏都有URL和結果集的部分，以門店柱狀圖爲例：
/*********************************************
* 門店柱狀圖 *
*********************************************/
var outletUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=OutletQuery";
outletUrl += "¶mbutton_event=" + button_event; //Pentaho CDA的URL
var outletJSON = readJSONFile(outletUrl).resultset; //獲取結果集
var outletChart = echarts.init(document.querySelector("#OutletHtmlObj")); //獲取圖形的DOM
var ShowSecondBarEcharts = function(){
//這次爲繪圖代碼主體，不作分析，故省略掉......
outletChart.setOption(
GetOutletOption(
//經過BarDataEncapsulation拼湊legend
BarDataEncapsulation(outletJSON).getLegends(),
//經過BarDataEncapsulation拼湊series
BarDataEncapsulation(outletJSON).getDatas()
)
);
}();
AdaptionWindows(outletChart); //圖形自適應
- 經過上述操做，咱們拿到了相應的結果集，可是這個結果集是以CDA特有的數據格式存儲的，咱們須要將他轉換成咱們想要的數據格式，譬如echarts是用JSON的數據格式進行綁定的，咱們是經過BarDataEncapsulation來獲取的，具體的實現見下面編輯欄：
/**
* 實現對CDA數據的封裝
*/
// 柱狀圖
var BarDataEncapsulation = function(cdaData){
// 柱狀圖的X軸屬性
var legends = function(cdaData){
var tempArr = [];
for(var i = 0; i < cdaData.length; i++){
tempArr.push({
'name' : cdaData[i][0],
selected : true
});
tempArr[i] = cdaData[i][0];
}
return tempArr;
};
//柱狀圖的X軸的值
var data = function(){
var tempArr = [];
for(var i = 0; i < cdaData.length; i++){
tempArr.push({
'name' : cdaData[i][0],
'value' : cdaData[i][1],
selected : true
});
}
return tempArr;
};
return {
getLegends : function(){
return legends(cdaData);
},
getDatas : function(){
return data(cdaData);
}
};
};
此處咱們就作了柱狀圖的數據的拼湊，並將其封裝起來方便屢次調用。
<2> 優化代碼，抽取共性；
- 咱們如今解決的數據的問題，萬事具有，就差Echarts圖形的option部分了；在寫這部分代碼前，咱們須要作簡單的思考，咱們的option部分應該如何去寫？個人作法是：將option部分的代碼單獨抽出來，做爲一個單獨的模塊（函數）進行調用加載（調用），以門店柱狀圖爲例：
/**
* 對門店柱狀圖的option的簡單封裝
*/
var GetOutletOption = function(XLegends,XDatas){
return {
tooltip : {
trigger : 'item',
formatter: function(params) {
var res = "門店：" + params.name + '<br/>' + "銷售額：" + formatSaleAmt(params.value.toFixed(2)) + "元";
return res;
}
},
calculable : true,
xAxis : [
{
name : "門店",
nameLocation : "end",
type : 'category',
show : true,
//data : SecondBarDataEncapsulation.getLegends(),
data : XLegends,
axisLabel : {
interval : 0,
rotate: 20,
textStyle: {
fontSize : 10
}
},
axisLine : {
show : true,
color : "#007AC7"
},
splitLine : {
show: false
}
}
],
grid : { //控制圖的大小
x : 70,
x2 : 70,
y2 : 70 //y2能夠控制X軸跟Zoom控件之間的間隔，避免覺得傾斜後形成label重疊到Zoom上
},
yAxis : [
{
name : "營業額",
nameLocation : "end",
type : 'value',
show : true,
precision: 2,
scale : true,
axisLabel : {
formatter : function(value){
if(value !== 0){
return value/10000 + "W";
}else if(value === ""){
return 0;
}else{
return 0;
}
}
},
splitLine : {
show: false
}
}
],
series : [
{
name : "單位/元",
type : 'bar',
precision: 2,
barWidth : 40,//柱圖寬度
itemStyle : {
emphasis: {
barBorderRadius: 30
},
normal : {
barBorderRadius:[10, 10, 10, 10],
color : function(params){
var colorList = [
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7"
];
return colorList[params.dataIndex];
}
},
label : {
show : true,
position : 'top',
}
},
data : XDatas,
markPoint: {
symbol : 'pin',
silent : true,
itemStyle : {
normal : {
color : "#8EC21F"
}
},
label : {
normal : {
show : true,
position : "inside",
//formatter : "{c}",
formatter : function(params){
return (params.value/10000).toFixed(1) + "W";
},
textStyle : {
//color : "red",
//fontStyle : "bold",
//fontWight : "bold",
fontFamily : "sans-serif",
fontSize : "10"
}
}
},
data: [
{type: 'max', name: '最好門店'},
{type: 'min', name: '最差門店'}
]
},
markLine : {
silent : true,
itemStyle : {
normal : {
color : "#8EC21F"
}
},
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
};
調用部分見下圖：
- 爲了方便咱們的圖形的屢次使用，咱們一樣對整個繪圖的操做使用一個函數進行加載：
/**
* Echarts自適應屏幕
* @param chart
*/
function AdaptionWindows(chart) {
window.addEventListener('resize',function () {
chart.resize();
});
}
/**
* 對 option的總體封裝
* @param url CDA 數據源
* @param option Echarts繪圖屬性
* @param chartsObj 圖形Dom
*/
function EchartsChartsEncapsulation(option,chartsObj){
var myChart = function(){
chartsObj.setOption(option);
}();
//調用屏幕應的方法
AdaptionWindows(chartsObj);
// }
}
以時段柱狀圖爲例（見下圖）：
以上是對代碼片斷二的具體細節作的簡單描述，但願你們就這段代碼多多提提意見，具體代碼見編輯框：
// 讀取CDA 文件
var readJSONFile = function(url){
var jsonData;
$.ajax({
type : 'GET',
url : url,
async : false,
dataType : 'json',
data : null,
success : function(response){
jsonData = response;
}
});
return jsonData;
};
/**
* 格式化金額數值
*/
var formatSaleAmt = function(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)){
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
x2 = x2.slice(0,3);
return x1 + x2;
};
/**
* 實現對CDA數據的封裝
*/
// 餅狀圖
var PieDataEncapsulation = function(cdaData){
var legends = function(cdaData){
var tempArr = [];
for(var i = 0; i < cdaData.length; i++){
tempArr[i][0] = cdaData[i][0];
tempArr[i][1] = cdaData[i][1];
}
return tempArr;
};
var data = function(cdaData){
var tempArr = [];
for(var i = 0; i < cdaData.length; i++){
tempArr.push({
'name' : cdaData[i][0],
'value' : cdaData[i][1],
selected : true
});
}
return tempArr;
};
return {
getLegends : function(){
return legends(cdaData);
},
getDatas : function(){
return data(cdaData);
}
};
};
// 柱狀圖
var BarDataEncapsulation = function(cdaData){
// 柱狀圖的X軸屬性
var legends = function(cdaData){
var tempArr = [];
for(var i = 0; i < cdaData.length; i++){
tempArr.push({
'name' : cdaData[i][0],
selected : true
});
tempArr[i] = cdaData[i][0];
}
return tempArr;
};
//柱狀圖的X軸的值
var data = function(){
var tempArr = [];
for(var i = 0; i < cdaData.length; i++){
tempArr.push({
'name' : cdaData[i][0],
'value' : cdaData[i][1],
selected : true
});
}
return tempArr;
};
return {
getLegends : function(){
return legends(cdaData);
},
getDatas : function(){
return data(cdaData);
}
};
};
/**
* 對支付方式餅狀圖的option的簡單封裝
*/
var GetDiscountTypeOption = function(PLegends,PSeries){
return {
tooltip : {
trigger : 'item',
formatter: function(params) {
var res = " 支付類型：" + params.name + '<br/>' + "總金額：" + formatSaleAmt(params.value.toFixed(2)) + "元";
return res;
}
},
legend : {
orient: 'vertical',
x: 'left',
data : PLegends
},
toolbox : {
show : true,
orient : 'item',
feature : {
mark : {
show : true
},
magicType : {
show : true,
type : ['pie','funnel'],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'bottom',
max : 1548
}
}
}
}
},
calculable : true,
series : [
{
//name : '折扣',
name : "單位/元",
type :'pie',
radius : '75%',
center: ['60%', '55%'],
data : PSeries,
avoidLabelOverlap: true,
itemStyle : {
normal : {
label : {
position : 'inner',
formatter: function (params){
return (params.percent - 0) + '%';
},
textStyle : {
color : '#000'
},
},
labelLine : {
show : true
},
color : function(params){
var colorList = [
'#29A7E2','#8EC21F',
'#005BAC','#FED32B',
'#E80014','#F4A20E',
'#F4F20E'
];
return colorList[params.dataIndex];
}
},
emphasis : {
label : {
show : true
},
labelLine : {
show :true
}
}
},
label : {
normal : {
}
},
labelLine : {
normal : {
lineStyle : {
color : 'green'
},
smooth : 0.2,
length : 10,
length2 : 20
}
}
}
]
};
};
/**
* 對時段柱狀圖的option的簡單封裝
*/
var GetHourNoOption = function(XLegends, XDatas){
return {
tooltip : {
trigger : 'item',
formatter: function(params) {
var res = " 時段：" + params.name + "點" + '<br/>' + "銷售額：" + formatSaleAmt(params.value.toFixed(2)) + "元";
return res;
}
},
calculable : true,
xAxis : [
{
name : "時段",
//name : "單位/元",
nameLocation : "end",
type : 'category',
show : true,
//data : FirstBarLegends
axisLine : {
show : true
},
axisLabel : {
/*
interval : "auto",
*/
//rotate: 25,
interval : 0
/*
textStyle : {
color : "#007AC7"
}
*/
},
splitLine : {
show: false
},
//data : FirstBarDataEncapsulation.getLegends()
data : XLegends
}
],
grid : { //控制圖的大小
borderWidth : 0,
y : 80,
//y2 : 60
x : 70,
x2 : 70,
y2 : 70 //y2能夠控制X軸跟Zoom控件之間的間隔，避免覺得傾斜後形成label重疊到Zoom上
},
yAxis : [
{
name : "營業額",
nameLocation : "end",
type : 'value',
show : true,
axisLabel : {
formatter : function(value){
if(value !== 0){
return value/10000 + "W";
}else if(value == "null"){
return 0;
}else{
return 0;
}
}
},
splitLine : {
show: false
}
}
],
series : [
{
//name : '時段營業額',
name : "單位/元",
type : 'bar',
//barWidth : 20,//柱圖寬度
barWidth : 40,//柱圖寬度
itemStyle : {
normal : {
barBorderRadius:[10, 10, 10, 10],
color : function(params){
var colorList = [
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7"
];
return colorList[params.dataIndex];
}
},
label : {
show : true,
position : 'top',
formatter : '{b}\n{c}'
}
},
//data : FirstBarData
//data : FirstBarDataEncapsulation.getDatas()
//data : BarDataEncapsulation(getFirstBarJSON).getDatas()
data : XDatas,
markPoint: {
symbol : 'pin',
//silent : true,
itemStyle : {
normal : {
color : "#8EC21F"
}
},
label : {
normal : {
show : true,
position : "inside",
//formatter : "{c}",
formatter : function(params){
if(params.value < 9999){
return (params.value/1000).toFixed(1) + "K";
}else{
return (params.value/10000).toFixed(1) + "W";
}
},
textStyle : {
//color : "red",
//fontStyle : "bold",
//fontWight : "bold",
fontFamily : "sans-serif",
fontSize : "10"
}
}
},
data: [
{type: 'max', name: '最佳時段'},
{type: 'min', name: '最差時段'}
]
},
markLine : {
silent : true,
itemStyle : {
normal : {
color : "#8EC21F"
}
},
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
};
/**
* 對門店柱狀圖的option的簡單封裝
*/
var GetOutletOption = function(XLegends,XDatas){
return {
tooltip : {
trigger : 'item',
formatter: function(params) {
var res = "門店：" + params.name + '<br/>' + "銷售額：" + formatSaleAmt(params.value.toFixed(2)) + "元";
return res;
}
},
calculable : true,
xAxis : [
{
name : "門店",
nameLocation : "end",
type : 'category',
show : true,
//data : SecondBarDataEncapsulation.getLegends(),
data : XLegends,
axisLabel : {
interval : 0,
rotate: 20,
textStyle: {
fontSize : 10
}
},
axisLine : {
show : true,
color : "#007AC7"
},
splitLine : {
show: false
}
}
],
grid : { //控制圖的大小
x : 70,
x2 : 70,
y2 : 70 //y2能夠控制X軸跟Zoom控件之間的間隔，避免覺得傾斜後形成label重疊到Zoom上
},
yAxis : [
{
name : "營業額",
nameLocation : "end",
type : 'value',
show : true,
precision: 2,
scale : true,
axisLabel : {
formatter : function(value){
if(value !== 0){
return value/10000 + "W";
}else if(value === ""){
return 0;
}else{
return 0;
}
}
},
splitLine : {
show: false
}
}
],
series : [
{
name : "單位/元",
type : 'bar',
precision: 2,
barWidth : 40,//柱圖寬度
itemStyle : {
emphasis: {
barBorderRadius: 30
},
normal : {
barBorderRadius:[10, 10, 10, 10],
color : function(params){
var colorList = [
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7",
"#007AC7","#007AC7","#007AC7"
];
return colorList[params.dataIndex];
}
},
label : {
show : true,
position : 'top',
}
},
data : XDatas,
markPoint: {
symbol : 'pin',
silent : true,
itemStyle : {
normal : {
color : "#8EC21F"
}
},
label : {
normal : {
show : true,
position : "inside",
//formatter : "{c}",
formatter : function(params){
return (params.value/10000).toFixed(1) + "W";
},
textStyle : {
//color : "red",
//fontStyle : "bold",
//fontWight : "bold",
fontFamily : "sans-serif",
fontSize : "10"
}
}
},
data: [
{type: 'max', name: '最好門店'},
{type: 'min', name: '最差門店'}
]
},
markLine : {
silent : true,
itemStyle : {
normal : {
color : "#8EC21F"
}
},
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
};
/**
* Echarts自適應屏幕
* @param chart
*/
function AdaptionWindows(chart) {
window.addEventListener('resize',function () {
chart.resize();
});
}
/**
* 對 option的總體封裝
* @param url CDA 數據源
* @param option Echarts繪圖屬性
* @param chartsObj 圖形Dom
*/
function EchartsChartsEncapsulation(option,chartsObj){
var myChart = function(){
chartsObj.setOption(option);
}();
//調用屏幕應的方法
AdaptionWindows(chartsObj);
}
//載入echarts圖形
//window.onload = onload_echarts(0);
window.onload = initCharts();
相關文章
- 1. Pentaho6.1中Echarts3.X可視化圖形庫的集成
- 2. 關於echarts3地圖下鑽省市
- 3. Echarts3實例 環形圖
- 4. 詳解vue中使用echarts地圖實現上鑽下鑽的可視化 三級下鑽 省＞市＞縣
- 5. 餅圖下鑽
- 6. Java打印鑽石圖形
- 7. davinci可鑽取圖形
- 8. echarts 地圖下鑽
- 9. 【轉】ECharts3.x中的點擊事件與行爲
- 10. Android開發--圖形圖像與動畫（五）--詳解LayoutAnimationController
- 更多相關文章...
- • MySQL下載步驟詳解 - MySQL教程
- • R 繪圖 - 條形圖 - R 語言教程
- • SpringBoot中properties文件不能自動提示解決方法
- • Scala 中文亂碼解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
