///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define([
|
'dojo/_base/declare',
|
'dijit/_WidgetBase',
|
'dojo/_base/lang',
|
'dojo/_base/html',
|
'dojo/Evented',
|
'libs/echarts/echarts',
|
'jimu/utils',
|
'./_chartUtils',
|
'./_Gauge',
|
'./_ChartOptionFactory',
|
'libs/echarts/light',
|
'libs/echarts/dark'
|
],
|
function(declare, _WidgetBase, lang, html, Evented, echarts,
|
jimuUtils, ChartUtils, Gauge, ChartOptionFactory) {
|
|
return declare([_WidgetBase, Evented], {
|
'baseClass': 'jimu-dijit-chart',
|
templateString: '<div></div>',
|
declaredClass: 'jimu.dijit.chart',
|
// constructor -> this.config, this.chartDom
|
|
//public methods:
|
//setConfig -> update the option of this.chart.
|
//updateConfig -> update this.config's value
|
//clear -> Removes all components and charts in this.chart.
|
//resize -> Resizes chart, which should be called manually when container size changes.
|
|
//config params:
|
// "type":"bar", //"column", "line", "pie", "radar", "funnel", "gauge"
|
// "title":"string",
|
// "legend":{show:true,textStyle:{}},
|
// "xAxis":{name:'',show:true,textStyle:{},nameTextStyle:{}},
|
// "yAxis":{name:'',show:true,nameTextStyle:{}},
|
// "dataLabel":{show:true,textStyle:{}},
|
// "confine":boolean,//Whether the tooltip is limited to canvas tag
|
// "theme":"",//A registered theme name, light or dark
|
// "toolbox": ["saveAsImage", "restore", "dataView", "magicType"],
|
// "color":[],//[#fff]
|
// "backgroundColor": "#fff",
|
// "scale": true, //if stack = true, force scale = false
|
// "dataZoom": ["slider"], //inside
|
// "events": [{
|
// "name": "", //"click"、"dblclick"、"mousedown"、"mousemove"、"mouseup"、"mouseover"、"mouseout"
|
// "callback": "function (params) {}"
|
// }],
|
// "labels": [],
|
// "series": [{}], //series:[{name,data:[number or serie obj}]
|
// /**pie*/
|
// "pieMode": "",//normal,rose
|
// "roseType":"",//radius, area
|
// "labelLine": "boolean",
|
// innerRadius:number,0-50
|
// /**bar line colmun*/
|
// "stack": 'normal','percent'
|
// /* line */
|
// area:true
|
// "axisPointer": true,
|
// /**funnel*/
|
// "funnelSort": "descending",
|
// /**funnel gauge*/
|
// "min": 0,
|
// //funnel gauge
|
// "max": 100,
|
// /**radar*/
|
// "radarShape": "circle", //["circle", "polygon"],
|
// "indicator": [{}], //{name,max} only for radar
|
// /**gauge*/
|
// shape:"curved" //horizontal,vertical,curved
|
// "gaugeOption": {
|
// "columnColor":"#000",
|
// "bgColor":"",
|
// "valueStyle":{
|
// textStyle:{
|
// color:"#fff",
|
// fontSize:20,
|
// fontWeight:'bold',
|
// fontStyle:'italic',
|
// fontFamily:'Avenir Next'
|
// },
|
// formatter:'function'
|
// },
|
// "labelColor":"#000",
|
// "targetValue:[]",
|
// "showDataRangeLabel":boolean,
|
// "showTargetValueLabel":boolean,
|
// },
|
// /**advance option*/
|
// "advanceOption": {},
|
// markLine:{
|
// data: [{
|
// "name": "",
|
// "label": {
|
// "show": "boolean",
|
// "position": "", //start, middle, end
|
// "color": "",
|
// "fontSize": 12
|
// },
|
// "lineStyle": {
|
// "color": "",
|
// "width": 12,
|
// "type": "solid", //dashed, dotted
|
// },
|
// "x/yAxis": 1,
|
// }]
|
//}
|
// markArea:[{
|
// "data": [{
|
// "name": "",
|
// "x/yAxis": 1,
|
// "label": {
|
// "show": "boolean",
|
// "position": "", //"top", "left","right","bottom",
|
// "inside","insideLeft","insideRight","insideTop",
|
// "insideBottom","insideTopLeft","insideBottomLeft",
|
// "insideTopRight","insideBottomRight",
|
// "color": "",
|
// "fontSize": 12
|
// },
|
// "itemStyle": {
|
// "color": "",
|
// "opacity": 1
|
// },
|
// }, {
|
// "x/yAxis": 1,
|
// }]
|
// }]
|
|
config: null,
|
|
postCreate: function() {
|
this.inherited(arguments);
|
this._initChart();
|
},
|
|
updateConfig: function(config) {
|
if (!config) {
|
return false;
|
}
|
this.config = config;
|
this._specialThemeByConfig(config);
|
var option = this._chartFactory(config);
|
this.chart.setOption(option, true);
|
|
this._settingByGrid(config, option);
|
|
return true;
|
},
|
|
_settingByGrid: function(config, option) {
|
if (config.type === 'gauge') {
|
return this._resetGaugePosition(config);
|
}
|
var position = this.chartUtils.getAxisZeroPosition();
|
config.layout = this.chartUtils.calcDefaultLayout(config);
|
if (this.chartUtils.isAxisChart(config)) {
|
option = this.chartUtils.settingGrid(option, config);
|
option = this.chartUtils.settingDataZoom(option, config, position);
|
}
|
option = this.chartUtils.settingChartLayout(option, config);
|
this.chart.setOption(option, false);
|
},
|
|
_resetGaugePosition: function(config) {
|
this._resetGaugeGrid(config);
|
this._resetGaugeGraphic(config);
|
},
|
|
setConfig: function(config) {
|
if (!config) {
|
return false;
|
}
|
|
this.config = config;
|
|
this._specialThemeByConfig(this.config);
|
this.clear();
|
var option = this._chartFactory(this.config);
|
this.chart.setOption(option, true);
|
|
this._setAixsGrid(config, option);
|
this._resetGaugePosition(config, option);
|
|
return true;
|
},
|
|
destroy: function() {
|
this._offEvents();
|
this.clear();
|
this.inherited(arguments);
|
},
|
|
_chartFactory: function(config) {
|
this.option = this.chartOptionFactory.produceOption(config);
|
return this.option;
|
},
|
|
bindEvents: function(config) {
|
if (!this.chart || !config.events || !config.events.length) {
|
return;
|
}
|
this._offEvents();
|
config.events.forEach(lang.hitch(this, function(event) {
|
this.chart.on(event.name, event.callback);
|
}));
|
|
},
|
|
_offEvents: function() {
|
if (this.config.events && this.config.events[0]) {
|
this.config.events.forEach(lang.hitch(this, function(event) {
|
this.chart.off(event.name);
|
}));
|
}
|
},
|
|
getDataURL: function() {
|
if (!this.chart) {
|
return;
|
}
|
return this.chart.getDataURL();
|
},
|
|
clear: function() {
|
if (!this.chart) {
|
return;
|
}
|
this.chart.clear();
|
},
|
|
resize: function(width, height) {
|
if (!this.chart) {
|
return;
|
}
|
|
html.setStyle(this.domNode, {
|
width: width || '100%',
|
height: height || '100%'
|
});
|
this.chart.resize();
|
//data zoom
|
this._resizeDataZoom();
|
this._resetGaugePosition(this.config);
|
},
|
|
_resizeDataZoom: function() {
|
var option = this.option;
|
var config = this.config;
|
if (!option || !config) {
|
return;
|
}
|
var position = this.chartUtils.getAxisZeroPosition();
|
option = this.chartUtils.settingDataZoom(option, config, position);
|
this.chart.setOption(option);
|
},
|
|
_setAixsGrid: function(config, option) {
|
if (this.chartUtils.isAxisChart(config)) {
|
option = this.chartUtils.settingGrid(option, config);
|
this.chart.setOption(option, false);
|
}
|
},
|
|
_resetGaugeGraphic: function(config) {
|
if (config.type === 'gauge') {
|
this.gauge.resetGraphic(config);
|
}
|
},
|
|
_resetGaugeGrid: function(config) {
|
if (config.type === 'gauge') {
|
this.gauge.resetGrid(config);
|
}
|
},
|
|
_specialChartTheme: function() {
|
if (!this.chart) {
|
return;
|
}
|
//_theme.axisPointer
|
this.chart._theme.tooltip.axisPointer = {
|
type: 'cross',
|
label: {
|
show: true,
|
precision: 2,
|
formatter: function(params) {
|
if (typeof params.value === 'number') {
|
var value = parseFloat(params.value).toFixed(2);
|
return this.chartUtils.tryLocaleNumber(value);
|
} else {
|
return params.value;
|
}
|
}.bind(this)
|
},
|
lineStyle: {
|
color: '#27727B',
|
type: 'dashed'
|
},
|
crossStyle: {
|
color: '#27727B'
|
},
|
shadowStyle: {
|
color: 'rgba(200,200,200,0.3)'
|
}
|
};
|
//value axis formatter
|
if (!this.chart._theme.valueAxis) {
|
this.chart._theme.valueAxis = {};
|
}
|
if (!this.chart._theme.valueAxis.axisLabel) {
|
this.chart._theme.valueAxis.axisLabel = {};
|
}
|
this.chart._theme.valueAxis.axisLabel.formatter = function(value) {
|
return jimuUtils.localizeNumber(value);
|
};
|
},
|
|
_specialThemeByConfig: function(config) {
|
this._initChartTheme();
|
//mixin color to _theme
|
if (config.color && config.color[0]) {
|
this.chart._theme.color = config.color;
|
}
|
// if (config.confine) {
|
this.chart._theme.tooltip.confine = true;
|
// }
|
|
var isPercent = config.stack === 'percent';
|
|
this.chart._theme.tooltip.formatter = function(params) {
|
return this.chartUtils.handleToolTip(params, null, false, isPercent);
|
}.bind(this);
|
},
|
|
_initChartTheme: function() {
|
if (!this.chart) {
|
return;
|
}
|
if (!this.chart._theme) {
|
this.chart._theme = {};
|
}
|
if (!this.chart._theme.tooltip) {
|
this.chart._theme.tooltip = {};
|
}
|
if (!this.chart._theme.valueAxis) {
|
this.chart._theme.valueAxis = {};
|
}
|
if (!this.chart._theme.valueAxis.axisLabel) {
|
this.chart._theme.valueAxis.axisLabel = {};
|
}
|
},
|
|
_initChart: function() {
|
var theme = this.config && this.config.theme;
|
theme = theme || 'light';
|
this.chart = echarts.init(this.domNode, theme);
|
|
this.chartUtils = new ChartUtils({
|
chart: this.chart
|
});
|
|
this.gauge = new Gauge({
|
chart: this.chart,
|
chartUtils: this.chartUtils
|
});
|
|
this.chartOptionFactory = new ChartOptionFactory({
|
chart: this.chart,
|
gauge: this.gauge,
|
chartUtils: this.chartUtils
|
});
|
this._specialChartTheme(this.config);
|
}
|
|
});
|
});
|
