import echarts from 'echarts'
|
import './echarts-theme/white'
|
|
function isObj(x){
|
var type = typeof x;
|
return x !== null && (type === 'object' || type === 'function');
|
}
|
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
|
function toObject(val) {
|
if (val === null || val === undefined) {
|
throw new TypeError('Cannot convert undefined or null to object');
|
}
|
|
return Object(val);
|
}
|
|
function assignKey(to, from, key) {
|
var val = from[key];
|
|
if (val === undefined || val === null) {
|
return;
|
}
|
|
if (hasOwnProperty.call(to, key)) {
|
if (to[key] === undefined || to[key] === null) {
|
throw new TypeError('Cannot convert undefined or null to object (' + key + ')');
|
}
|
}
|
|
if (!hasOwnProperty.call(to, key) || !isObj(val)) {
|
to[key] = val;
|
} else {
|
to[key] = assign(Object(to[key]), from[key]);
|
}
|
}
|
|
function assign(to, from) {
|
if (to === from) {
|
return to;
|
}
|
|
from = Object(from);
|
|
for (var key in from) {
|
if (hasOwnProperty.call(from, key)) {
|
assignKey(to, from, key);
|
}
|
}
|
|
if (Object.getOwnPropertySymbols) {
|
var symbols = Object.getOwnPropertySymbols(from);
|
|
for (var i = 0; i < symbols.length; i++) {
|
if (propIsEnumerable.call(from, symbols[i])) {
|
assignKey(to, from, symbols[i]);
|
}
|
}
|
}
|
|
return to;
|
}
|
|
function deepAssign(target) {
|
target = toObject(target);
|
|
for (var s = 1; s < arguments.length; s++) {
|
assign(target, arguments[s]);
|
}
|
|
return target;
|
}
|
|
// echarts图表的封装
|
function EGraph(el, opts) {
|
// 初始化图表类型
|
this.chart = echarts.init(el, 'white', {
|
renderer: 'svg'
|
});
|
// 配置项
|
this.option = {};
|
// 类型
|
this.type = 'bar';
|
|
// 最值
|
this.minMax = {
|
auto: true
|
};
|
|
// 最值的颜色
|
this.colors = {
|
min: 'red',
|
max: 'green',
|
normal: '#38B3F1'
|
};
|
|
// 默认配置项
|
var defaults = {
|
type: 'bar',
|
minMax: {
|
auto: true
|
},
|
init: {}
|
};
|
this.limit = {};
|
|
// 深度合并对象
|
opts = deepAssign({}, defaults, opts);
|
|
// 设置类型
|
this.setType(opts.type);
|
|
// 初始化图表的配置
|
this.init(opts.init);
|
|
// 最值
|
this.setMinMax(opts.minMax);
|
}
|
// 设置类型
|
EGraph.prototype.setType = function(type) {
|
switch(type) {
|
case 'line':
|
this.type = type;
|
break;
|
default:
|
this.type = 'bar';
|
break;
|
}
|
};
|
// 初始化
|
EGraph.prototype.init = function(opts) {
|
// 指定图表的配置项和数据
|
var option = {
|
animation: false,
|
title: {
|
text: '',
|
x: 'center'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
show: false
|
},
|
grid: {
|
left: '2%',
|
right: '2%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
data: [],
|
splitLine:{
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
min: 0,
|
max: 1
|
},
|
series: []
|
};
|
this.option = deepAssign({}, option, opts);
|
// 设置配置项
|
this._setOption(this.option);
|
}
|
// 设置配置项
|
EGraph.prototype._setOption = function(option) {
|
// 使用刚指定的配置项和数据显示图表。
|
this.chart.setOption(option, {
|
notMerge: true,
|
lazyUpdate: true
|
});
|
}
|
|
// 更改数据
|
EGraph.prototype.changeData = function(data) {
|
if(data.x.length == 0) {
|
this.init();
|
return;
|
}
|
var type = this.type; // 类型
|
switch(type) {
|
case 'line':
|
this._changeLineData(data);
|
break;
|
default:
|
this._changeBarData(data);
|
break;
|
}
|
};
|
|
// 修改柱状图数据
|
EGraph.prototype._changeBarData = function(data) {
|
var self = this;
|
var colors = this.colors; // 最值颜色
|
var minMax = this.minMax; // 最值
|
var option = deepAssign({}, this.option);
|
option.xAxis.data = data.x;
|
option.yAxis.min = function(value) {
|
var min;
|
// 计算最值
|
var num = value.min;
|
var override = 0.9;
|
if(num<0) {
|
override = 1.1;
|
}
|
min = Number((num*override).toFixed(1));
|
|
// 不计算最值
|
if(!minMax.auto) {
|
min = minMax.min<min?minMax.min:min;
|
}
|
// 返回最小值
|
return min;
|
};
|
option.yAxis.max = function(value) {
|
var max;
|
// 计算最值
|
var num = value.max;
|
var override = 1.1;
|
if(num<0) {
|
override = 0.9;
|
}
|
max = Number((num*override).toFixed(1));
|
// 不计算最值
|
if(!minMax.auto) {
|
max = minMax.max>max?minMax.max:max;
|
}
|
// 返回最大值
|
return max;
|
};
|
option.series = function() {
|
var list = [];
|
for(var i=0; i<data.y.length; i++) {
|
var item = data.y[i];
|
// 获取最值
|
/*var min = self.getMin(item.data);
|
var max = self.getMax(item.data);*/
|
// 设置返回的对象
|
var tmp = {
|
name: item.name,
|
type: 'bar',
|
data: item.data,
|
itemStyle: {
|
color: function(value) {
|
// 根据最值显示颜色
|
/*if(min == value.value) {
|
return colors.min;
|
}else if(max == value.value) {
|
return colors.max;
|
}else {
|
return colors.normal;
|
}*/
|
if(self.limit.low >= value.value || self.limit.high <= value.value) {
|
return colors.warn;
|
}else {
|
return colors.normal;
|
}
|
}
|
}
|
};
|
list.push(tmp);
|
}
|
return list;
|
}();
|
// 设置配置项
|
this._setOption(option, true);
|
};
|
|
// 修改折线图数据
|
EGraph.prototype._changeLineData = function(data) {
|
var minMax = this.minMax; // 最值
|
var option = deepAssign({}, this.option);
|
option.xAxis.data = data.x;
|
option.yAxis.min = function(value) {
|
var min;
|
// 计算最值
|
var num = value.min;
|
var override = 0.99;
|
if(num<0) {
|
override = 1.01;
|
}
|
min = Number((num*override).toFixed(1));
|
|
// 不计算最值
|
if(!minMax.auto) {
|
min = minMax.min<min?minMax.min:min;
|
}
|
// 返回最小值
|
return min;
|
};
|
option.yAxis.max = function(value) {
|
var max;
|
// 计算最值
|
var num = value.max;
|
var override = 1.01;
|
if(num<0) {
|
override = 0.99;
|
}
|
max = Number((num*override).toFixed(1));
|
// 不计算最值
|
if(!minMax.auto) {
|
max = minMax.max>max?minMax.max:max;
|
}
|
// 返回最大值
|
return max;
|
};
|
option.series = function() {
|
var list = [];
|
for(var i=0; i<data.y.length; i++) {
|
var item = data.y[i];
|
// 设置返回的对象
|
var tmp = {
|
name: item.name,
|
type: 'line',
|
data: item.data,
|
showSymbol: false,
|
};
|
list.push(tmp);
|
}
|
return list;
|
}();
|
// 设置配置项
|
this._setOption(option, true);
|
};
|
|
// 重置大小
|
EGraph.prototype.resize = function() {
|
this.chart.resize();
|
}
|
// 最值不需要自动计算的时候
|
EGraph.prototype.setMinMax = function(minMax) {
|
this.minMax = minMax;
|
}
|
// 获取数组的最大值
|
EGraph.prototype.getMax = function(arr) {
|
var sArr = arr.join(','); // 对数组进行转化防止二维数组
|
var array = sArr.split(','); // 将字符串分割为数组
|
var max = Infinity; // 设置最大值为无穷大
|
for(var i=0; i<array.length; i++) {
|
var num = Number(array[i]);
|
if(i != 0) {
|
max = max>num?max:num;
|
}else {
|
max = num;
|
}
|
}
|
return max;
|
};
|
|
// 获取数组的最小值
|
EGraph.prototype.getMin = function(arr) {
|
var sArr = arr.join(','); // 对数组进行转化防止二维数组
|
var array = sArr.split(','); // 将字符串分割为数组
|
var min = -Infinity; // 设置最大值为无穷小
|
for(var i=0; i<array.length; i++) {
|
var num = Number(array[i]);
|
if(i != 0) {
|
min = min<num?min:num;
|
}else {
|
min = num;
|
}
|
}
|
return min;
|
};
|
|
// 设置最值的颜色
|
EGraph.prototype.setColors = function(colors) {
|
this.colors = deepAssign({}, this.colors, colors);
|
};
|
|
// 设置最值的颜色
|
EGraph.prototype.setLimit = function(obj) {
|
this.limit = obj;
|
};
|
// 清理图表
|
EGraph.prototype.clear = function() {
|
this.changeData({
|
x: [],
|
y: []
|
});
|
};
|
// 销毁echarts
|
EGraph.prototype.dispose = function() {
|
this.chart.clear();
|
this.chart.dispose();
|
};
|
export default EGraph;
|
