You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
414 lines
13 KiB
414 lines
13 KiB
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
var _echarts = require('echarts/lib/echarts');
|
|
|
|
var _echarts2 = _interopRequireDefault(_echarts);
|
|
|
|
require('echarts/lib/component/tooltip');
|
|
|
|
require('echarts/lib/component/legend');
|
|
|
|
var _numerify = require('numerify');
|
|
|
|
var _numerify2 = _interopRequireDefault(_numerify);
|
|
|
|
var _utilsLite = require('utils-lite');
|
|
|
|
var _loading = require('./components/loading');
|
|
|
|
var _loading2 = _interopRequireDefault(_loading);
|
|
|
|
var _dataEmpty = require('./components/data-empty');
|
|
|
|
var _dataEmpty2 = _interopRequireDefault(_dataEmpty);
|
|
|
|
var _constants = require('./constants');
|
|
|
|
var _extend = require('./modules/extend');
|
|
|
|
var _extend2 = _interopRequireDefault(_extend);
|
|
|
|
var _mark = require('./modules/mark');
|
|
|
|
var _mark2 = _interopRequireDefault(_mark);
|
|
|
|
var _animation = require('./modules/animation');
|
|
|
|
var _animation2 = _interopRequireDefault(_animation);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
exports.default = {
|
|
render: function render(h) {
|
|
return h('div', {
|
|
class: [(0, _utilsLite.camelToKebab)(this.$options.name || this.$options._componentTag)],
|
|
style: this.canvasStyle
|
|
}, [h('div', {
|
|
style: this.canvasStyle,
|
|
class: { 'v-charts-mask-status': this.dataEmpty || this.loading },
|
|
ref: 'canvas'
|
|
}), h(_dataEmpty2.default, {
|
|
style: { display: this.dataEmpty ? '' : 'none' }
|
|
}), h(_loading2.default, {
|
|
style: { display: this.loading ? '' : 'none' }
|
|
}), this.$slots.default]);
|
|
},
|
|
|
|
|
|
props: {
|
|
data: { type: [Object, Array], default: function _default() {
|
|
return {};
|
|
}
|
|
},
|
|
settings: { type: Object, default: function _default() {
|
|
return {};
|
|
}
|
|
},
|
|
width: { type: String, default: 'auto' },
|
|
height: { type: String, default: '400px' },
|
|
beforeConfig: { type: Function },
|
|
afterConfig: { type: Function },
|
|
afterSetOption: { type: Function },
|
|
afterSetOptionOnce: { type: Function },
|
|
events: { type: Object },
|
|
grid: { type: [Object, Array] },
|
|
colors: { type: Array },
|
|
tooltipVisible: { type: Boolean, default: true },
|
|
legendVisible: { type: Boolean, default: true },
|
|
legendPosition: { type: String },
|
|
markLine: { type: Object },
|
|
markArea: { type: Object },
|
|
markPoint: { type: Object },
|
|
visualMap: { type: [Object, Array] },
|
|
dataZoom: { type: [Object, Array] },
|
|
toolbox: { type: [Object, Array] },
|
|
initOptions: { type: Object, default: function _default() {
|
|
return {};
|
|
}
|
|
},
|
|
title: [Object, Array],
|
|
legend: [Object, Array],
|
|
xAxis: [Object, Array],
|
|
yAxis: [Object, Array],
|
|
radar: Object,
|
|
tooltip: Object,
|
|
axisPointer: [Object, Array],
|
|
brush: [Object, Array],
|
|
geo: [Object, Array],
|
|
timeline: [Object, Array],
|
|
graphic: [Object, Array],
|
|
series: [Object, Array],
|
|
backgroundColor: [Object, String],
|
|
textStyle: [Object, Array],
|
|
animation: Object,
|
|
theme: Object,
|
|
themeName: String,
|
|
loading: Boolean,
|
|
dataEmpty: Boolean,
|
|
extend: Object,
|
|
judgeWidth: { type: Boolean, default: false },
|
|
widthChangeDelay: { type: Number, default: 300 },
|
|
tooltipFormatter: { type: Function },
|
|
resizeable: { type: Boolean, default: true },
|
|
resizeDelay: { type: Number, default: 200 },
|
|
changeDelay: { type: Number, default: 0 },
|
|
setOptionOpts: { type: [Boolean, Object], default: true },
|
|
cancelResizeCheck: Boolean,
|
|
notSetUnchange: Array,
|
|
log: Boolean
|
|
},
|
|
|
|
watch: {
|
|
data: {
|
|
deep: true,
|
|
handler: function handler(v) {
|
|
if (v) {
|
|
this.changeHandler();
|
|
}
|
|
}
|
|
},
|
|
|
|
settings: {
|
|
deep: true,
|
|
handler: function handler(v) {
|
|
if (v.type && this.chartLib) this.chartHandler = this.chartLib[v.type];
|
|
this.changeHandler();
|
|
}
|
|
},
|
|
|
|
width: 'nextTickResize',
|
|
height: 'nextTickResize',
|
|
|
|
events: {
|
|
deep: true,
|
|
handler: 'createEventProxy'
|
|
},
|
|
|
|
theme: {
|
|
deep: true,
|
|
handler: 'themeChange'
|
|
},
|
|
|
|
themeName: 'themeChange',
|
|
|
|
resizeable: 'resizeableHandler'
|
|
},
|
|
|
|
computed: {
|
|
canvasStyle: function canvasStyle() {
|
|
return {
|
|
width: this.width,
|
|
height: this.height,
|
|
position: 'relative'
|
|
};
|
|
},
|
|
chartColor: function chartColor() {
|
|
return this.colors || this.theme && this.theme.color || _constants.DEFAULT_COLORS;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
dataHandler: function dataHandler() {
|
|
if (!this.chartHandler) return;
|
|
var data = this.data;
|
|
var _data = data,
|
|
_data$columns = _data.columns,
|
|
columns = _data$columns === undefined ? [] : _data$columns,
|
|
_data$rows = _data.rows,
|
|
rows = _data$rows === undefined ? [] : _data$rows;
|
|
|
|
var extra = {
|
|
tooltipVisible: this.tooltipVisible,
|
|
legendVisible: this.legendVisible,
|
|
echarts: this.echarts,
|
|
color: this.chartColor,
|
|
tooltipFormatter: this.tooltipFormatter,
|
|
_once: this._once
|
|
};
|
|
if (this.beforeConfig) data = this.beforeConfig(data);
|
|
|
|
var options = this.chartHandler(columns, rows, this.settings, extra);
|
|
if (options) {
|
|
if (typeof options.then === 'function') {
|
|
options.then(this.optionsHandler);
|
|
} else {
|
|
this.optionsHandler(options);
|
|
}
|
|
}
|
|
},
|
|
nextTickResize: function nextTickResize() {
|
|
this.$nextTick(this.resize);
|
|
},
|
|
resize: function resize() {
|
|
if (!this.cancelResizeCheck) {
|
|
if (this.$el && this.$el.clientWidth && this.$el.clientHeight) {
|
|
this.echartsResize();
|
|
}
|
|
} else {
|
|
this.echartsResize();
|
|
}
|
|
},
|
|
echartsResize: function echartsResize() {
|
|
this.echarts && this.echarts.resize();
|
|
},
|
|
optionsHandler: function optionsHandler(options) {
|
|
var _this = this;
|
|
|
|
// legend
|
|
if (this.legendPosition && options.legend) {
|
|
options.legend[this.legendPosition] = 10;
|
|
if (~['left', 'right'].indexOf(this.legendPosition)) {
|
|
options.legend.top = 'middle';
|
|
options.legend.orient = 'vertical';
|
|
}
|
|
}
|
|
// color
|
|
options.color = this.chartColor;
|
|
// echarts self settings
|
|
_constants.ECHARTS_SETTINGS.forEach(function (setting) {
|
|
if (_this[setting]) options[setting] = _this[setting];
|
|
});
|
|
// animation
|
|
if (this.animation) (0, _animation2.default)(options, this.animation);
|
|
// marks
|
|
if (this.markArea || this.markLine || this.markPoint) {
|
|
var marks = {
|
|
markArea: this.markArea,
|
|
markLine: this.markLine,
|
|
markPoint: this.markPoint
|
|
};
|
|
var series = options.series;
|
|
if ((0, _utilsLite.isArray)(series)) {
|
|
series.forEach(function (item) {
|
|
(0, _mark2.default)(item, marks);
|
|
});
|
|
} else if ((0, _utilsLite.isObject)(series)) {
|
|
(0, _mark2.default)(series, marks);
|
|
}
|
|
}
|
|
// change inited echarts settings
|
|
if (this.extend) (0, _extend2.default)(options, this.extend);
|
|
if (this.afterConfig) options = this.afterConfig(options);
|
|
var setOptionOpts = this.setOptionOpts;
|
|
// map chart not merge
|
|
if ((this.settings.bmap || this.settings.amap) && !(0, _utilsLite.isObject)(setOptionOpts)) {
|
|
setOptionOpts = false;
|
|
}
|
|
// exclude unchange options
|
|
if (this.notSetUnchange && this.notSetUnchange.length) {
|
|
this.notSetUnchange.forEach(function (item) {
|
|
var value = options[item];
|
|
if (value) {
|
|
if ((0, _utilsLite.isEqual)(value, _this._store[item])) {
|
|
options[item] = undefined;
|
|
} else {
|
|
_this._store[item] = (0, _utilsLite.cloneDeep)(value);
|
|
}
|
|
}
|
|
});
|
|
if ((0, _utilsLite.isObject)(setOptionOpts)) {
|
|
setOptionOpts.notMerge = false;
|
|
} else {
|
|
setOptionOpts = false;
|
|
}
|
|
}
|
|
if (this._isDestroyed) return;
|
|
if (this.log) console.log(options);
|
|
console.log('options------->', options);
|
|
console.log('setOptions----->', setOptionOpts);
|
|
// 设置一些基本参数
|
|
options.legend.textStyle = {
|
|
color: '#FFF'
|
|
};
|
|
|
|
this.echarts.setOption(options, setOptionOpts);
|
|
this.$emit('ready', this.echarts, options, _echarts2.default);
|
|
if (!this._once['ready-once']) {
|
|
this._once['ready-once'] = true;
|
|
this.$emit('ready-once', this.echarts, options, _echarts2.default);
|
|
}
|
|
if (this.judgeWidth) this.judgeWidthHandler(options);
|
|
if (this.afterSetOption) this.afterSetOption(this.echarts, options, _echarts2.default);
|
|
if (this.afterSetOptionOnce && !this._once['afterSetOptionOnce']) {
|
|
this._once['afterSetOptionOnce'] = true;
|
|
this.afterSetOptionOnce(this.echarts, options, _echarts2.default);
|
|
}
|
|
},
|
|
judgeWidthHandler: function judgeWidthHandler(options) {
|
|
var _this2 = this;
|
|
|
|
var widthChangeDelay = this.widthChangeDelay,
|
|
resize = this.resize;
|
|
|
|
if (this.$el.clientWidth || this.$el.clientHeight) {
|
|
resize();
|
|
} else {
|
|
this.$nextTick(function (_) {
|
|
if (_this2.$el.clientWidth || _this2.$el.clientHeight) {
|
|
resize();
|
|
} else {
|
|
setTimeout(function (_) {
|
|
resize();
|
|
if (!_this2.$el.clientWidth || !_this2.$el.clientHeight) {
|
|
console.warn(' Can\'t get dom width or height ');
|
|
}
|
|
}, widthChangeDelay);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
resizeableHandler: function resizeableHandler(resizeable) {
|
|
if (resizeable && !this._once.onresize) this.addResizeListener();
|
|
if (!resizeable && this._once.onresize) this.removeResizeListener();
|
|
},
|
|
init: function init() {
|
|
if (this.echarts) return;
|
|
var themeName = this.themeName || this.theme || _constants.DEFAULT_THEME;
|
|
this.echarts = _echarts2.default.init(this.$refs.canvas, themeName, this.initOptions);
|
|
if (this.data) this.changeHandler();
|
|
this.createEventProxy();
|
|
if (this.resizeable) this.addResizeListener();
|
|
},
|
|
addResizeListener: function addResizeListener() {
|
|
window.addEventListener('resize', this.resizeHandler);
|
|
this._once.onresize = true;
|
|
},
|
|
removeResizeListener: function removeResizeListener() {
|
|
window.removeEventListener('resize', this.resizeHandler);
|
|
this._once.onresize = false;
|
|
},
|
|
addWatchToProps: function addWatchToProps() {
|
|
var _this3 = this;
|
|
|
|
var watchedVariable = this._watchers.map(function (watcher) {
|
|
return watcher.expression;
|
|
});
|
|
Object.keys(this.$props).forEach(function (prop) {
|
|
if (!~watchedVariable.indexOf(prop) && !~_constants.STATIC_PROPS.indexOf(prop)) {
|
|
var opts = {};
|
|
if (~['[object Object]', '[object Array]'].indexOf((0, _utilsLite.getType)(_this3.$props[prop]))) {
|
|
opts.deep = true;
|
|
}
|
|
_this3.$watch(prop, function () {
|
|
_this3.changeHandler();
|
|
}, opts);
|
|
}
|
|
});
|
|
},
|
|
createEventProxy: function createEventProxy() {
|
|
var _this4 = this;
|
|
|
|
// 只要用户使用 on 方法绑定的事件都做一层代理，
|
|
// 是否真正执行相应的事件方法取决于该方法是否仍然存在 events 中
|
|
// 实现 events 的动态响应
|
|
var self = this;
|
|
var keys = Object.keys(this.events || {});
|
|
keys.length && keys.forEach(function (ev) {
|
|
if (_this4.registeredEvents.indexOf(ev) === -1) {
|
|
_this4.registeredEvents.push(ev);
|
|
_this4.echarts.on(ev, function (ev) {
|
|
return function () {
|
|
if (ev in self.events) {
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
self.events[ev].apply(null, args);
|
|
}
|
|
};
|
|
}(ev));
|
|
}
|
|
});
|
|
},
|
|
themeChange: function themeChange(theme) {
|
|
this.clean();
|
|
this.echarts = null;
|
|
this.init();
|
|
},
|
|
clean: function clean() {
|
|
if (this.resizeable) this.removeResizeListener();
|
|
this.echarts.dispose();
|
|
}
|
|
},
|
|
|
|
created: function created() {
|
|
this.echarts = null;
|
|
this.registeredEvents = [];
|
|
this._once = {};
|
|
this._store = {};
|
|
this.resizeHandler = (0, _utilsLite.debounce)(this.resize, this.resizeDelay);
|
|
this.changeHandler = (0, _utilsLite.debounce)(this.dataHandler, this.changeDelay);
|
|
this.addWatchToProps();
|
|
},
|
|
mounted: function mounted() {
|
|
this.init();
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
this.clean();
|
|
},
|
|
|
|
|
|
_numerify: _numerify2.default
|
|
};
|