图表切换
{{ contentList[0] }}
-
+
+
代码示例
@@ -21,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 = [
'',
@@ -89,10 +96,12 @@ 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/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 },
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/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/package.json b/package.json
index 6aa4940..04c1b6e 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "v-charts",
- "version": "1.1.5",
+ "version": "1.2.2",
"description": "",
"main": "lib/index.js",
"scripts": {
diff --git a/src/bar/bar.js b/src/bar/bar.js
index f293c6f..71b93be 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,11 +86,8 @@ 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]}`
const seriesItem = {
- name: itemName,
+ name: item,
type: 'bar',
data: seriesTemp[item],
[secondDimAxisIndex]: ~secondAxis.indexOf(item) ? '1' : '0'
@@ -105,14 +100,15 @@ function getBarSeries ({ rows, metrics, stack, axisSite, meaAxisType, isHistogra
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
@@ -124,11 +120,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 +149,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/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 2a8f360..f0979e6 100755
--- a/src/funnel/funnel.js
+++ b/src/funnel/funnel.js
@@ -1,36 +1,25 @@
-import { SIGN, itemPoint, getLegendName } from '../echarts-base'
-import { getFormated, clone } from '../util'
+import { itemPoint } from '../echarts-base'
+import { getFormated } 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]
}))
@@ -60,16 +49,16 @@ function getFunnelSeries ({ dimension, metrics, rows, sequence, dataType, ascend
return series
}
-const funnel = (outerColumns, outerRows, settings, status) => {
- const columns = clone(outerColumns)
- const rows = clone(outerRows)
+const funnel = (outerColumns, outerRows, settings, extra) => {
+ const columns = outerColumns.slice()
+ const rows = outerRows.slice()
const {
dataType = 'normal',
dimension = columns[0],
sequence = rows.map(row => row[dimension]),
ascending
} = settings
- const { tooltipVisible, legendVisible } = status
+ const { tooltipVisible, legendVisible } = extra
let metrics
if (settings.metrics) {
metrics = settings.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..e748d8e 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,22 @@ 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,
+ scale,
+ min,
+ max
+ } = args
+ const yAxisBase = {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ show: axisVisible
+ }
let yAxis = []
for (let i = 0; i < 2; i++) {
if (yAxisType[i]) {
@@ -85,11 +85,14 @@ function getLineYAxis ({ yAxisName, yAxisType, axisVisible }) {
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
}
-function getLineTooltip () {
+function getLineTooltip (axisSite, yAxisType) {
return {
trigger: 'axis',
formatter (items) {
@@ -97,10 +100,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('')
@@ -108,7 +113,7 @@ function getLineTooltip () {
}
}
-const line = (columns, rows, settings, status) => {
+const line = (columns, rows, settings, extra) => {
const {
axisSite = { right: [] },
yAxisType = ['normal', 'normal'],
@@ -117,9 +122,12 @@ 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
+ const { tooltipVisible, legendVisible } = extra
let metrics = columns.slice()
if (settings.metrics) {
@@ -128,11 +136,26 @@ 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 yAxisParams = {
+ yAxisName,
+ yAxisType,
+ axisVisible,
+ scale,
+ min,
+ max
+ }
+ const yAxis = getLineYAxis(yAxisParams)
+ const seriesParams = {
+ rows,
+ axisSite,
+ metrics,
+ area,
+ stack
+ }
+ 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..7b01a2f 100644
--- a/src/mixins.js
+++ b/src/mixins.js
@@ -10,7 +10,13 @@ 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 },
+ markLine: { type: Object },
+ markArea: { type: Object },
+ markPoint: { type: Object },
+ visualMap: { type: [Object, Array] },
+ dataZoom: { type: [Object, Array] }
},
watch: {
@@ -43,20 +49,60 @@ 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 = {
+ 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.afterConfig) options = this.afterConfig(options)
- if (options) this.echarts.setOption(options, true)
+ 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)
+ }
+ },
+
+ 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 c4878ab..fc7c049 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 }
@@ -59,7 +70,7 @@ function getPieTooltip (dataType) {
}
}
-const pie = (columns, rows, settings, status, isRing) => {
+const pie = (columns, rows, settings, extra, isRing) => {
const {
dataType = 'normal',
percentShow,
@@ -71,16 +82,27 @@ const pie = (columns, rows, settings, status, isRing) => {
selectedMode = false,
hoverAnimation = true
} = settings
- const { tooltipVisible, legendVisible } = status
- const series = getPieSeries({
- rows, dataType, percentShow, dimension, metrics, radius, offsetY, selectedMode, hoverAnimation
- })
+ const { tooltipVisible, legendVisible } = extra
+ 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, extra) => {
+ return pie(columns, rows, settings, extra, true)
+}
export { pie, ring }
diff --git a/src/radar/radar.js b/src/radar/radar.js
index 5db09fc..e471d88 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
@@ -76,21 +77,21 @@ function getRadarSeries ({ rows, dimension, metrics, radar }) {
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
} 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..05f12eb 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,12 +110,12 @@ 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'
}
-const waterfall = (columns, rows, settings, status) => {
+const waterfall = (columns, rows, settings, extra) => {
const {
dataType = 'normal',
dimension = columns[0],
@@ -105,17 +125,37 @@ 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]
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
}
diff --git a/test/index.js b/test/index.js
index b0bbcb9..f0964b6 100644
--- a/test/index.js
+++ b/test/index.js
@@ -1,5 +1,5 @@
import Vue from 'vue'
-import chartData from '../examples/data/index.js'
+import chartData from '../examples/test-data/index.js'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/bar'
@@ -44,7 +44,7 @@ function testMount (type, comp) {
const Ctor = Vue.extend(comp)
const vm = new Ctor({
propsData: {
- data: chartData[type].data.base.data
+ data: chartData[type].data[0].data
}
}).$mount(box)
@@ -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
+ }
}