import customed from'./echartsTheme.js';
// 公共属性方法
function PoinEchart(vueObj,echartsObj,thisDom,resData){
this.database = this.processEchartBashData(thisDom);
this.echartsObj = echartsObj;
this._renderTo = thisDom;
this.vueObjs = vueObj;
this.resData = resData;
this.bd = {
_title:this.database.titles, //一级标题
_subTitle:this.database.subTitle, //二级标题
_titPos:this.database.titPos, //标题位置
_typeRadius:this.database.typeRadius, //图表半径
_typeGrid:this.database.typeGrid, //坐标轴左右间距
_typeChild:this.database.typeChild, //图表子类型
_isdataZoom:this.database.dataZoom, //图表是否支持缩放
//_chartBg:this.database.background.replace(/_+/g,""),//图表背景
//_chartColor:this.database.color, //设置图表颜色
_chartBg:this.database.background,//图表背景
_chartColor:this.database.color, //设置图表颜色
_toolTipTriger:this.database.toolTipTriger, //提示框触发类型
_toolTipFormater:this.database.toolTipFormater, //提示框标题格式化
_tooltipAxisPointer:this.database.tooltipAxisPointer, //设置tooltip x轴的线条
_isLegend:this.database.legend, // 是否开启图列选项
_legendPos:this.database.legendPos, //图列对齐方式
_legendOrient:this.database.legendOrient, // 图列排列方式
_legendData:resData.legendData, //图列数据
_height:this.database.height, //图表高度
_isToolBox:this.database.toolBox, //是否显示工具栏
_toolBoxSet:this.strToObj(this.database.toolBoxSet), //配置工具栏显示项
_isToolBoxBrush:this.database.toolBoxBrush, //配置区域选择工具栏显示项
_toolBoxOrient:this.database.toolBoxSetOrient.toString(), //工具栏排列方式
_toolBoxPos:this.database.toolBoxPos.replace(/_+/g,"").split(","), //工具栏对齐方式
_isLineSmooth:this.database.lineSmooth,//线条圆滑开关
_isLineShadow:this.database.lineShadow, //是否设置线图阴影
_symbolSize:parseInt(this.database.symbolSize) || 0, //设置节点大小
_barWidth:this.database.barWidth || 0, //柱状图宽度
_gap:parseInt(this.database.gap), //设置漏斗图内间距大小
_funnelWidth:this.database.funnelWidth,//漏斗图宽度
_xAxisData:resData.xAxisData, //x轴格式化数据
_yAxisData:resData.yAxisData, //y轴格式化数据
_seriesd:resData.series, // 图表数据
_clickFun:this.database.onClick,
_onLodad:this.database.onLodad,
_mouseoutFun:this.database.onMouseout,
_mousemoveFun:this.database.onMousemove,
_funnelPos:this.database.funnelPos,//漏斗图外间距
_pieCenter:this.database.pieCenter //饼图间距【0%，0%】左右\上下
};
this._toolBoxSetData = this.toolBoxSetData(this.bd._toolBoxSet);//获取配置工具栏配置项,根据生成的代码给不同的值
this._options = {
title:{},
series:[],
legend:{},
tooltip:{
trigger:"",
formatter:null
},
toolbox:{
feature:{dataView:"" || null,restore:"" || null}
},
grid:{
top:"",
left:'',
right:'',
bottom:''
}
};
this.setdataZoom = function(flag){
if(flag === 'true'){
this._options.dataZoom = [{type: 'slider',xAxisIndex: 0,filterMode: 'empty'},
{type: 'slider',yAxisIndex: 0,filterMode: 'empty'},
{type: 'inside',xAxisIndex: 0,filterMode: 'empty'},
{type: 'inside',yAxisIndex: 0,filterMode: 'empty'}]
}else{
delete this._options.dataZoom;
}
};
//是否设置线图阴影
this.setLineShadow = function(flag,setVal){
if(flag === 'true'){
setVal.lineStyle = {
normal: {
width: 3,
shadowColor: 'rgba(0,0,0,0.4)',
shadowBlur: 10,
shadowOffsetY: 10
}
}
}else{
delete setVal.lineStyle;
}
};
}
// 图表渲染方法
PoinEchart.prototype.render = function(){
var _renderDom = this._renderTo;
// var chartInit = this.echartsObj.echarts.init(_renderDom); //图标初始化
var chartInit = this.echartsObj.init(_renderDom); //图标初始化
chartInit.setOption(this._options,true);//2021-12-20再次渲染数据，如果数据无序会使图例和图上的数据无序，需要加true清除缓存
return this;
}
//重置options方法
PoinEchart.prototype.setOption = function(newoption){
var oldData = this._options;
var op = Object.assign({},oldData,newoption)
this._options = op;
this.render();
return this;
}
//重置options方法
PoinEchart.prototype.xAxisYAxis = function(){
var echart = this;
var _xAxisType = this.database.xAxisType, //X轴类型
_xAxisName = this.database.xAxisName, // x轴名字
_yAxisType = this.database.yAxisType, //y轴类型
_yAxisName = this.database.yAxisName, //y轴名字
_isXAxisTick = this.database.xAxisTick, // 设置X轴刻度轴
_isXAxisRotate = this.database.xAxisRotate, // x轴是否倾斜45度
_isYAxisRotate = this.database.yAxisRotate, // y轴是否倾斜45度
_isYAxisTick = this.database.yAxisTick, // 设置Y轴刻度轴
boyAxisFormatter = this.database.yAxisFormatter, //y轴格式化
boxAxisFormatter = this.database.xAxisFormatter, //x轴格式化
_yAxisMin = parseInt(this.database.yAxisMin) || null, //y轴最小值
_yAxisMax = parseInt(this.database.yAxisMax) || null, //y轴最大值
_yAxisInterVal = parseInt(this.database.yAxisInterVal) || null, //y轴刻度间隔 addby meiyonglei
_xAxisMin = parseInt(this.database.xAxisMin) || null, //x轴最小值
_xAxisMax = parseInt(this.database.xAxisMax) || null; //x轴最大值
//配置x轴和y轴
var xAxisArr = [];
var yAxisArr = [];
var yAxisDatas = echart.bd._yAxisData;
var xAxisDatas = echart.bd._xAxisData;
xAxisDatas.forEach((item,index)=>{
if(echart.bd._typeChild === 'baseline' || echart.bd._typeChild === 'arealine'){
xAxisArr.push({
type: item.type,
name:_xAxisName,
data:item.data,
axisLine: {onZero: false},
boundaryGap:false,
axisLabel:{
formatter:echart.vueObjs[boxAxisFormatter],
interval:0,
rotate:(_isXAxisRotate === 'true') ? '45' : '0'
},
min:_xAxisMin || item.min,
max:_xAxisMax || item.max
});
}else if(echart.bd._typeChild === 'basebar' || echart.bd._typeChild === 'stackbar'){
if(_isXAxisTick === 'true'){
xAxisArr.push({
type: item.type,
name:_xAxisName,
data:item.data,
axisLine: {onZero: false},
axisLabel:{
formatter:echart.vueObjs[boxAxisFormatter],
interval:0,
rotate:(_isXAxisRotate === 'true') ? '45' : '0'
},
min:_xAxisMin || item.min,
max:_xAxisMax || item.max,
axisTick:{alignWithLabel: true}
});
}else{
xAxisArr.push({
type: item.type,
name:_xAxisName,
data:item.data,
axisLine: {onZero: false},
axisLabel:{
formatter:echart.vueObjs[boxAxisFormatter],
interval:0,
rotate:(_isXAxisRotate === 'true') ? '45' : '0'
},
min:_xAxisMin || item.min,
max:_xAxisMax || item.max
});
}
}
echart._options.xAxis = xAxisArr;
})
yAxisDatas.forEach((item,index)=>{
if(echart.bd._typeChild === 'baseline' || echart.bd._typeChild === 'arealine'){
yAxisArr.push({
type: item.type,
name:_yAxisName,
data:item.data,
axisLine: {onZero: false},
boundaryGap:false,
axisLabel:{
formatter:echart.vueObjs[boyAxisFormatter],
interval:0,
rotate:(_isYAxisRotate === 'true') ? '45' : '0'
},
min:_yAxisMin || item.min,
max:_yAxisMax || item.max,
interval:_yAxisInterVal || item.interval,
});
}else if(echart.bd._typeChild === 'basebar' || echart.bd._typeChild === 'stackbar'){
if(_isYAxisTick === 'true'){
yAxisArr.push({
type: item.type,
name:_yAxisName,
data:item.data,
axisLine: {onZero: false},
axisLabel:{
formatter:echart.vueObjs[boyAxisFormatter],
interval:0,
rotate:(_isYAxisRotate === 'true') ? '45' : '0'
},
min:_yAxisMin || item.min,
max:_yAxisMax || item.max,
interval:_yAxisInterVal || item.interval,
axisTick:{alignWithLabel: true}
});
}else{
yAxisArr.push({
type: item.type,
name:_yAxisName,
data:item.data,
axisLine: {onZero: false},
axisLabel:{
formatter:echart.vueObjs[boyAxisFormatter],
interval:0,
rotate:(_isYAxisRotate === 'true') ? '45' : '0'
},
min:_yAxisMin || item.min,
max:_yAxisMax || item.max,
interval:_yAxisInterVal || item.interval
});
}
}
echart._options.yAxis = yAxisArr;
})
}
PoinEchart.prototype.drawEchart = function(childType,sdata){
var self = this;
var itemValue = [];
var database = self.bd;
var options = self._options;
self.setdataZoom(database._isdataZoom);//是否设置缩放
options.series = itemValue;
sdata.forEach((item,i)=>{
self.setLineShadow(database._isLineShadow,sdata[i]);//是否设置线图阴影
//折线图圆滑开关
function setSmooth(flag){
if(flag === 'true'){
sdata[i].smooth = true;
}else{
sdata[i].smooth = false;
}
}
switch(childType){
case 'basepie':
var _pieCenter = database._pieCenter.replace(/_+/g,"").split(","); //饼图间距【0%，0%】左右\上下
sdata[i].type = item.type;//设置图表数据类型
sdata[i].center = _pieCenter; //设置饼图的上下左右间距
sdata[i].itemStyle ={
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
// sdata[i].radius = _typeRadius[1];
// delete sdata[i].itemStyle
delete sdata[i].itemStyle
delete sdata[i].label;
delete sdata[i].labelLine;
//delete sdata[i].labelLine;
delete sdata[i].gap;
break;
case 'cirlepie':
var _typeRadius = database._typeRadius.split(","); //图表半径
var _pieCenter = database._pieCenter.replace(/_+/g,"").split(","); //饼图间距【0%，0%】左右\上下
sdata[i].center = database._pieCenter; //设置饼图的上下左右间距
sdata[i].label = {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
};
sdata[i].labelLine = {
normal: {
show: false
}
};
sdata[i].radius = _typeRadius;
sdata[i].avoidLabelOverlap = false;
break;
case 'basebar':
var _typeGrid = database._typeGrid.replace(/_+/g,"").split(","); //坐标轴左右间距
self.setGrid(_typeGrid);//图表间距设置
options.tooltip.axisPointer = {type: database._tooltipAxisPointer};//设置tooltip x轴的线条
sdata[i].barWidth = database._barWidth;
self.xAxisYAxis();
break;
case 'stackbar':
var _typeGrid = database._typeGrid.replace(/_+/g,"").split(","); //坐标轴左右间距
self.setGrid(_typeGrid);//图表间距设置
options.tooltip.axisPointer = {type: database._tooltipAxisPointer};//设置tooltip x轴的线条
sdata[i].barWidth = database._barWidth;
sdata[i].stack = '\u603B\u91CF';
sdata[i].label = {normal: {show: false,position: 'insideRight'}};
self.xAxisYAxis();
break;
case 'baseline':
var _typeGrid = database._typeGrid.replace(/_+/g,"").split(","); //坐标轴左右间距
self.setGrid(_typeGrid);//图表间距设置
options.tooltip.axisPointer = {type: database._tooltipAxisPointer}; //设置tooltip x轴的线条
setSmooth(database._isLineSmooth);//是否设置线条圆滑
//是否设置toolTip x轴线类型
sdata[i].symbolSize = database._symbolSize; //控制圈圈节点的大小
options.series = itemValue;
delete sdata[i].areaStyle;
delete sdata[i].stack;
self.xAxisYAxis();
break;
case 'arealine':
var _typeGrid = database._typeGrid.replace(/_+/g,"").split(","); //坐标轴左右间距
self.setGrid(_typeGrid);//图表间距设置
options.series = itemValue;
setSmooth(database._isLineSmooth);//是否设置线条圆滑
sdata[i].symbolSize = database._symbolSize; //控制圈圈节点的大小
sdata[i].areaStyle = {normal: {}};
sdata[i].stack = "\u603B\u91CF";
self.xAxisYAxis();
break;
case 'funnel':
var _funnelPos = database._funnelPos.replace(/_+/g,"").split(",");
sdata[i].type = item.type;
sdata[i].gap = database._gap;
sdata[i].label = {
normal: {
show: true,
position: 'inside'
},
emphasis: {
textStyle: {
fontSize: 20
}
}
};
sdata[i].labelLine = {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
};
sdata[i].itemStyle = {
normal: {
borderColor: '#fff',
borderWidth: 1
}
};
if(_funnelPos[0].length !== 0){
sdata[i].top = _funnelPos[0];
}else{
delete sdata[i].top;
}
if(_funnelPos[1].length !== 0){
sdata[i].right = _funnelPos[1];
}else{
delete sdata[i].right;
}
if(_funnelPos[2].length !== 0){
sdata[i].bottom = _funnelPos[2];
}else{
delete sdata[i].bottom;
}
if(_funnelPos[3].length !== 0){
sdata[i].left = _funnelPos[3];
}else{
delete sdata[i].left;
}
sdata[i].width = database._funnelWidth;
sdata[i].sort = 'descending';
break;
default:
break;
}
return itemValue.push(item);
})
}
//字符串转换为对象
PoinEchart.prototype.strToObj = function(str){
var obj = {};
if(str !== '' && str !== undefined){
var val = str.split(" ");
for(var i=0,len=val.length;i<len;i++){
var temp = val[i]
obj[i] = temp;
}
return obj;
}
return false;
}
// 根据_toolBoxSet和_toolBoxSetVal来返回对应的值,type是一个对象
// type:_ecdataview,_ecsaveimage,_ecRestore,_ecLineBar,_ecstacktiled
PoinEchart.prototype.toolBoxSetData = function(type){
var optionsFeature = {};
if(typeof type === "object"){
for(var iteam in type){
var tolowerVal = type[iteam].toLowerCase();
switch(tolowerVal){
case 'ecdataview': //数据视图按钮
optionsFeature.ecdataview = {show: true, readOnly: false};
break;
case 'ecsaveimage': //保存按钮
optionsFeature.ecsaveimage = {show: true};
break;
case 'ecrestore': //还原按钮
optionsFeature.ecrestore = {show: true};
break;
case 'ecdatazoom': //缩放按钮
optionsFeature.ecdatazoom = {yAxisIndex: 'none'};
break;
case 'eclinebar': //柱状图和线图切换
optionsFeature.eclinebar = {type: ['line', 'bar']};
break;
case 'ecstacktiled': //堆叠图和平铺图切换
optionsFeature.ecstacktiled = {type: ['stack', 'tiled']};
break;
default:
}
}
}
return optionsFeature;
}
// 获取所有dom元素data-属性
PoinEchart.prototype.processEchartBashData = function(jqDom){
var ecdata = {};
if(jqDom.getAttribute("id") != undefined){
ecdata.id = jqDom.getAttribute("id");
}
if(jqDom.getAttribute("data-title") != undefined){
ecdata.titles = jqDom.getAttribute("data-title");
}
if(jqDom.getAttribute("data-subTitle") != undefined){
ecdata.subTitle = jqDom.getAttribute("data-subTitle");
}
if(jqDom.getAttribute("data-titPos") != undefined){
ecdata.titPos = jqDom.getAttribute('data-titPos');
}
if(jqDom.getAttribute("data-type") != undefined){
ecdata.chartType = jqDom.getAttribute('data-type');
}
if(jqDom.getAttribute("data-typeChild") != undefined){
ecdata.typeChild = jqDom.getAttribute('data-typeChild');
}
if(jqDom.getAttribute('data-background') != undefined){
ecdata.background = jqDom.getAttribute('data-background');
}
if(jqDom.getAttribute('data-typeRadius') != undefined){
ecdata.typeRadius = jqDom.getAttribute('data-typeRadius');
}
if(jqDom.getAttribute('data-typeGrid') != undefined){
ecdata.typeGrid = jqDom.getAttribute('data-typeGrid');
}
if(jqDom.getAttribute('data-height') != undefined){
ecdata.height = jqDom.getAttribute('data-height');
}
if(jqDom.getAttribute('data-dataZoom') != undefined){
ecdata.dataZoom = jqDom.getAttribute('data-dataZoom');
}
if(jqDom.getAttribute('data-toolBox') != undefined){
ecdata.toolBox = jqDom.getAttribute('data-toolBox');
}
if(jqDom.getAttribute('data-toolBoxSet') != undefined){
ecdata.toolBoxSet = jqDom.getAttribute('data-toolBoxSet');
}
if(jqDom.getAttribute('data-toolBoxOrient') != undefined){
ecdata.toolBoxSetOrient = jqDom.getAttribute('data-toolBoxOrient');
}
if(jqDom.getAttribute('data-toolBoxPos') != undefined){
ecdata.toolBoxPos = jqDom.getAttribute('data-toolBoxPos');
}
if(jqDom.getAttribute('data-toolBoxBrush') != undefined){
ecdata.toolBoxBrush = jqDom.getAttribute('data-toolBoxBrush');
}
if(jqDom.getAttribute('data-legend') != undefined){
ecdata.legend = jqDom.getAttribute('data-legend');
}
if(jqDom.getAttribute('data-legendPos') != undefined){
ecdata.legendPos = jqDom.getAttribute('data-legendPos');
}
if(jqDom.getAttribute('data-legendOrient') != undefined){
ecdata.legendOrient = jqDom.getAttribute('data-legendOrient');
}
if(jqDom.getAttribute('data-gap') != undefined){
ecdata.gap = jqDom.getAttribute('data-gap');
}
if(jqDom.getAttribute('data-toolTipFormater') != undefined){
ecdata.toolTipFormater = jqDom.getAttribute('data-toolTipFormater');
}
if(jqDom.getAttribute('data-toolTipTriger') != undefined){
ecdata.toolTipTriger = jqDom.getAttribute('data-toolTipTriger');
}
if(jqDom.getAttribute('data-xAxisType') != undefined){
ecdata.xAxisType = jqDom.getAttribute('data-xAxisType');
}
if(jqDom.getAttribute('data-xAxisName') != undefined){
ecdata.xAxisName = jqDom.getAttribute('data-xAxisName');
}
if(jqDom.getAttribute('data-xAxisFormatter') != undefined){
ecdata.xAxisFormatter = jqDom.getAttribute('data-xAxisFormatter');
}
if(jqDom.getAttribute('data-yAxisType') != undefined){
ecdata.yAxisType = jqDom.getAttribute('data-yAxisType');
}
if(jqDom.getAttribute('data-yAxisName') != undefined){
ecdata.yAxisName = jqDom.getAttribute('data-yAxisName');
}
if(jqDom.getAttribute('data-yAxisFormatter') != undefined){
ecdata.yAxisFormatter = jqDom.getAttribute('data-yAxisFormatter');
}
if(jqDom.getAttribute('data-xAxisType') != undefined){
ecdata.xAxisType = jqDom.getAttribute('data-xAxisType');
}
if(jqDom.getAttribute('data-symbolSize') != undefined){
ecdata.symbolSize = jqDom.getAttribute('data-symbolSize');
}
if(jqDom.getAttribute('data-lineSmooth') != undefined){
ecdata.lineSmooth = jqDom.getAttribute('data-lineSmooth');
}
if(jqDom.getAttribute('data-yAxisMin') != undefined){
ecdata.yAxisMin = jqDom.getAttribute('data-yAxisMin');
}
if(jqDom.getAttribute('data-yAxisMax') != undefined){
ecdata.yAxisMax = jqDom.getAttribute('data-yAxisMax');
}
if(jqDom.getAttribute('data-xAxisMin') != undefined){
ecdata.xAxisMin = jqDom.getAttribute('data-xAxisMin');
}
if(jqDom.getAttribute('data-xAxisMax') != undefined){
ecdata.xAxisMax = jqDom.getAttribute('data-xAxisMax');
}
if(jqDom.getAttribute('data-xAxisRotate') != undefined){
ecdata.xAxisRotate = jqDom.getAttribute('data-xAxisRotate');
}
if(jqDom.getAttribute('data-yAxisRotate') != undefined){
ecdata.yAxisRotate = jqDom.getAttribute('data-yAxisRotate');
}
if(jqDom.getAttribute('data-lineShadow') != undefined){
ecdata.lineShadow = jqDom.getAttribute('data-lineShadow');
}
if(jqDom.getAttribute('data-tooltipAxisPointer') != undefined){
ecdata.tooltipAxisPointer = jqDom.getAttribute('data-tooltipAxisPointer');
}
if(jqDom.getAttribute('data-barWidth') != undefined){
ecdata.barWidth = jqDom.getAttribute('data-barWidth');
}
if(jqDom.getAttribute('data-color') != undefined){
ecdata.color = jqDom.getAttribute('data-color');
}
if(jqDom.getAttribute('data-yAxisTick') != undefined){
ecdata.yAxisTick = jqDom.getAttribute('data-yAxisTick');
}
if(jqDom.getAttribute('data-xAxisTick') != undefined){
ecdata.xAxisTick = jqDom.getAttribute('data-xAxisTick');
}
if(jqDom.getAttribute('data-funnelWidth') != undefined){
ecdata.funnelWidth = jqDom.getAttribute('data-funnelWidth');
}
if(jqDom.getAttribute('data-funnelPos') != undefined){
ecdata.funnelPos = jqDom.getAttribute('data-funnelPos');
}
if(jqDom.getAttribute('data-pieCenter') != undefined){
ecdata.pieCenter = jqDom.getAttribute('data-pieCenter');
}
//事件绑定
if(jqDom.getAttribute('data-click') != undefined){
ecdata.onClick = jqDom.getAttribute('data-click');
}
if(jqDom.getAttribute('data-mousemove') != undefined){
ecdata.onMousemove = jqDom.getAttribute('data-mousemove');
}
if(jqDom.getAttribute('data-mouseout') != undefined){
ecdata.onMouseout = jqDom.getAttribute('data-mouseout');
}
if(jqDom.getAttribute('data-load') != undefined){
ecdata.onLodad = jqDom.getAttribute('data-load');
}
return ecdata;
};
//事件处理
PoinEchart.prototype.setEvent = function(){
var self = this;
var _clickFun = self.bd._clickFun,
_onLodadFun = self.bd._onLodad,
_optionsList = self._options,
_resDataList = self.resData,
_mousemoveFun = self.bd._mousemoveFun;
window.ecClickFun = this.vueObjs[_clickFun]
window.onLodadFun = this.vueObjs[_onLodadFun]
window.ecMousemoveFun = this.vueObjs[_mousemoveFun]
// var eventFn = this.echartsObj.echarts.init(self._renderTo); //事件对象
var eventFn = this.echartsObj.init(self._renderTo,customed); //事件对象
//单机事件
if(typeof this.vueObjs[_clickFun] === 'function'){
eventFn.on('click',function(params){
window.ecClickFun.call(this,params,this);
})
}
//渲染完成事件
if(typeof this.vueObjs[_onLodadFun] === 'function'){
eventFn.on('finished',onLodadFun(self,_optionsList,_resDataList,eventFn));
}
//移入事件
if(typeof this.vueObjs[_mousemoveFun] === 'function'){
eventFn.on('mousemove',function(params){
window.ecMousemoveFun.call(this,params,this);
})
}
};
//工具栏---------配置---start
PoinEchart.prototype.setToolBox = function(brushFlag,toolBoxFlag){
var self = this;
var options = self._options;
var database = self.bd;
//区域选择工具栏配置
if(brushFlag === "true"){
options.brush = {toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],xAxisIndex: 0};
}else{
options.brush = null;
}
// 基本工具栏配置
if(toolBoxFlag === "true"){
options.toolbox.show = true;
if(database._toolBoxPos[0].length !== 0){
options.toolbox.top = database._toolBoxPos[0];
}else{
delete options.toolbox.top;
}
if(database._toolBoxPos[1].length !== 0){
options.toolbox.right = database._toolBoxPos[1];
}else{
delete options.toolbox.right;
}
if(database._toolBoxPos[2].length !== 0){
options.toolbox.bottom = database._toolBoxPos[2];
}else{
delete options.toolbox.bottom;
}
if(database._toolBoxPos[3].length !== 0){
options.toolbox.left = database._toolBoxPos[3];
}else{
delete options.toolbox.left;
}
options.toolbox.orient = database._toolBoxOrient;
options.toolbox.feature = {
dataView : self._toolBoxSetData.ecdataview || null,
restore : self._toolBoxSetData.ecrestore || null,
saveAsImage : self._toolBoxSetData.ecsaveimage || null,
dataZoom:self._toolBoxSetData.ecdatazoom || {show:false},
magicType:self._toolBoxSetData.eclinebar || self._toolBoxSetData.ecstacktiled
}
}else{
options.toolbox.show = false;
}
}
// 图列配置
PoinEchart.prototype.setLegend = function(legendFlag){
var self = this;
var options = self._options;
var database = self.bd;
if(legendFlag === "true"){
if(database._legendPos === "bottom"){
options.legend = {x:'center',y:'bottom',data:database._legendData,orient:database._legendOrient};
}else{
options.legend = {data:database._legendData,orient:database._legendOrient,left:database._legendPos};
}
}else{
options.legend = null;
}
}
//图表间距设置
PoinEchart.prototype.setGrid = function(gridArr){
var self = this;
var options = self._options;
if(gridArr[0].length !== 0){
options.grid.top = gridArr[0];
options.grid.containLabel = true;
}else{
delete options.grid.top;
delete options.grid.containLabel;
}
if(gridArr[1].length !== 0){
options.grid.right = gridArr[1];
options.grid.containLabel = true;
}else{
delete options.grid.right;
delete options.grid.containLabel;
}
if(gridArr[2].length !== 0){
options.grid.bottom = gridArr[2];
options.grid.containLabel = true;
}else{
delete options.grid.bottom;
delete options.grid.containLabel;
}
if(gridArr[3].length !== 0){
options.grid.left = gridArr[3];
options.grid.containLabel = true;
}else{
delete options.grid.left;
delete options.grid.containLabel;
}
}
PoinEchart.prototype.toolTipFormatter = function(formaterType){
var self = this;
var database = self.bd;
var options = self._options;
var resData = self.resData;
if( typeof window[formaterType] === 'function'){
options.tooltip.trigger = database._toolTipTriger;
options.tooltip.formatter = window[formaterType];
}else{
options.tooltip.formatter = formaterType;
options.tooltip.trigger = database._toolTipTriger;
delete options.tooltip.triggerOn;
}
}
/*
* parmas vueObjs ------vue对象
* parmas vueRef----要渲染的dom元素
* parmas echartsObj ------echarts对象
* parmas resData ------后台返回数据结构
* parmas newoption ------要覆盖的option
* */
export function PoinEcharts(vueObjs,vueRef,echartsObj,resData,newoption){
if(typeof(resData) == "undefined"){
throw new Error("\u81F3\u5C11\u4F20\u9012\u4E00\u4E2A\u53C2\u6570");
}
if(vueRef instanceof HTMLElement){
if(newoption){
if(vueRef.getAttribute('data-ec') === 'poin-echarts'){
_ecOne(vueObjs,vueRef,echartsObj,resData).setOption(newoption).render()
}
}else{
if(vueRef.getAttribute('data-ec') === 'poin-echarts'){
_ecOne(vueObjs,vueRef,echartsObj,resData).render()
}
}
}else{
throw new Error("\u8BE5\u5BF9\u8C61\u4E0D\u662Fdom\u5BF9\u8C61\uFF0C\u8BF7\u4F20\u9012\u4E00\u4E2Adom\u5BF9\u8C61");
}
function _ecOne(vueObjs,vueRef,echartsObj,resData){
var echartEle = vueRef
var echart = new PoinEchart(vueObjs,echartsObj,echartEle,resData);
var database = echart.processEchartBashData(echartEle);
var resData = resData;
var ecRender = echart._renderTo;
var options = echart._options;
var _renderTo = document.getElementById(database.id);//显示容器
var _toolTipFormater = echart.bd._toolTipFormater;
//option拼接
echart._renderTo = _renderTo; //传递dom节点
options.title = {text:echart.bd._title,subtext:echart.bd._subTitle,left:echart.bd._titPos}; //拼接标题
//设置背景色
if(echart.bd._chartBg !== undefined ){
if(echart.bd._chartBg === ''){
delete options.backgroundColor;
}else{
options.backgroundColor = echart.bd._chartBg;
}
}
//设置图表颜色
if(echart.bd._chartColor !== undefined ){
if(echart.bd._chartColor === ''){
delete options.color;
}else{
options.color = (echart.bd._chartColor.length !== 0) ? echart.bd._chartColor.split(",") : delete options.color;
}
}
//事件配置
echart.setEvent();
//图列配置
echart.setLegend(echart.bd._isLegend);
//工具栏配置
echart.setToolBox(echart.bd._isToolBoxBrush,echart.bd._isToolBox);
//toolTip格式化
echart.toolTipFormatter(_toolTipFormater);
//图表渲染
echart.drawEchart(echart.bd._typeChild,echart.bd._seriesd);
return echart;
}
}