From c7e2ec8567f8c494e57771295dc1c6ccf3e0cdb0 Mon Sep 17 00:00:00 2001 From: quietcoder <1642965215@qq.com> Date: Wed, 14 Jun 2017 15:37:54 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E5=8E=BB?= =?UTF-8?q?=E9=99=A4SIGN=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/test-data/bar.js | 2 +- examples/test-data/funnel.js | 2 +- examples/test-data/histogram.js | 2 +- src/bar/bar.js | 71 ++++++++++++++++---------------- src/chart/index.vue | 11 ++++- src/echarts-base.js | 30 ++++++-------- src/funnel/funnel.js | 38 +++++++---------- src/index.es.js | 17 +++++++- src/index.js | 17 +++++++- src/line/line.js | 72 +++++++++++++++++---------------- src/mixins.js | 4 +- src/pie/pie.js | 38 +++++++++++++---- src/radar/radar.js | 15 +++---- src/util.js | 18 ++++----- src/waterfall/waterfall.js | 58 +++++++++++++++++++++----- 15 files changed, 242 insertions(+), 153 deletions(-) diff --git a/examples/test-data/bar.js b/examples/test-data/bar.js index 0cc8028..492f300 100644 --- a/examples/test-data/bar.js +++ b/examples/test-data/bar.js @@ -31,7 +31,7 @@ export default { ] }, settings: { - xAxisType: ['KMB', 'normal'], + xAxisType: ['KMB', 'percent'], xAxisName: ['余额', '年龄'], axisSite: { top: ['年龄'] diff --git a/examples/test-data/funnel.js b/examples/test-data/funnel.js index de9d927..15f12c7 100644 --- a/examples/test-data/funnel.js +++ b/examples/test-data/funnel.js @@ -31,7 +31,7 @@ export default { } }, { - name: '漏斗图', + name: '指定数据类型漏斗图', data: { columns: ['状态', '数值'], rows: [ diff --git a/examples/test-data/histogram.js b/examples/test-data/histogram.js index ca02e34..a366aab 100644 --- a/examples/test-data/histogram.js +++ b/examples/test-data/histogram.js @@ -31,7 +31,7 @@ export default { ] }, settings: { - yAxisType: ['KMB', 'normal'], + yAxisType: ['KMB', 'percent'], yAxisName: ['余额', '年龄'], axisSite: { right: ['年龄'] diff --git a/src/bar/bar.js b/src/bar/bar.js index f293c6f..c6ce905 100755 --- a/src/bar/bar.js +++ b/src/bar/bar.js @@ -1,23 +1,9 @@ -import { SIGN, getLegendName, itemPoint } from '../echarts-base' +import { itemPoint } from '../echarts-base' import { getFormated, getStackMap } from '../util' import 'echarts/lib/chart/bar' -function getBarLegends ({ metrics, axisSite, meaAxisType, isHistogram }) { - let legends = [] - - const formatter = getLegendName - const secondAxis = isHistogram ? axisSite.right : axisSite.top - metrics.forEach(item => { - let legendItem = ~secondAxis.indexOf(item) - ? `${item}${SIGN}${meaAxisType[1]}` - : `${item}${SIGN}${meaAxisType[0]}` - legends.push(legendItem) - }) - - return legends.length ? { data: legends, formatter } : false -} - -function getBarDimAxis ({ rows, dimAxisName, dimension, axisVisible }) { +function getBarDimAxis (args) { + const { rows, dimAxisName, dimension, axisVisible } = args return dimension.map(item => ({ type: 'category', name: dimAxisName, @@ -33,8 +19,15 @@ function getBarDimAxis ({ rows, dimAxisName, dimension, axisVisible }) { })) } -function getBarMeaAxis ({ columns, meaAxisName, metrics, meaAxisType, axisVisible }) { - const meaAxisBase = { type: 'value', axisTick: { show: false }, show: axisVisible } +function getBarMeaAxis (args) { + const { meaAxisName, meaAxisType, axisVisible } = args + const meaAxisBase = { + type: 'value', + axisTick: { + show: false + }, + show: axisVisible + } let meaAxis = [] for (let i = 0; i < 2; i++) { @@ -55,17 +48,21 @@ function getBarMeaAxis ({ columns, meaAxisName, metrics, meaAxisType, axisVisibl return meaAxis } -function getBarTooltip () { +function getBarTooltip (args) { + const { axisSite, isHistogram, meaAxisType } = args + const secondAxis = isHistogram ? axisSite.right : axisSite.top return { trigger: 'axis', formatter (items) { let tpl = [] - const title = String(items[0].name).split(SIGN)[0] - tpl.push(`${title}
`) + tpl.push(`${items[0].name}
`) items.forEach(item => { - const [name, type] = item.seriesName.split(SIGN) + const seriesName = item.seriesName + const type = ~secondAxis.indexOf(seriesName) + ? meaAxisType[1] + : meaAxisType[0] tpl.push(itemPoint(item.color)) - tpl.push(`${name}: `) + tpl.push(`${seriesName}: `) tpl.push(getFormated(item.value, type)) tpl.push('
') }) @@ -75,7 +72,8 @@ function getBarTooltip () { } } -function getBarSeries ({ rows, metrics, stack, axisSite, meaAxisType, isHistogram }) { +function getBarSeries (args) { + const { rows, metrics, stack, axisSite, isHistogram } = args let series = [] const seriesTemp = {} const secondAxis = isHistogram ? axisSite.right : axisSite.top @@ -88,9 +86,7 @@ function getBarSeries ({ rows, metrics, stack, axisSite, meaAxisType, isHistogra }) }) series = Object.keys(seriesTemp).map(item => { - let itemName = ~secondAxis.indexOf(item) - ? `${item}${SIGN}${meaAxisType[1]}` - : `${item}${SIGN}${meaAxisType[0]}` + let itemName = item const seriesItem = { name: itemName, type: 'bar', @@ -105,6 +101,7 @@ function getBarSeries ({ rows, metrics, stack, axisSite, meaAxisType, isHistogra return series.length ? series : false } + const bar = (columns, rows, settings, status) => { const { axisSite = { top: [] }, @@ -124,11 +121,12 @@ const bar = (columns, rows, settings, status) => { const dimAxisName = settings.yAxisName || '' const isHistogram = false - const legend = legendVisible && getBarLegends({ metrics, axisSite, meaAxisType, isHistogram }) + const legend = legendVisible && { data: metrics } const yAxis = getBarDimAxis({ rows, dimAxisName, dimension, axisVisible }) - const xAxis = getBarMeaAxis({ columns, meaAxisName, metrics, meaAxisType, axisVisible }) - const series = getBarSeries({ rows, metrics, stack, axisSite, meaAxisType, isHistogram }) - const tooltip = tooltipVisible && getBarTooltip() + const xAxis = getBarMeaAxis({ meaAxisName, meaAxisType, axisVisible }) + const series = getBarSeries({ rows, metrics, stack, axisSite, isHistogram }) + const tooltipParams = { axisSite, isHistogram, meaAxisType } + const tooltip = tooltipVisible && getBarTooltip(tooltipParams) const options = { legend, yAxis, series, xAxis, tooltip } return options } @@ -152,11 +150,12 @@ const histogram = (columns, rows, settings, status) => { const dimAxisName = settings.xAxisName || '' const isHistogram = true - const legend = legendVisible && getBarLegends({ metrics, axisSite, meaAxisType, isHistogram }) + const legend = legendVisible && { data: metrics } const xAxis = getBarDimAxis({ rows, dimAxisName, dimension, axisVisible }) - const yAxis = getBarMeaAxis({ columns, meaAxisName, metrics, meaAxisType, axisVisible }) - const series = getBarSeries({ rows, metrics, stack, axisSite, meaAxisType, isHistogram }) - const tooltip = tooltipVisible && getBarTooltip() + const yAxis = getBarMeaAxis({ meaAxisName, meaAxisType, axisVisible }) + const series = getBarSeries({ rows, metrics, stack, axisSite, isHistogram }) + const tooltipParams = { axisSite, isHistogram, meaAxisType } + const tooltip = tooltipVisible && getBarTooltip(tooltipParams) const options = { legend, yAxis, series, xAxis, tooltip } return options } diff --git a/src/chart/index.vue b/src/chart/index.vue index df6feb0..5e814cf 100644 --- a/src/chart/index.vue +++ b/src/chart/index.vue @@ -15,7 +15,16 @@ export default { name: 'VeChart', mixins: [chartMixin], created () { - this.chartLib = { bar, histogram, line, pie, ring, funnel, radar, waterfall } + this.chartLib = { + bar, + histogram, + line, + pie, + ring, + funnel, + radar, + waterfall + } this.chartHandler = this.chartLib[this.settings.type] this.echartsLib = echarts } diff --git a/src/echarts-base.js b/src/echarts-base.js index 12d15ea..e728752 100644 --- a/src/echarts-base.js +++ b/src/echarts-base.js @@ -2,22 +2,6 @@ import echarts from 'echarts/lib/echarts' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' -const SIGN = '@_@' -const getLegendName = (item) => item.split(SIGN)[0] - -const itemPoint = (color) => { - return [ - '' - ].join('') -} - echarts.registerTheme('ve-chart', { color: [ '#19d4ae', '#5ab1ef', '#fa6e86', @@ -44,5 +28,17 @@ echarts.registerTheme('ve-chart', { } }) -export { SIGN, itemPoint, getLegendName } +export const itemPoint = (color) => { + return [ + '' + ].join('') +} + export default echarts diff --git a/src/funnel/funnel.js b/src/funnel/funnel.js index 2a8f360..5bd29fe 100755 --- a/src/funnel/funnel.js +++ b/src/funnel/funnel.js @@ -1,36 +1,25 @@ -import { SIGN, itemPoint, getLegendName } from '../echarts-base' +import { itemPoint } from '../echarts-base' import { getFormated, clone } from '../util' import 'echarts/lib/chart/funnel' -function getFunnelTooltip () { +function getFunnelTooltip (dataType) { return { trigger: 'item', formatter (item) { let tpl = [] - const name = item.name.split(SIGN)[0] - const type = item.name.split(SIGN)[1] tpl.push(itemPoint(item.color)) - tpl.push(`${name}: ${getFormated(item.data.realValue, type)}`) + tpl.push(`${item.name}: ${getFormated(item.data.realValue, dataType)}`) return tpl.join('') } } } -function getFunnelLegend ({ dimension, metrics, rows, sequence, dataType }) { - const legendData = sequence.map(item => { - return `${item}${SIGN}${dataType}` +function getFunnelSeries (args) { + const { dimension, metrics, rows, sequence, ascending } = args + let series = { type: 'funnel' } + rows.sort((a, b) => { + return sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension]) }) - const formatter = getLegendName - - return { data: legendData, formatter } -} - -function getFunnelSeries ({ dimension, metrics, rows, sequence, dataType, ascending }) { - let series = { - type: 'funnel', - label: { normal: { formatter (item) { return item.name.split(SIGN)[0] } } } - } - rows.sort((a, b) => sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension])) let falseFunnel = false rows.some((row, index) => { @@ -44,13 +33,13 @@ function getFunnelSeries ({ dimension, metrics, rows, sequence, dataType, ascend if (falseFunnel) { series.data = rows.slice().reverse().map((row, index) => ({ - name: `${row[dimension]}${SIGN}${dataType}`, + name: row[dimension], value: (index + 1) * step, realValue: row[metrics] })) } else { series.data = rows.map(row => ({ - name: `${row[dimension]}${SIGN}${dataType}`, + name: row[dimension], value: row[metrics], realValue: row[metrics] })) @@ -79,9 +68,10 @@ const funnel = (outerColumns, outerRows, settings, status) => { metrics = metricsTemp[0] } - const tooltip = tooltipVisible && getFunnelTooltip() - const legend = legendVisible && getFunnelLegend({ dimension, metrics, rows, sequence, dataType }) - const series = getFunnelSeries({ dimension, metrics, rows, sequence, dataType, ascending }) + const tooltip = tooltipVisible && getFunnelTooltip(dataType) + const legend = legendVisible && { data: sequence } + const seriesParams = { dimension, metrics, rows, sequence, ascending } + const series = getFunnelSeries(seriesParams) const options = { tooltip, legend, series } return options } diff --git a/src/index.es.js b/src/index.es.js index d9942c3..afb280d 100644 --- a/src/index.es.js +++ b/src/index.es.js @@ -21,7 +21,20 @@ const components = [ ] function install (Vue, _) { - components.forEach(component => { Vue.component(component.name, component) }) + components.forEach(component => { + Vue.component(component.name, component) + }) } -export { VeBar, VeHistogram, VeRing, VeLine, VePie, VeWaterfall, VeFunnel, VeRadar, VeChart, install } +export { + VeBar, + VeHistogram, + VeRing, + VeLine, + VePie, + VeWaterfall, + VeFunnel, + VeRadar, + VeChart, + install +} diff --git a/src/index.js b/src/index.js index 7014816..82a404f 100755 --- a/src/index.js +++ b/src/index.js @@ -27,11 +27,24 @@ const components = [ ] function install (Vue, _) { - components.forEach(component => { Vue.component(component.name, component) }) + components.forEach(component => { + Vue.component(component.name, component) + }) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } -export default { VeBar, VeHistogram, VeRing, VeLine, VePie, VeWaterfall, VeFunnel, VeRadar, VeChart, install } +export default { + VeBar, + VeHistogram, + VeRing, + VeLine, + VePie, + VeWaterfall, + VeFunnel, + VeRadar, + VeChart, + install +} diff --git a/src/line/line.js b/src/line/line.js index fd3ac0c..f6c5c95 100755 --- a/src/line/line.js +++ b/src/line/line.js @@ -1,23 +1,9 @@ -import { SIGN, getLegendName, itemPoint } from '../echarts-base' +import { itemPoint } from '../echarts-base' import { getFormated, getStackMap } from '../util' import 'echarts/lib/chart/line' -function getLineLegends ({ metrics, axisSite, yAxisType }) { - let legends = [] - - const formatter = getLegendName - - metrics.forEach(item => { - let legendItem = ~axisSite.right.indexOf(item) - ? `${item}${SIGN}${yAxisType[1]}` - : `${item}${SIGN}${yAxisType[0]}` - legends.push(legendItem) - }) - - return legends.length ? { data: legends, formatter } : false -} - -function getLineXAxis ({ dimension, rows, xAxisName, axisVisible }) { +function getLineXAxis (args) { + const { dimension, rows, xAxisName, axisVisible } = args return dimension.map((item, index) => ({ type: 'category', nameLocation: 'middle', @@ -35,7 +21,14 @@ function getLineXAxis ({ dimension, rows, xAxisName, axisVisible }) { })) } -function getLineSeries ({ rows, axisSite, yAxisType, dimension, metrics, area, stack }) { +function getLineSeries (args) { + const { + rows, + axisSite, + metrics, + area, + stack + } = args let series = [] const dataTemp = {} const stackMap = stack && getStackMap(stack) @@ -53,14 +46,7 @@ function getLineSeries ({ rows, axisSite, yAxisType, dimension, metrics, area, s } if (area) seriesItem.areaStyle = { normal: {} } - - if (~axisSite.right.indexOf(item)) { - seriesItem.yAxisIndex = 1 - seriesItem.name = `${item}${SIGN}${yAxisType[1]}` - } else { - seriesItem.yAxisIndex = 0 - seriesItem.name = `${item}${SIGN}${yAxisType[0]}` - } + seriesItem.yAxisIndex = ~axisSite.right.indexOf(item) ? 1 : 0 if (stack && stackMap[item]) seriesItem.stack = stackMap[item] @@ -69,8 +55,15 @@ function getLineSeries ({ rows, axisSite, yAxisType, dimension, metrics, area, s return series.length ? series : false } -function getLineYAxis ({ yAxisName, yAxisType, axisVisible }) { - const yAxisBase = { type: 'value', axisTick: { show: false }, show: axisVisible } +function getLineYAxis (args) { + const { yAxisName, yAxisType, axisVisible } = args + const yAxisBase = { + type: 'value', + axisTick: { + show: false + }, + show: axisVisible + } let yAxis = [] for (let i = 0; i < 2; i++) { if (yAxisType[i]) { @@ -89,7 +82,7 @@ function getLineYAxis ({ yAxisName, yAxisType, axisVisible }) { return yAxis } -function getLineTooltip () { +function getLineTooltip (axisSite, yAxisType) { return { trigger: 'axis', formatter (items) { @@ -97,10 +90,12 @@ function getLineTooltip () { tpl.push(`${items[0].name}
`) items.forEach(item => { let showData - const [name, type] = item.seriesName.split(SIGN) + const type = ~axisSite.right.indexOf(item.seriesName) + ? yAxisType[1] + : yAxisType[0] showData = getFormated(item.data, type) tpl.push(itemPoint(item.color)) - tpl.push(`${name}: ${showData}`) + tpl.push(`${item.seriesName}: ${showData}`) tpl.push('
') }) return tpl.join('') @@ -128,11 +123,20 @@ const line = (columns, rows, settings, status) => { metrics.splice(columns.indexOf(dimension[0]), 1) } - const legend = legendVisible && getLineLegends({ metrics, axisSite, yAxisType }) - const tooltip = tooltipVisible && getLineTooltip() + const legend = legendVisible && { data: metrics } + const tooltip = tooltipVisible && getLineTooltip(axisSite, yAxisType) const xAxis = getLineXAxis({ dimension, rows, xAxisName, axisVisible }) const yAxis = getLineYAxis({ yAxisName, yAxisType, axisVisible }) - const series = getLineSeries({ rows, stack, axisSite, yAxisType, dimension, metrics, area }) + const seriesParams = { + rows, + stack, + axisSite, + yAxisType, + dimension, + metrics, + area + } + const series = getLineSeries(seriesParams) if (!xAxis || !series) return false let options = { legend, xAxis, series, yAxis, tooltip } diff --git a/src/mixins.js b/src/mixins.js index c847e6d..6f63123 100644 --- a/src/mixins.js +++ b/src/mixins.js @@ -43,7 +43,9 @@ const chartMixin = { methods: { dataHandler (data) { if (!this.chartHandler) return - if (!data || !Array.isArray(data.columns) || !Array.isArray(data.rows)) return false + if (!data || + !Array.isArray(data.columns) || + !Array.isArray(data.rows)) return false const { columns, rows } = data const status = { tooltipVisible: this.tooltipVisible, diff --git a/src/pie/pie.js b/src/pie/pie.js index c4878ab..913cc07 100644 --- a/src/pie/pie.js +++ b/src/pie/pie.js @@ -8,8 +8,15 @@ const pieOffsetY = 200 function getPieSeries (args) { const { - rows, dataType, percentShow, dimension, metrics, - radius, offsetY, selectedMode, hoverAnimation + rows, + dataType, + percentShow, + dimension, + metrics, + radius, + offsetY, + selectedMode, + hoverAnimation } = args let series = { @@ -34,12 +41,16 @@ function getPieSeries (args) { } } } - series.data = rows.map(row => ({ name: row[dimension], value: row[metrics] })) + series.data = rows.map(row => ({ + name: row[dimension], + value: row[metrics] + })) return series } -function getPieLegend ({ rows, dimension, legendLimit }) { +function getPieLegend (args) { + const { rows, dimension, legendLimit } = args let legend = rows.map(row => row[dimension]) return legend.length ? { data: legend, show: legend.length < legendLimit } @@ -72,15 +83,26 @@ const pie = (columns, rows, settings, status, isRing) => { hoverAnimation = true } = settings const { tooltipVisible, legendVisible } = status - const series = getPieSeries({ - rows, dataType, percentShow, dimension, metrics, radius, offsetY, selectedMode, hoverAnimation - }) + const seriesParams = { + rows, + dataType, + percentShow, + dimension, + metrics, + radius, + offsetY, + selectedMode, + hoverAnimation + } + const series = getPieSeries(seriesParams) const legend = legendVisible && getPieLegend({ rows, dimension, legendLimit }) const tooltip = tooltipVisible && getPieTooltip(dataType) const options = { series, legend, tooltip } return options } -const ring = (columns, rows, settings, status) => pie(columns, rows, settings, status, true) +const ring = (columns, rows, settings, status) => { + return pie(columns, rows, settings, status, true) +} export { pie, ring } diff --git a/src/radar/radar.js b/src/radar/radar.js index 5db09fc..34f5a68 100755 --- a/src/radar/radar.js +++ b/src/radar/radar.js @@ -2,13 +2,13 @@ import { itemPoint } from '../echarts-base' import { getFormated } from '../util' import 'echarts/lib/chart/radar' -function getRadarLegend ({ rows, dimension }) { +function getRadarLegend (rows, dimension) { let legendData = rows.map(row => row[dimension]) return { data: legendData } } -function getRadarTooltip ({ dataType, radar }) { +function getRadarTooltip (dataType, radar) { const typeTemp = [] const nameTemp = [] radar.indicator.map((item, index) => { @@ -29,7 +29,7 @@ function getRadarTooltip ({ dataType, radar }) { } } -function getRadarSetting ({ rows, dimension, metrics }) { +function getRadarSetting (rows, metrics) { const settingBase = { indicator: [], shape: 'circle', @@ -54,7 +54,8 @@ function getRadarSetting ({ rows, dimension, metrics }) { return settingBase } -function getRadarSeries ({ rows, dimension, metrics, radar }) { +function getRadarSeries (args) { + const { rows, dimension, metrics, radar } = args let radarIndexObj = {} radar.indicator.forEach((item, index) => { radarIndexObj[item.name] = index @@ -88,9 +89,9 @@ const radar = (columns, rows, settings, status) => { } else { metrics.splice(columns.indexOf(dimension), 1) } - const legend = legendVisible && getRadarLegend({ rows, dimension }) - const radar = getRadarSetting({ rows, dimension, metrics }) - const tooltip = tooltipVisible && getRadarTooltip({ dataType, radar }) + const legend = legendVisible && getRadarLegend(rows, dimension) + const radar = getRadarSetting(rows, metrics) + const tooltip = tooltipVisible && getRadarTooltip(dataType, radar) const series = getRadarSeries({ rows, dimension, metrics, radar }) const options = { legend, tooltip, radar, series } return options diff --git a/src/util.js b/src/util.js index d09ee10..be86574 100644 --- a/src/util.js +++ b/src/util.js @@ -1,4 +1,4 @@ -const numberFormat = (val, digits = 2) => { +export const numberFormat = (val, digits = 2) => { if (isNaN(+val)) return val let symbolMap = [ @@ -19,11 +19,13 @@ const numberFormat = (val, digits = 2) => { return val.toString() } -const formatTausends = (num) => { - return String(num).replace(/^(\s+|-)?\d+(?=.?\d*($|\s))/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')) +export const formatTausends = (num) => { + return String(num).replace(/^(\s+|-)?\d+(?=.?\d*($|\s))/g, (m) => { + return m.replace(/(?=(?!\b)(\d{3})+$)/g, ',') + }) } -const getFormated = (val, type) => { +export const getFormated = (val, type) => { switch (type) { case 'KMB': return numberFormat(val) case 'percent': return `${parseFloat((val * 100).toFixed(2))}%` @@ -32,14 +34,14 @@ const getFormated = (val, type) => { } } -const getLineKB = (s, v) => { +export const getLineKB = (s, v) => { const result = [] result[0] = (s[1] - s[0]) / (v[1] - v[0]) result[1] = s[0] - result[0] * v[0] return result } -const getStackMap = (stack) => { +export const getStackMap = (stack) => { const stackMap = {} Object.keys(stack).forEach(item => { stack[item].forEach(name => { @@ -49,6 +51,4 @@ const getStackMap = (stack) => { return stackMap } -const clone = (v) => JSON.parse(JSON.stringify(v)) - -export { numberFormat, formatTausends, getFormated, getLineKB, clone, getStackMap } +export const clone = (v) => JSON.parse(JSON.stringify(v)) diff --git a/src/waterfall/waterfall.js b/src/waterfall/waterfall.js index 7cae83a..9ba3b7c 100644 --- a/src/waterfall/waterfall.js +++ b/src/waterfall/waterfall.js @@ -15,9 +15,20 @@ function getWaterfallTooltip (dataType) { } } -function getWaterfallXAxis ({ dimension, rows, remainStatus, totalName, remainName, xAxisName, axisVisible }) { +function getWaterfallXAxis (args) { + const { + dimension, + rows, + remainStatus, + totalName, + remainName, + xAxisName, + axisVisible + } = args let xAxisData = [totalName].concat(rows.map(row => row[dimension])) - if (remainStatus === 'have-remain') xAxisData = xAxisData.concat([remainName]) + if (remainStatus === 'have-remain') { + xAxisData = xAxisData.concat([remainName]) + } return { type: 'category', @@ -28,7 +39,8 @@ function getWaterfallXAxis ({ dimension, rows, remainStatus, totalName, remainNa } } -function getWaterfallYAxis ({ dataType, yAxisName, axisVisible }) { +function getWaterfallYAxis (args) { + const { dataType, yAxisName, axisVisible } = args return { type: 'value', name: yAxisName, @@ -42,7 +54,15 @@ function getWaterfallYAxis ({ dataType, yAxisName, axisVisible }) { } } -function getWaterfallSeries ({ dataType, rows, dimension, metrics, totalNum, remainStatus, dataSum }) { +function getWaterfallSeries (args) { + const { + dataType, + rows, + metrics, + totalNum, + remainStatus, + dataSum + } = args const seriesBase = { type: 'bar', stack: '总量' } let dataSumTemp = dataSum let totalNumTemp = totalNum @@ -90,7 +110,7 @@ function getWaterfallSeries ({ dataType, rows, dimension, metrics, totalNum, rem return series } -function getWaterfallRemainStatus ({ dataSum, totalNum }) { +function getWaterfallRemainStatus (dataSum, totalNum) { if (!totalNum) return 'not-total' return totalNum > dataSum ? 'have-remain' : 'none-remain' } @@ -111,11 +131,31 @@ const waterfall = (columns, rows, settings, status) => { const metrics = metricsTemp[0] const yAxisName = metrics const tooltip = tooltipVisible && getWaterfallTooltip(dataType) - const dataSum = rows.reduce((pre, cur) => pre + Number(cur[metrics]), 0).toFixed(2) - const remainStatus = getWaterfallRemainStatus({ dataSum, dimension, totalNum }) - const xAxis = getWaterfallXAxis({ dimension, rows, remainStatus, totalName, remainName, xAxisName, axisVisible }) + const dataSum = rows.reduce((pre, cur) => { + return pre + Number(cur[metrics]) + }, 0).toFixed(2) + const remainStatus = getWaterfallRemainStatus(dataSum, totalNum) + const xAxisParams = { + dimension, + rows, + remainStatus, + totalName, + remainName, + xAxisName, + axisVisible + } + const xAxis = getWaterfallXAxis(xAxisParams) const yAxis = getWaterfallYAxis({ dataType, yAxisName, axisVisible }) - const series = getWaterfallSeries({ dataType, rows, dimension, metrics, totalNum, remainStatus, dataSum }) + const seriesParams = { + dataType, + rows, + dimension, + metrics, + totalNum, + remainStatus, + dataSum + } + const series = getWaterfallSeries(seriesParams) const options = { tooltip, xAxis, yAxis, series } return options } From 12d4d8d2b692647fe951712073294deee0881759 Mon Sep 17 00:00:00 2001 From: quietcoder <1642965215@qq.com> Date: Wed, 14 Jun 2017 16:29:56 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E6=8A=98?= =?UTF-8?q?=E7=BA=BF=E5=9B=BEscale,=20min,=20max=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/line.md | 5 +++++ docs/props.md | 6 ++---- examples/test-data/line.js | 39 ++++++++++++++++++++++++++++++++++++++ src/line/line.js | 33 +++++++++++++++++++++++++------- 4 files changed, 72 insertions(+), 11 deletions(-) diff --git a/docs/line.md b/docs/line.md index 6e3bd67..2c4613a 100644 --- a/docs/line.md +++ b/docs/line.md @@ -15,7 +15,12 @@ | axisSite | 指标所在的轴 | Object | 默认不在right轴的指标都在left轴 | | stack | 堆叠选项 | Object | - | | area | 是否展示为面积图 | Boolean | 默认为false | +| scale | 是否是脱离 0 值比例 | Object | 设置成 true 后坐标刻度不会
强制包含零刻度，默认都是 false | +| min | 左右坐标轴最小值 | Array | - | +| max | 左右坐标轴最大值 | Array | - | > 备注1. axisSite 可以设置 left 和 right，例如示例所示 `axisSite: { right: ['占比'] }` 即将占比的数据置于右轴上。 > 备注2. stack 用于将两数据堆叠起来，例如实例中所示`stack: { '销售额': ['销售额-1季度', '销售额-2季度'] }` 即将'销售额-1季度', '销售额-2季度'相应的数据堆叠在一起。 + +> 备注3. min和max的值可以直接设置为数字，例如：`[100, 300]`；也可以设置为`['dataMin', 'dataMin']`, `['dataMax', 'dataMax']`，此时表示使用该坐标轴上的最小值或最大值为最小或最大刻度。 diff --git a/docs/props.md b/docs/props.md index b79debe..5f8cd81 100644 --- a/docs/props.md +++ b/docs/props.md @@ -13,11 +13,9 @@ V-Charts 的属性分为两种，一种是全部图表都具有的属性，例 | height | 图表高度 | String | 默认 400px | | settings | 图表配置项 | Object | 内容参考图表具体的配置 | | colors | 颜色列表 | Array | 默认
`['#19d4ae', '#5ab1ef', '#fa6e86',`
` '#ffb980', '#0067a6', '#c4b4e4',`
` '#d87a80', '#9cbbff', '#d9d0c7',`
` '#87a997', '#d49ea2', '#5b4947']` | -| tooltip-visible | 是否显示提示框 | Boolean | 默认为 false，
设置为true时需要额外引入
'echarts/lib/component/tooltip' | -| legend-visible | 是否显示Legend | Boolean | 默认为 false，
设置为true时需要额外引入
'echarts/lib/component/legend' | -| axis-visible | 是否显示坐标轴 | Boolean | 默认为 true | +| tooltip-visible | 是否显示提示框 | Boolean | 默认为 true | +| legend-visible | 是否显示Legend | Boolean | 默认为 true | | grid | 网格配置 | Object | 内容参考
http://echarts.baidu.com/option.html#grid | -| scale | 是否是脱离 0 值比例 | Object | 设置成 true 后坐标刻度不会
强制包含零刻度，默认都是 false | | events | 为图表绑定事件 | Object | 内容为包含事件名-事件处理函数的对象，例如
`{ click: function (e) { console.log(e) }}` | | before-config | 对数据提前进行额外的处理 | Function | 在数据转化为配置项开始前触发
参数为 data
需返回表格数据 | after-config | 对生成好的echarts配置
进行额外的处理 | Function | 在数据转化为配置项结束后触发
参数为 options
需返回 echarts 配置 diff --git a/examples/test-data/line.js b/examples/test-data/line.js index 1667e18..da76cb8 100644 --- a/examples/test-data/line.js +++ b/examples/test-data/line.js @@ -74,6 +74,45 @@ export default { metrics: ['余额'] } }, + { + name: '设置scale', + data: { + columns: ['日期', '余额', '比率'], + rows: [ + { '日期': '1-1', '余额': 1232, '比率': 0.1 }, + { '日期': '1-2', '余额': 1223, '比率': 0.2 }, + { '日期': '1-3', '余额': 2123, '比率': 0.3 }, + { '日期': '1-4', '余额': 4123, '比率': 0.4 }, + { '日期': '1-5', '余额': 3123, '比率': 0.5 }, + { '日期': '1-6', '余额': 7123, '比率': 0.6 } + ] + }, + settings: { + dimension: ['比率'], + metrics: ['余额'], + scale: [true, true] + } + }, + { + name: '设置min max', + data: { + columns: ['日期', '余额', '比率'], + rows: [ + { '日期': '1-1', '余额': 1232, '比率': 0.1 }, + { '日期': '1-2', '余额': 1223, '比率': 0.2 }, + { '日期': '1-3', '余额': 2123, '比率': 0.3 }, + { '日期': '1-4', '余额': 4123, '比率': 0.4 }, + { '日期': '1-5', '余额': 3123, '比率': 0.5 }, + { '日期': '1-6', '余额': 7123, '比率': 0.6 } + ] + }, + settings: { + dimension: ['比率'], + metrics: ['余额'], + min: [1000], + max: [5000] + } + }, { name: '面积图', data: { diff --git a/src/line/line.js b/src/line/line.js index f6c5c95..c88d549 100755 --- a/src/line/line.js +++ b/src/line/line.js @@ -56,7 +56,14 @@ function getLineSeries (args) { } function getLineYAxis (args) { - const { yAxisName, yAxisType, axisVisible } = args + const { + yAxisName, + yAxisType, + axisVisible, + scale, + min, + max + } = args const yAxisBase = { type: 'value', axisTick: { @@ -78,6 +85,9 @@ function getLineYAxis (args) { yAxis[i] = Object.assign({}, yAxisBase) } yAxis[i].name = yAxisName[i] || '' + yAxis[i].scale = scale[i] || false + yAxis[i].min = min[i] || null + yAxis[i].max = max[i] || null } return yAxis } @@ -112,7 +122,10 @@ const line = (columns, rows, settings, status) => { xAxisName = [], axisVisible = true, area, - stack + stack, + scale = [false, false], + min = [null, null], + max = [null, null] } = settings const { tooltipVisible, legendVisible } = status let metrics = columns.slice() @@ -126,15 +139,21 @@ const line = (columns, rows, settings, status) => { const legend = legendVisible && { data: metrics } const tooltip = tooltipVisible && getLineTooltip(axisSite, yAxisType) const xAxis = getLineXAxis({ dimension, rows, xAxisName, axisVisible }) - const yAxis = getLineYAxis({ yAxisName, yAxisType, axisVisible }) + const yAxisParams = { + yAxisName, + yAxisType, + axisVisible, + scale, + min, + max + } + const yAxis = getLineYAxis(yAxisParams) const seriesParams = { rows, - stack, axisSite, - yAxisType, - dimension, metrics, - area + area, + stack } const series = getLineSeries(seriesParams) if (!xAxis || !series) return false From 64ae0878b57f6a263223fdf7a9283d5c8bb329bd Mon Sep 17 00:00:00 2001 From: quietcoder <1642965215@qq.com> Date: Wed, 14 Jun 2017 17:48:43 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=EF=BC=9A=E5=9B=BE?= =?UTF-8?q?=E4=BE=8B=E4=BD=8D=E7=BD=AE=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/props.md | 3 ++- examples/pages/toggle.vue | 16 +++++++++++----- package.json | 2 +- src/funnel/funnel.js | 6 +++--- src/mixins.js | 10 +++++++++- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/docs/props.md b/docs/props.md index 5f8cd81..f6eec83 100644 --- a/docs/props.md +++ b/docs/props.md @@ -14,7 +14,8 @@ V-Charts 的属性分为两种，一种是全部图表都具有的属性，例 | settings | 图表配置项 | Object | 内容参考图表具体的配置 | | colors | 颜色列表 | Array | 默认
`['#19d4ae', '#5ab1ef', '#fa6e86',`
` '#ffb980', '#0067a6', '#c4b4e4',`
` '#d87a80', '#9cbbff', '#d9d0c7',`
` '#87a997', '#d49ea2', '#5b4947']` | | tooltip-visible | 是否显示提示框 | Boolean | 默认为 true | -| legend-visible | 是否显示Legend | Boolean | 默认为 true | +| legend-visible | 是否显示图例 | Boolean | 默认为 true | +| legend-position | 图例显示位置 | String | 可选`'left', 'top', 'right', 'bottom'` | | grid | 网格配置 | Object | 内容参考
http://echarts.baidu.com/option.html#grid | | events | 为图表绑定事件 | Object | 内容为包含事件名-事件处理函数的对象，例如
`{ click: function (e) { console.log(e) }}` | | before-config | 对数据提前进行额外的处理 | Function | 在数据转化为配置项开始前触发
参数为 data
需返回表格数据 diff --git a/examples/pages/toggle.vue b/examples/pages/toggle.vue index bf6fb3e..fb7b3b0 100644 --- a/examples/pages/toggle.vue +++ b/examples/pages/toggle.vue @@ -2,7 +2,13 @@

图表切换

{{ contentList[0] }}

- + +

代码示例

@@ -89,10 +95,10 @@ export default { }, methods: { changeChart () { - // if (this.index === 2) this.index = 0 - // else this.index++ - this.dataSw = !this.dataSw - this.chartData = this.dataSw ? this.chartDataStore : this.chartDataStore1 + if (this.index === 2) this.index = 0 + else this.index++ + // this.dataSw = !this.dataSw + // this.chartData = this.dataSw ? this.chartDataStore : this.chartDataStore1 }, init () { this.chartData = this.chartDataStore diff --git a/package.json b/package.json index 6aa4940..10f0104 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "v-charts", - "version": "1.1.5", + "version": "1.1.6", "description": "", "main": "lib/index.js", "scripts": { diff --git a/src/funnel/funnel.js b/src/funnel/funnel.js index 5bd29fe..b814006 100755 --- a/src/funnel/funnel.js +++ b/src/funnel/funnel.js @@ -1,5 +1,5 @@ import { itemPoint } from '../echarts-base' -import { getFormated, clone } from '../util' +import { getFormated } from '../util' import 'echarts/lib/chart/funnel' function getFunnelTooltip (dataType) { @@ -50,8 +50,8 @@ function getFunnelSeries (args) { } const funnel = (outerColumns, outerRows, settings, status) => { - const columns = clone(outerColumns) - const rows = clone(outerRows) + const columns = outerColumns.slice() + const rows = outerRows.slice() const { dataType = 'normal', dimension = columns[0], diff --git a/src/mixins.js b/src/mixins.js index 6f63123..47be9a4 100644 --- a/src/mixins.js +++ b/src/mixins.js @@ -10,7 +10,8 @@ const chartMixin = { grid: { type: Object }, colors: { type: Array }, tooltipVisible: { type: Boolean, default: true }, - legendVisible: { type: Boolean, default: true } + legendVisible: { type: Boolean, default: true }, + legendPosition: { type: String } }, watch: { @@ -57,6 +58,13 @@ const chartMixin = { if (this.colors) options.color = this.colors if (this.grid) options.grid = this.grid + if (this.legendPosition && options.legend) { + options.legend[this.legendPosition] = 10 + if (~['left', 'right'].indexOf(this.legendPosition)) { + options.legend.top = 'middle' + options.legend.orient = 'vertical' + } + } if (this.afterConfig) options = this.afterConfig(options) if (options) this.echarts.setOption(options, true) }, From 3728b9f6861ee732726883c32a78e77cdd69e839 Mon Sep 17 00:00:00 2001 From: quietcoder <1642965215@qq.com> Date: Thu, 15 Jun 2017 17:31:27 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E5=88=A0?= =?UTF-8?q?=E9=99=A4example=E4=B8=AD=E6=97=A0=E7=94=A8=E7=9A=84=E6=96=87?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/components/code-section.vue | 8 +- examples/components/sidebar.vue | 10 +- examples/data/bar.js | 70 ------------ examples/data/chart.js | 57 ---------- examples/data/funnel.js | 55 ---------- examples/data/histogram.js | 70 ------------ examples/data/index.js | 10 -- examples/data/line.js | 76 -------------- examples/data/pie.js | 78 -------------- examples/data/radar.js | 40 ------- examples/data/ring.js | 78 -------------- examples/data/waterfall.js | 63 ----------- examples/pages/eventer.vue | 9 +- examples/pages/install.vue | 128 +--------------------- examples/pages/item.vue | 152 --------------------------- examples/pages/starter.vue | 22 ---- examples/pages/test.vue | 4 +- examples/pages/toggle.vue | 7 +- examples/router.js | 4 - 19 files changed, 24 insertions(+), 917 deletions(-) delete mode 100644 examples/data/bar.js delete mode 100644 examples/data/chart.js delete mode 100644 examples/data/funnel.js delete mode 100644 examples/data/histogram.js delete mode 100644 examples/data/index.js delete mode 100644 examples/data/line.js delete mode 100644 examples/data/pie.js delete mode 100644 examples/data/radar.js delete mode 100644 examples/data/ring.js delete mode 100644 examples/data/waterfall.js delete mode 100644 examples/pages/item.vue delete mode 100644 examples/pages/starter.vue diff --git a/examples/components/code-section.vue b/examples/components/code-section.vue index bf54fd8..a563e59 100644 --- a/examples/components/code-section.vue +++ b/examples/components/code-section.vue @@ -1,5 +1,5 @@ - - diff --git a/examples/pages/item.vue b/examples/pages/item.vue deleted file mode 100644 index 95eccc7..0000000 --- a/examples/pages/item.vue +++ /dev/null @@ -1,152 +0,0 @@ - - - - - diff --git a/examples/pages/starter.vue b/examples/pages/starter.vue deleted file mode 100644 index e86eb5e..0000000 --- a/examples/pages/starter.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/examples/pages/test.vue b/examples/pages/test.vue index 74c69fa..c85c18b 100644 --- a/examples/pages/test.vue +++ b/examples/pages/test.vue @@ -7,7 +7,7 @@ import 'echarts/lib/chart/pie' import Vue from 'vue' import VePie from '../../src/pie/index' -import chartData from '../data/pie.js' +import chartData from '../test-data/pie.js' export default { name: 'Eventer', @@ -16,7 +16,7 @@ export default { const Ctor = Vue.extend(VePie) const vm = new Ctor({ propsData: { - data: chartData.data.base.data + data: chartData.data[0].data } }).$mount(this.$el) console.log(vm) diff --git a/examples/pages/toggle.vue b/examples/pages/toggle.vue index fb7b3b0..a52b582 100644 --- a/examples/pages/toggle.vue +++ b/examples/pages/toggle.vue @@ -27,7 +27,8 @@ import 'echarts/lib/chart/pie' import 'echarts/lib/chart/radar' import VeChart from '../../src/chart/index' const CONTENT_LIST = [ - '为了方便使用一份数据即可生成不同的表格，可以使用组件，切换图表类型则只需要改变settings即可' + '为了方便使用一份数据即可生成不同的表格，可以使用' + + '组件，切换图表类型则只需要改变settings即可' ] const CODE_LIST = [ '', @@ -98,7 +99,9 @@ export default { if (this.index === 2) this.index = 0 else this.index++ // this.dataSw = !this.dataSw - // this.chartData = this.dataSw ? this.chartDataStore : this.chartDataStore1 + // this.chartData = this.dataSw + // ? this.chartDataStore + // : this.chartDataStore1 }, init () { this.chartData = this.chartDataStore diff --git a/examples/router.js b/examples/router.js index 583cad8..72b5fb2 100644 --- a/examples/router.js +++ b/examples/router.js @@ -1,8 +1,6 @@ import Vue from 'vue' import Router from 'vue-router' import Install from './pages/install' -import Starter from './pages/starter' -import Item from './pages/item' import TestItem from './pages/test-item' import Eventer from './pages/eventer' import Toggle from './pages/toggle' @@ -13,8 +11,6 @@ Vue.use(Router) export default new Router({ routes: [ { path: '/', name: '安装', component: Install }, - { path: '/starter', name: '开始使用', component: Starter }, - { path: '/item/:type', name: '图表', component: Item }, { path: '/test-item/:type', name: '测试图表', component: TestItem }, { path: '/eventer', name: '事件监听', component: Eventer }, { path: '/toggle', name: '图表切换', component: Toggle }, From a9b7ca9128a197db8ae77fbdb743786f5d7a4b41 Mon Sep 17 00:00:00 2001 From: quietcoder <1642965215@qq.com> Date: Sun, 18 Jun 2017 21:21:34 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9Amark=20=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/bar/bar.js | 7 ++--- src/echarts-lib.js | 9 +++++- src/funnel/funnel.js | 4 +-- src/line/line.js | 4 +-- src/mixins.js | 60 ++++++++++++++++++++++++++++++-------- src/pie/pie.js | 8 ++--- src/radar/radar.js | 4 +-- src/waterfall/waterfall.js | 4 +-- test/index.js | 1 - test/polyfill.js | 18 ++++++------ 11 files changed, 81 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 10f0104..04c1b6e 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "v-charts", - "version": "1.1.6", + "version": "1.2.2", "description": "", "main": "lib/index.js", "scripts": { diff --git a/src/bar/bar.js b/src/bar/bar.js index c6ce905..71b93be 100755 --- a/src/bar/bar.js +++ b/src/bar/bar.js @@ -86,9 +86,8 @@ function getBarSeries (args) { }) }) series = Object.keys(seriesTemp).map(item => { - let itemName = item const seriesItem = { - name: itemName, + name: item, type: 'bar', data: seriesTemp[item], [secondDimAxisIndex]: ~secondAxis.indexOf(item) ? '1' : '0' @@ -102,14 +101,14 @@ function getBarSeries (args) { return series.length ? series : false } -const bar = (columns, rows, settings, status) => { +const bar = (columns, rows, settings, extra) => { const { axisSite = { top: [] }, dimension = [columns[0]], stack = {}, axisVisible = true } = settings - const { tooltipVisible, legendVisible } = status + const { tooltipVisible, legendVisible } = extra let metrics = columns.slice() if (settings.metrics) { metrics = settings.metrics diff --git a/src/echarts-lib.js b/src/echarts-lib.js index 1d27f60..05678ae 100644 --- a/src/echarts-lib.js +++ b/src/echarts-lib.js @@ -8,5 +8,12 @@ module.exports = [ 'echarts/lib/chart/scatter', 'echarts/lib/component/tooltip', 'echarts/lib/component/legend', - 'echarts/lib/component/title' + 'echarts/lib/component/title', + 'echarts/lib/component/markPoint', + 'echarts/lib/component/markLine', + 'echarts/lib/component/markArea', + 'echarts/lib/component/dataZoom', + 'echarts/lib/component/visualMap', + 'echarts/lib/component/timeline', + 'echarts/lib/component/toolbox' ] diff --git a/src/funnel/funnel.js b/src/funnel/funnel.js index b814006..f0979e6 100755 --- a/src/funnel/funnel.js +++ b/src/funnel/funnel.js @@ -49,7 +49,7 @@ function getFunnelSeries (args) { return series } -const funnel = (outerColumns, outerRows, settings, status) => { +const funnel = (outerColumns, outerRows, settings, extra) => { const columns = outerColumns.slice() const rows = outerRows.slice() const { @@ -58,7 +58,7 @@ const funnel = (outerColumns, outerRows, settings, status) => { sequence = rows.map(row => row[dimension]), ascending } = settings - const { tooltipVisible, legendVisible } = status + const { tooltipVisible, legendVisible } = extra let metrics if (settings.metrics) { metrics = settings.metrics diff --git a/src/line/line.js b/src/line/line.js index c88d549..e748d8e 100755 --- a/src/line/line.js +++ b/src/line/line.js @@ -113,7 +113,7 @@ function getLineTooltip (axisSite, yAxisType) { } } -const line = (columns, rows, settings, status) => { +const line = (columns, rows, settings, extra) => { const { axisSite = { right: [] }, yAxisType = ['normal', 'normal'], @@ -127,7 +127,7 @@ const line = (columns, rows, settings, status) => { min = [null, null], max = [null, null] } = settings - const { tooltipVisible, legendVisible } = status + const { tooltipVisible, legendVisible } = extra let metrics = columns.slice() if (settings.metrics) { diff --git a/src/mixins.js b/src/mixins.js index 47be9a4..7b01a2f 100644 --- a/src/mixins.js +++ b/src/mixins.js @@ -11,7 +11,12 @@ const chartMixin = { colors: { type: Array }, tooltipVisible: { type: Boolean, default: true }, legendVisible: { type: Boolean, default: true }, - legendPosition: { type: String } + legendPosition: { type: String }, + markLine: { type: Object }, + markArea: { type: Object }, + markPoint: { type: Object }, + visualMap: { type: [Object, Array] }, + dataZoom: { type: [Object, Array] } }, watch: { @@ -48,25 +53,56 @@ const chartMixin = { !Array.isArray(data.columns) || !Array.isArray(data.rows)) return false const { columns, rows } = data - const status = { + const extra = { tooltipVisible: this.tooltipVisible, legendVisible: this.legendVisible } if (this.beforeConfig) data = this.beforeConfig(data) - let options = this.chartHandler(columns, rows, this.settings, status) + let options = this.chartHandler(columns, rows, this.settings, extra) - if (this.colors) options.color = this.colors - if (this.grid) options.grid = this.grid - if (this.legendPosition && options.legend) { - options.legend[this.legendPosition] = 10 - if (~['left', 'right'].indexOf(this.legendPosition)) { - options.legend.top = 'middle' - options.legend.orient = 'vertical' + if (options) { + if (this.colors) options.color = this.colors + if (this.grid) options.grid = this.grid + if (this.legendPosition && options.legend) { + options.legend[this.legendPosition] = 10 + if (~['left', 'right'].indexOf(this.legendPosition)) { + options.legend.top = 'middle' + options.legend.orient = 'vertical' + } } + if (this.dataZoom) options.dataZoom = this.dataZoom + if (this.visualMap) options.visualMap = this.visualMap + if (this.markArea || this.markLine || this.markPoint) { + const marks = { + markArea: this.markArea, + markLine: this.markLine, + markPoint: this.markPoint + } + const series = options.series + if (this.getType(series) === '[object Array]') { + series.forEach(item => { + this.addMark(item, marks) + }) + } else if (this.getType(series) === '[object Object]') { + this.addMark(series, marks) + } + } + if (this.afterConfig) options = this.afterConfig(options) + this.echarts.setOption(options, true) } - if (this.afterConfig) options = this.afterConfig(options) - if (options) this.echarts.setOption(options, true) + }, + + addMark (seriesItem, marks) { + Object.keys(marks).forEach(key => { + if (marks[key]) { + seriesItem[key] = marks[key] + } + }) + }, + + getType (v) { + return Object.prototype.toString.call(v) }, init () { diff --git a/src/pie/pie.js b/src/pie/pie.js index 913cc07..fc7c049 100644 --- a/src/pie/pie.js +++ b/src/pie/pie.js @@ -70,7 +70,7 @@ function getPieTooltip (dataType) { } } -const pie = (columns, rows, settings, status, isRing) => { +const pie = (columns, rows, settings, extra, isRing) => { const { dataType = 'normal', percentShow, @@ -82,7 +82,7 @@ const pie = (columns, rows, settings, status, isRing) => { selectedMode = false, hoverAnimation = true } = settings - const { tooltipVisible, legendVisible } = status + const { tooltipVisible, legendVisible } = extra const seriesParams = { rows, dataType, @@ -101,8 +101,8 @@ const pie = (columns, rows, settings, status, isRing) => { return options } -const ring = (columns, rows, settings, status) => { - return pie(columns, rows, settings, status, true) +const ring = (columns, rows, settings, extra) => { + return pie(columns, rows, settings, extra, true) } export { pie, ring } diff --git a/src/radar/radar.js b/src/radar/radar.js index 34f5a68..e471d88 100755 --- a/src/radar/radar.js +++ b/src/radar/radar.js @@ -77,12 +77,12 @@ function getRadarSeries (args) { return series } -const radar = (columns, rows, settings, status) => { +const radar = (columns, rows, settings, extra) => { const { dataType = {}, dimension = columns[0] } = settings - const { tooltipVisible, legendVisible } = status + const { tooltipVisible, legendVisible } = extra let metrics = columns.slice() if (settings.metrics) { metrics = settings.metrics diff --git a/src/waterfall/waterfall.js b/src/waterfall/waterfall.js index 9ba3b7c..05f12eb 100644 --- a/src/waterfall/waterfall.js +++ b/src/waterfall/waterfall.js @@ -115,7 +115,7 @@ function getWaterfallRemainStatus (dataSum, totalNum) { return totalNum > dataSum ? 'have-remain' : 'none-remain' } -const waterfall = (columns, rows, settings, status) => { +const waterfall = (columns, rows, settings, extra) => { const { dataType = 'normal', dimension = columns[0], @@ -125,7 +125,7 @@ const waterfall = (columns, rows, settings, status) => { xAxisName = dimension, axisVisible = true } = settings - const { tooltipVisible } = status + const { tooltipVisible } = extra let metricsTemp = columns.slice() metricsTemp.splice(metricsTemp.indexOf(dimension), 1) const metrics = metricsTemp[0] diff --git a/test/index.js b/test/index.js index b0bbcb9..d133685 100644 --- a/test/index.js +++ b/test/index.js @@ -52,4 +52,3 @@ function testMount (type, comp) { }) }) } - diff --git a/test/polyfill.js b/test/polyfill.js index 6844506..a9b500e 100644 --- a/test/polyfill.js +++ b/test/polyfill.js @@ -1,21 +1,21 @@ -if (typeof Object.assign != 'function') { - Object.assign = function(target) { - 'use strict'; +if (typeof Object.assign !== 'function') { + Object.assign = function (target) { + 'use strict' if (target == null) { - throw new TypeError('Cannot convert undefined or null to object'); + throw new TypeError('Cannot convert undefined or null to object') } - target = Object(target); + target = Object(target) for (var index = 1; index < arguments.length; index++) { - var source = arguments[index]; + var source = arguments[index] if (source != null) { for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; + target[key] = source[key] } } } } - return target; - }; + return target + } } From 95361980e89c276c25bbdd05a22f952bee00586c Mon Sep 17 00:00:00 2001 From: quietcoder <1642965215@qq.com> Date: Sun, 18 Jun 2017 21:50:14 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 18 +++--------------- docs/README.md | 2 +- docs/histogram.md | 2 +- docs/props.md | 11 ++++++++--- docs/start.md | 2 +- docs/toggle.md | 2 +- 6 files changed, 15 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index bb2d170..8a1a17e 100755 --- a/README.md +++ b/README.md @@ -55,19 +55,7 @@ export default { ``` -> 目前支持的图表有 line, bar, histogram, waterfall, pie, ring, funnel, radar - - -### 属性 +### LICENSE --- -| 配置项 | 简介 | 类型 | 示例 | 备注 | -| --- | --- | --- | --- | --- | -| data | 图表数据 | Object | `{ columns: [], rows: [] }` | columns代表指标和维度名称， rows为数据内容 | -| settings | 图表配置项 | Object | `{ "yAxisType": [ "KMB", "percent" ] }` | | -| colors | 颜色列表 | Array | `[ "#19d4ae", "#5ab1ef", "#fa6e86", "#ffb980", "#0067a6", "#c4b4e4" ]` | | -| tooltip | 是否显示提示框 | Boolean | `false` | 默认为true | -| grid | 网格配置 | Object | `{ left: 20, right: 20 }` | | -| scale | 是否是脱离 0 值比例 | Object | `{ x: true, y: true }` | 设置成 true 后坐标刻度不会强制包含零刻度，默认都是false | -| events | 为图表绑定事件 | Object | `{ click: function (e) { console.log(e) } }` | | -| before-config | 对数据提前进行额外的处理 | Function | `function (data) { /* do something */return data; }` | 在数据转化为配置项开始前触发，参数为data，需返回表格数据 -| after-config | 对生成好的echarts配置进行额外的处理 | Function | `function (options) { /* do something */return options; }` | 在数据转化为配置项结束后触发，参数为options, 需返回echarts配置 + +MIT diff --git a/docs/README.md b/docs/README.md index 1c117cd..6953ee7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -11,7 +11,7 @@ npm i v-charts -S ```html - + ``` #### 示例 diff --git a/docs/histogram.md b/docs/histogram.md index fc10b31..17b2df9 100644 --- a/docs/histogram.md +++ b/docs/histogram.md @@ -2,7 +2,7 @@ #### 示例 - + #### settings 配置项 diff --git a/docs/props.md b/docs/props.md index f6eec83..c1f5275 100644 --- a/docs/props.md +++ b/docs/props.md @@ -9,7 +9,7 @@ V-Charts 的属性分为两种，一种是全部图表都具有的属性，例 | 配置项 | 简介 | 类型 | 备注 | | --- | --- | --- | --- | | data | 图表数据 | Object | columns 代表指标和维度名称，
rows 为数据内容 | -| width | 图表宽度 | String | 默认 100% | +| width | 图表宽度 | String | 默认 auto | | height | 图表高度 | String | 默认 400px | | settings | 图表配置项 | Object | 内容参考图表具体的配置 | | colors | 颜色列表 | Array | 默认
`['#19d4ae', '#5ab1ef', '#fa6e86',`
` '#ffb980', '#0067a6', '#c4b4e4',`
` '#d87a80', '#9cbbff', '#d9d0c7',`
` '#87a997', '#d49ea2', '#5b4947']` | @@ -18,8 +18,13 @@ V-Charts 的属性分为两种，一种是全部图表都具有的属性，例 | legend-position | 图例显示位置 | String | 可选`'left', 'top', 'right', 'bottom'` | | grid | 网格配置 | Object | 内容参考
http://echarts.baidu.com/option.html#grid | | events | 为图表绑定事件 | Object | 内容为包含事件名-事件处理函数的对象，例如
`{ click: function (e) { console.log(e) }}` | -| before-config | 对数据提前进行额外的处理 | Function | 在数据转化为配置项开始前触发
参数为 data
需返回表格数据 -| after-config | 对生成好的echarts配置
进行额外的处理 | Function | 在数据转化为配置项结束后触发
参数为 options
需返回 echarts 配置 +| before-config | 对数据提前进行额外的处理 | Function | 在数据转化为配置项开始前触发
参数为 data，返回值为表格数据 | +| after-config | 对生成好的echarts配置
进行额外的处理 | Function | 在数据转化为配置项结束后触发
参数为 options，返回值为 echarts 配置 | +| mark-line | 图表标线 | Object | 配置项内容对应echarts中关于markLine的部分 | +| mark-point | 图表标线 | Object | 配置项内容对应echarts中关于markPoint的部分 | +| mark-area | 图表标线 | Object | 配置项内容对应echarts中关于markArea的部分 | +| visualMap | 视觉映射组件 | Array, Object | 内容参考
http://echarts.baidu.com/option.html#visualMap | +| dataZoom | 视觉映射组件 | Array, Object | 内容参考
http://echarts.baidu.com/option.html#dataZoom | 另外一种是图表自身的属性，比如用户设置数据类型的`dataType`，这样的属性被置于settings内，每种图表的配置项不完全相同，具体参数参考下述图表文档中的配置项 diff --git a/docs/start.md b/docs/start.md index 966a2b2..9e7d89c 100644 --- a/docs/start.md +++ b/docs/start.md @@ -31,7 +31,7 @@ V-Charts的每种图表组件，都单独打包到lib文件夹下 |- lib/ |- line.js -------------- 折线图 |- bar.js --------------- 条形图 - |- histogram.js ------------ 柱状图 + |- histogram.js --------- 柱状图 |- pie.js --------------- 饼图 |- ring.js -------------- 环图 |- funnel.js ------------ 漏斗图 diff --git a/docs/toggle.md b/docs/toggle.md index e5cd908..e286caa 100644 --- a/docs/toggle.md +++ b/docs/toggle.md @@ -2,7 +2,7 @@ #### 示例 - 为了方便使用一份数据即可生成不同的表格，可以使用``组件，切换图表类型则只需要改变settings即可