(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('echarts/lib/echarts'), require('echarts/lib/component/tooltip'), require('echarts/lib/component/legend'), require('echarts/lib/chart/line')) : typeof define === 'function' && define.amd ? define(['echarts/lib/echarts', 'echarts/lib/component/tooltip', 'echarts/lib/component/legend', 'echarts/lib/chart/line'], factory) : (global.VeLine = factory(global.echarts)); }(this, (function (echartsLib) { 'use strict'; echartsLib = echartsLib && echartsLib.hasOwnProperty('default') ? echartsLib['default'] : echartsLib; var ABBR = { th: 3, mi: 6, bi: 9, tr: 12 }; var DEFAULT_OPTIONS = { zeroFormat: null, nullFormat: null, defaultFormat: '0,0', scalePercentBy100: true, abbrLabel: { th: 'k', mi: 'm', bi: 'b', tr: 't' } }; var TRILLION = 1e12; var BILLION = 1e9; var MILLION = 1e6; var THOUSAND = 1e3; function numIsNaN(value) { return typeof value === 'number' && isNaN(value); } function toFixed(value, maxDecimals, roundingFunction, optionals) { var splitValue = value.toString().split('.'); var minDecimals = maxDecimals - (optionals || 0); var boundedPrecision = splitValue.length === 2 ? Math.min(Math.max(splitValue[1].length, minDecimals), maxDecimals) : minDecimals; var power = Math.pow(10, boundedPrecision); var output = (roundingFunction(value + 'e+' + boundedPrecision) / power).toFixed(boundedPrecision); if (optionals > maxDecimals - boundedPrecision) { var optionalsRegExp = new RegExp('\\.?0{1,' + (optionals - (maxDecimals - boundedPrecision)) + '}$'); output = output.replace(optionalsRegExp, ''); } return output; } function numberToFormat(options, value, format, roundingFunction) { var abs = Math.abs(value); var negP = false; var optDec = false; var abbr = ''; var decimal = ''; var neg = false; var abbrForce = void 0; var signed = void 0; format = format || ''; value = value || 0; if (~format.indexOf('(')) { negP = true; format = format.replace(/[(|)]/g, ''); } else if (~format.indexOf('+') || ~format.indexOf('-')) { signed = ~format.indexOf('+') ? format.indexOf('+') : value < 0 ? format.indexOf('-') : -1; format = format.replace(/[+|-]/g, ''); } if (~format.indexOf('a')) { abbrForce = format.match(/a(k|m|b|t)?/); abbrForce = abbrForce ? abbrForce[1] : false; if (~format.indexOf(' a')) abbr = ' '; format = format.replace(new RegExp(abbr + 'a[kmbt]?'), ''); if (abs >= TRILLION && !abbrForce || abbrForce === 't') { abbr += options.abbrLabel.tr; value = value / TRILLION; } else if (abs < TRILLION && abs >= BILLION && !abbrForce || abbrForce === 'b') { abbr += options.abbrLabel.bi; value = value / BILLION; } else if (abs < BILLION && abs >= MILLION && !abbrForce || abbrForce === 'm') { abbr += options.abbrLabel.mi; value = value / MILLION; } else if (abs < MILLION && abs >= THOUSAND && !abbrForce || abbrForce === 'k') { abbr += options.abbrLabel.th; value = value / THOUSAND; } } if (~format.indexOf('[.]')) { optDec = true; format = format.replace('[.]', '.'); } var int = value.toString().split('.')[0]; var precision = format.split('.')[1]; var thousands = format.indexOf(','); var leadingCount = (format.split('.')[0].split(',')[0].match(/0/g) || []).length; if (precision) { if (~precision.indexOf('[')) { precision = precision.replace(']', ''); precision = precision.split('['); decimal = toFixed(value, precision[0].length + precision[1].length, roundingFunction, precision[1].length); } else { decimal = toFixed(value, precision.length, roundingFunction); } int = decimal.split('.')[0]; decimal = ~decimal.indexOf('.') ? '.' + decimal.split('.')[1] : ''; if (optDec && +decimal.slice(1) === 0) decimal = ''; } else { int = toFixed(value, 0, roundingFunction); } if (abbr && !abbrForce && +int >= 1000 && abbr !== ABBR.trillion) { int = '' + +int / 1000; abbr = ABBR.million; } if (~int.indexOf('-')) { int = int.slice(1); neg = true; } if (int.length < leadingCount) { for (var i = leadingCount - int.length; i > 0; i--) { int = '0' + int; } } if (thousands > -1) { int = int.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + ','); } if (!format.indexOf('.')) int = ''; var output = int + decimal + (abbr || ''); if (negP) { output = (negP && neg ? '(' : '') + output + (negP && neg ? ')' : ''); } else { if (signed >= 0) { output = signed === 0 ? (neg ? '-' : '+') + output : output + (neg ? '-' : '+'); } else if (neg) { output = '-' + output; } } return output; } function extend(target, sub) { Object.keys(sub).forEach(function (key) { target[key] = sub[key]; }); } var numerifyPercent = { regexp: /%/, format: function format(value, formatType, roundingFunction, numerify) { var space = ~formatType.indexOf(' %') ? ' ' : ''; var output = void 0; if (numerify.options.scalePercentBy100) value = value * 100; formatType = formatType.replace(/\s?%/, ''); output = numerify._numberToFormat(value, formatType, roundingFunction); if (~output.indexOf(')')) { output = output.split(''); output.splice(-1, 0, space + '%'); output = output.join(''); } else { output = output + space + '%'; } return output; } }; var options = {}; var formats = {}; extend(options, DEFAULT_OPTIONS); function format(value, formatType, roundingFunction) { formatType = formatType || options.defaultFormat; roundingFunction = roundingFunction || Math.round; var output = void 0; var formatFunction = void 0; if (value === 0 && options.zeroFormat !== null) { output = options.zeroFormat; } else if (value === null && options.nullFormat !== null) { output = options.nullFormat; } else { for (var kind in formats) { if (formats[kind] && formatType.match(formats[kind].regexp)) { formatFunction = formats[kind].format; break; } } formatFunction = formatFunction || numberToFormat.bind(null, options); output = formatFunction(value, formatType, roundingFunction, numerify); } return output; } function numerify(input, formatType, roundingFunction) { var value = void 0; if (input === 0 || typeof input === 'undefined') { value = 0; } else if (input === null || numIsNaN(input)) { value = null; } else if (typeof input === 'string') { if (options.zeroFormat && input === options.zeroFormat) { value = 0; } else if (options.nullFormat && input === options.nullFormat || !input.replace(/[^0-9]+/g, '').length) { value = null; } else { value = +input; } } else { value = +input || null; } return format(value, formatType, roundingFunction); } numerify.options = options; numerify._numberToFormat = numberToFormat.bind(null, options); numerify.register = function (name, format) { formats[name] = format; }; numerify.unregister = function (name) { formats[name] = null; }; numerify.setOptions = function (opts) { extend(options, opts); }; numerify.reset = function () { extend(options, DEFAULT_OPTIONS); }; numerify.register('percentage', numerifyPercent); var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; function debounce(fn, delay) { var timer = null; return function () { var self = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(self, args); }, delay); }; } function set$1(target, path, value) { if (!path) return; var targetTemp = target; var pathArr = path.split('.'); pathArr.forEach(function (item, index) { if (index === pathArr.length - 1) { targetTemp[item] = value; } else { if (!targetTemp[item]) targetTemp[item] = {}; targetTemp = targetTemp[item]; } }); } var _typeof$1 = typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol" ? function (obj) { return typeof obj === 'undefined' ? 'undefined' : _typeof(obj); } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === 'undefined' ? 'undefined' : _typeof(obj); }; function getType(v) { return Object.prototype.toString.call(v); } function getTypeof(v) { return typeof v === 'undefined' ? 'undefined' : _typeof$1(v); } function isObject(v) { return getType(v) === '[object Object]'; } function isArray(v) { return getType(v) === '[object Array]'; } function isFunction(v) { return getType(v) === '[object Function]'; } function cloneDeep(v) { return JSON.parse(JSON.stringify(v)); } function camelToKebab(s) { return s.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); } function hasOwn(source, target) { return Object.prototype.hasOwnProperty.call(source, target); } function isEqual(alice, bob) { if (alice === bob) return true; if (alice === null || bob === null || getTypeof(alice) !== 'object' || getTypeof(bob) !== 'object') { return alice === bob; } for (var key in alice) { if (!hasOwn(alice, key)) continue; var aliceValue = alice[key]; var bobValue = bob[key]; var aliceType = getTypeof(aliceValue); if (getTypeof(bobValue) === 'undefined') { return false; } else if (aliceType === 'object') { if (!isEqual(aliceValue, bobValue)) return false; } else if (aliceValue !== bobValue) { return false; } } for (var _key in bob) { if (!hasOwn(bob, _key)) continue; if (getTypeof(alice)[_key] === 'undefined') return false; } return true; } var getFormated = function getFormated(val, type, digit) { var defaultVal = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '-'; if (isNaN(val)) return defaultVal; if (!type) return val; if (isFunction(type)) return type(val, numerify); digit = isNaN(digit) ? 0 : ++digit; var digitStr = '.[' + new Array(digit).join(0) + ']'; var formatter = type; switch (type) { case 'KMB': formatter = digit ? '0,0' + digitStr + 'a' : '0,0a'; break; case 'normal': formatter = digit ? '0,0' + digitStr : '0,0'; break; case 'percent': formatter = digit ? '0,0' + digitStr + '%' : '0,0.[00]%'; break; } return numerify(val, formatter); }; var getStackMap = function getStackMap(stack) { var stackMap = {}; Object.keys(stack).forEach(function (item) { stack[item].forEach(function (name) { stackMap[name] = item; }); }); return stackMap; }; function getLineXAxis(args) { var dimension = args.dimension, rows = args.rows, xAxisName = args.xAxisName, axisVisible = args.axisVisible, xAxisType = args.xAxisType; return dimension.map(function (item, index) { return { type: xAxisType, nameLocation: 'middle', nameGap: 22, name: xAxisName[index] || '', axisTick: { show: true, lineStyle: { color: '#eee' } }, data: rows.map(function (row) { return row[item]; }), show: axisVisible }; }); } function getLineSeries(args) { var rows = args.rows, axisSite = args.axisSite, metrics = args.metrics, area = args.area, stack = args.stack, nullAddZero = args.nullAddZero, labelMap = args.labelMap, label = args.label, itemStyle = args.itemStyle, lineStyle = args.lineStyle, areaStyle = args.areaStyle, dimension = args.dimension; var series = []; var dataTemp = {}; var stackMap = stack && getStackMap(stack); metrics.forEach(function (item) { dataTemp[item] = []; }); rows.forEach(function (row) { metrics.forEach(function (item) { var value = null; if (row[item] != null) { value = row[item]; } else if (nullAddZero) { value = 0; } dataTemp[item].push([row[dimension[0]], value]); }); }); metrics.forEach(function (item) { var seriesItem = { name: labelMap[item] != null ? labelMap[item] : item, type: 'line', data: dataTemp[item] }; if (area) seriesItem.areaStyle = { normal: {} }; if (axisSite.right) { seriesItem.yAxisIndex = ~axisSite.right.indexOf(item) ? 1 : 0; } if (stack && stackMap[item]) seriesItem.stack = stackMap[item]; if (label) seriesItem.label = label; if (itemStyle) seriesItem.itemStyle = itemStyle; if (lineStyle) seriesItem.lineStyle = lineStyle; if (areaStyle) seriesItem.areaStyle = areaStyle; series.push(seriesItem); }); return series; } function getLineYAxis(args) { var yAxisName = args.yAxisName, yAxisType = args.yAxisType, axisVisible = args.axisVisible, scale = args.scale, min = args.min, max = args.max, digit = args.digit; var yAxisBase = { type: 'value', axisTick: { show: false }, show: axisVisible }; var yAxis = []; var _loop = function _loop(i) { if (yAxisType[i]) { yAxis[i] = _extends({}, yAxisBase, { axisLabel: { formatter: function formatter(val) { return getFormated(val, yAxisType[i], digit); } } }); } else { yAxis[i] = _extends({}, yAxisBase); } yAxis[i].name = yAxisName[i] || ''; yAxis[i].scale = scale[i] || false; yAxis[i].min = min[i] || null; yAxis[i].max = max[i] || null; }; for (var i = 0; i < 2; i++) { _loop(i); } return yAxis; } function getLineTooltip(args) { var axisSite = args.axisSite, yAxisType = args.yAxisType, digit = args.digit, labelMap = args.labelMap, tooltipFormatter = args.tooltipFormatter; var rightItems = axisSite.right || []; var rightList = labelMap ? rightItems.map(function (item) { return labelMap[item] === undefined ? item : labelMap[item]; }) : rightItems; return { trigger: 'axis', formatter: function formatter(items) { if (tooltipFormatter) { return tooltipFormatter.apply(null, arguments); } var tpl = []; var _items$ = items[0], name = _items$.name, axisValueLabel = _items$.axisValueLabel; var title = name || axisValueLabel; tpl.push(title + '
'); items.forEach(function (_ref) { var seriesName = _ref.seriesName, data = _ref.data, marker = _ref.marker; var showData = null; var type = ~rightList.indexOf(seriesName) ? yAxisType[1] : yAxisType[0]; var itemData = isArray(data) ? data[1] : data; showData = getFormated(itemData, type, digit); tpl.push(marker); tpl.push(seriesName + ': ' + showData); tpl.push('
'); }); return tpl.join(''); } }; } function getLegend(args) { var metrics = args.metrics, legendName = args.legendName, labelMap = args.labelMap; if (!legendName && !labelMap) return { data: metrics }; var data = labelMap ? metrics.map(function (item) { return labelMap[item] == null ? item : labelMap[item]; }) : metrics; return { data: data, formatter: function formatter(name) { return legendName[name] != null ? legendName[name] : name; } }; } var line$1 = function line$$1(columns, rows, settings, extra) { rows = isArray(rows) ? rows : []; columns = isArray(columns) ? columns : []; var _settings$axisSite = settings.axisSite, axisSite = _settings$axisSite === undefined ? {} : _settings$axisSite, _settings$yAxisType = settings.yAxisType, yAxisType = _settings$yAxisType === undefined ? ['normal', 'normal'] : _settings$yAxisType, _settings$xAxisType = settings.xAxisType, xAxisType = _settings$xAxisType === undefined ? 'category' : _settings$xAxisType, _settings$yAxisName = settings.yAxisName, yAxisName = _settings$yAxisName === undefined ? [] : _settings$yAxisName, _settings$dimension = settings.dimension, dimension = _settings$dimension === undefined ? [columns[0]] : _settings$dimension, _settings$xAxisName = settings.xAxisName, xAxisName = _settings$xAxisName === undefined ? [] : _settings$xAxisName, _settings$axisVisible = settings.axisVisible, axisVisible = _settings$axisVisible === undefined ? true : _settings$axisVisible, area = settings.area, stack = settings.stack, _settings$scale = settings.scale, scale = _settings$scale === undefined ? [false, false] : _settings$scale, _settings$min = settings.min, min = _settings$min === undefined ? [null, null] : _settings$min, _settings$max = settings.max, max = _settings$max === undefined ? [null, null] : _settings$max, _settings$nullAddZero = settings.nullAddZero, nullAddZero = _settings$nullAddZero === undefined ? false : _settings$nullAddZero, _settings$digit = settings.digit, digit = _settings$digit === undefined ? 2 : _settings$digit, _settings$legendName = settings.legendName, legendName = _settings$legendName === undefined ? {} : _settings$legendName, _settings$labelMap = settings.labelMap, labelMap = _settings$labelMap === undefined ? {} : _settings$labelMap, label = settings.label, itemStyle = settings.itemStyle, lineStyle = settings.lineStyle, areaStyle = settings.areaStyle; var tooltipVisible = extra.tooltipVisible, legendVisible = extra.legendVisible, tooltipFormatter = extra.tooltipFormatter; var metrics = columns.slice(); if (axisSite.left && axisSite.right) { metrics = axisSite.left.concat(axisSite.right); } else if (axisSite.left && !axisSite.right) { metrics = axisSite.left; } else if (settings.metrics) { metrics = settings.metrics; } else { metrics.splice(columns.indexOf(dimension[0]), 1); } var legend$$1 = legendVisible && getLegend({ metrics: metrics, legendName: legendName, labelMap: labelMap }); var tooltip$$1 = tooltipVisible && getLineTooltip({ axisSite: axisSite, yAxisType: yAxisType, digit: digit, labelMap: labelMap, xAxisType: xAxisType, tooltipFormatter: tooltipFormatter }); var xAxis = getLineXAxis({ dimension: dimension, rows: rows, xAxisName: xAxisName, axisVisible: axisVisible, xAxisType: xAxisType }); var yAxis = getLineYAxis({ yAxisName: yAxisName, yAxisType: yAxisType, axisVisible: axisVisible, scale: scale, min: min, max: max, digit: digit }); var series = getLineSeries({ rows: rows, axisSite: axisSite, metrics: metrics, area: area, stack: stack, nullAddZero: nullAddZero, labelMap: labelMap, label: label, itemStyle: itemStyle, lineStyle: lineStyle, areaStyle: areaStyle, xAxisType: xAxisType, dimension: dimension }); var options = { legend: legend$$1, xAxis: xAxis, series: series, yAxis: yAxis, tooltip: tooltip$$1 }; return options; }; var Loading = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "v-charts-component-loading" }, [_c('div', { staticClass: "loader" }, [_c('div', { staticClass: "loading-spinner" }, [_c('svg', { staticClass: "circular", attrs: { "viewBox": "25 25 50 50" } }, [_c('circle', { staticClass: "path", attrs: { "cx": "50", "cy": "50", "r": "20", "fill": "none" } })])])])]); }, staticRenderFns: [] }; var DataEmpty = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "v-charts-data-empty" }, [_vm._v(" 暂无数据 ")]); }, staticRenderFns: [] }; var DEFAULT_THEME = { categoryAxis: { axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false } }, valueAxis: { axisLine: { show: false } }, line: { smooth: true }, grid: { containLabel: true, left: 10, right: 10 } }; var DEFAULT_COLORS = ['#19d4ae', '#5ab1ef', '#fa6e86', '#ffb980', '#0067a6', '#c4b4e4', '#d87a80', '#9cbbff', '#d9d0c7', '#87a997', '#d49ea2', '#5b4947', '#7ba3a8']; var STATIC_PROPS = ['initOptions', 'loading', 'dataEmpty', 'judgeWidth', 'widthChangeDelay']; var ECHARTS_SETTINGS = ['grid', 'dataZoom', 'visualMap', 'toolbox', 'title', 'legend', 'xAxis', 'yAxis', 'radar', 'tooltip', 'axisPointer', 'brush', 'geo', 'timeline', 'graphic', 'series', 'backgroundColor', 'textStyle']; function setExtend (options, extend) { Object.keys(extend).forEach(function (attr) { var value = extend[attr]; if (~attr.indexOf('.')) { // eg: a.b.c a.1.b set$1(options, attr, value); } else if (typeof value === 'function') { // get callback value options[attr] = value(options[attr]); } else { // mixin extend value if (isArray(options[attr]) && isObject(options[attr][0])) { // eg: [{ xx: 1 }, { xx: 2 }] options[attr].forEach(function (option, index) { options[attr][index] = _extends({}, option, value); }); } else if (isObject(options[attr])) { // eg: { xx: 1, yy: 2 } options[attr] = _extends({}, options[attr], value); } else { options[attr] = value; } } }); } function setMark (seriesItem, marks) { Object.keys(marks).forEach(function (key) { if (marks[key]) seriesItem[key] = marks[key]; }); } function setAnimation (options, animation) { Object.keys(animation).forEach(function (key) { options[key] = animation[key]; }); } var Core = { render: function render(h) { return h('div', { class: [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(DataEmpty, { style: { display: this.dataEmpty ? '' : 'none' } }), h(Loading, { 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 || 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 ECHARTS_SETTINGS.forEach(function (setting) { if (_this[setting]) options[setting] = _this[setting]; }); // animation if (this.animation) setAnimation(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 (isArray(series)) { series.forEach(function (item) { setMark(item, marks); }); } else if (isObject(series)) { setMark(series, marks); } } // change inited echarts settings if (this.extend) setExtend(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) && !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 (isEqual(value, _this._store[item])) { options[item] = undefined; } else { _this._store[item] = cloneDeep(value); } } }); if (isObject(setOptionOpts)) { setOptionOpts.notMerge = false; } else { setOptionOpts = false; } } if (this._isDestroyed) return; if (this.log) console.log(options); this.echarts.setOption(options, setOptionOpts); this.$emit('ready', this.echarts, options, echartsLib); if (!this._once['ready-once']) { this._once['ready-once'] = true; this.$emit('ready-once', this.echarts, options, echartsLib); } if (this.judgeWidth) this.judgeWidthHandler(options); if (this.afterSetOption) this.afterSetOption(this.echarts, options, echartsLib); if (this.afterSetOptionOnce && !this._once['afterSetOptionOnce']) { this._once['afterSetOptionOnce'] = true; this.afterSetOptionOnce(this.echarts, options, echartsLib); } }, 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 || DEFAULT_THEME; this.echarts = echartsLib.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) && !~STATIC_PROPS.indexOf(prop)) { var opts = {}; if (~['[object Object]', '[object Array]'].indexOf(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 = debounce(this.resize, this.resizeDelay); this.changeHandler = debounce(this.dataHandler, this.changeDelay); this.addWatchToProps(); }, mounted: function mounted() { this.init(); }, beforeDestroy: function beforeDestroy() { this.clean(); }, _numerify: numerify }; var index = _extends({}, Core, { name: 'VeLine', data: function data() { this.chartHandler = line$1; return {}; } }); return index; })));