diff --git a/app/data/donut.js b/app/data/donut.js
index e340dc7..8238df1 100644
--- a/app/data/donut.js
+++ b/app/data/donut.js
@@ -3,10 +3,11 @@ const baseData = {
name: '渠道',
data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
},
- measures: [{
- name: 'PV',
- data: [40000, 27800, 22000, 20200, 15600, 13600]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [40000, 27800, 22000, 20200, 15600, 13600]
+ }]
}
export default {
@@ -37,10 +38,8 @@ export default {
data: baseData,
settings: {
label: {
- normal: {
- show: false,
- position: 'center'
- },
+ show: false,
+ position: 'center',
emphasis: {
show: true,
textStyle: {
@@ -49,11 +48,6 @@ export default {
}
}
},
- labelLine: {
- normal: {
- show: false
- }
- },
avoidLabelOverlap: false
}
}
diff --git a/app/data/funnel.js b/app/data/funnel.js
index a0a104d..e2c527e 100644
--- a/app/data/funnel.js
+++ b/app/data/funnel.js
@@ -5,10 +5,11 @@ const baseData = {
name: '渠道',
data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
},
- measures: [{
- name: 'PV',
- data: [36000, 30000, 24000, 18000, 12000, 6000]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [36000, 30000, 24000, 18000, 12000, 6000]
+ }]
}
const compareData = {
@@ -16,13 +17,14 @@ const compareData = {
name: '渠道',
data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
},
- measures: [{
- name: 'PV',
- data: [100, 80, 60, 50, 40, 20]
- }, {
- name: 'UV',
- data: [80, 75, 50, 40, 32, 10]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [100, 80, 60, 50, 40, 20]
+ }, {
+ name: 'UV',
+ data: [80, 75, 50, 40, 32, 10]
+ }]
}
const sameData = {
@@ -30,16 +32,17 @@ const sameData = {
name: '渠道',
data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
},
- measures: [{
- name: 'PV',
- data: [36000, 28000, 24000, 20000, 12000, 6000]
- }, {
- name: 'PV',
- data: [36000, 28000, 24000, 20000, 12000, 6000]
- }, {
- name: 'PV',
- data: [36000, 28000, 24000, 20000, 12000, 6000]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [36000, 28000, 24000, 20000, 12000, 6000]
+ }, {
+ name: 'PV',
+ data: [36000, 28000, 24000, 20000, 12000, 6000]
+ }, {
+ name: 'PV',
+ data: [36000, 28000, 24000, 20000, 12000, 6000]
+ }]
}
export default {
@@ -77,6 +80,11 @@ export default {
data: compareData,
settings: {
contrast: true
+ },
+ seriesOption: {
+ 'PV': {
+ label: { show: false }
+ }
}
},
{
@@ -85,27 +93,21 @@ export default {
settings: {
funnelLabel: [
{
- normal: {
- position: 'right'
- }
+ position: 'right'
},
{
- normal: {
- position: 'left',
- formatter: function (params) {
- const [, value] = params.value
- return value
- }
+ position: 'left',
+ formatter: function (params) {
+ const [, value] = params.value
+ return value
}
},
{
- normal: {
- position: 'inside',
- formatter: function (params) {
- const [, value] = params.value
- const maxMea = max([36000, 28000, 24000, 20000, 12000, 6000])
- return `转化率 ${Math.round(value / maxMea * 100)} %`
- }
+ position: 'inside',
+ formatter: function (params) {
+ const [, value] = params.value
+ const maxMea = max([36000, 28000, 24000, 20000, 12000, 6000])
+ return `转化率 ${Math.round(value / maxMea * 100)} %`
}
}
]
@@ -129,8 +131,7 @@ export default {
{
title: '多个漏斗图',
data: compareData,
- settings: {
- },
+ settings: {},
xprops: {
series: [
{
@@ -139,9 +140,7 @@ export default {
left: '10%',
top: '15%',
label: {
- normal: {
- position: 'left'
- }
+ position: 'left'
}
},
{
diff --git a/app/data/geo.js b/app/data/geo.js
index 8dcefe1..d804f54 100644
--- a/app/data/geo.js
+++ b/app/data/geo.js
@@ -116,23 +116,19 @@ export default {
},
labelVisible: false,
label: {
- normal: {
- show: false,
- color: '#fff'
- },
+ show: false,
+ color: '#fff',
emphasis: {
show: false,
color: '#fff'
}
},
itemStyle: {
- normal: {
- areaColor: '#020933',
- borderColor: '#3fdaff',
- borderWidth: 1,
- shadowColor: 'rgba(63, 218, 255, 0.5)',
- shadowBlur: 30
- },
+ areaColor: '#020933',
+ borderColor: '#3fdaff',
+ borderWidth: 1,
+ shadowColor: 'rgba(63, 218, 255, 0.5)',
+ shadowBlur: 30,
emphasis: {
areaColor: '#2B91B7'
}
@@ -169,23 +165,23 @@ export default {
},
effectScatterLabelVisible: true,
effectScatterLabel: {
- normal: { position: 'left' }
+ normal: {
+ position: 'left'
+ }
},
visualMapVisible: true,
visualMap: {
inRange: {
- color: [ '#C6FFDD', '#FBD786', '#f7797d' ]
+ color: ['#C6FFDD', '#FBD786', '#f7797d']
}
},
symbolSize: 10,
itemStyle: {
- normal: {
- areaColor: '#020933',
- borderColor: '#3fdaff',
- borderWidth: 1,
- shadowColor: 'rgba(63, 218, 255, 0.5)',
- shadowBlur: 10
- },
+ areaColor: '#020933',
+ borderColor: '#3fdaff',
+ borderWidth: 1,
+ shadowColor: 'rgba(63, 218, 255, 0.5)',
+ shadowBlur: 10,
emphasis: {
areaColor: '#2B91B7'
}
diff --git a/app/data/line.js b/app/data/line.js
index 2514163..3263137 100644
--- a/app/data/line.js
+++ b/app/data/line.js
@@ -5,10 +5,11 @@ const simpleData = {
name: 'Week',
data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fir.', 'Sat.', 'Sun.']
},
- measures: [{
- name: 'Vue',
- data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
- }]
+ measures: [
+ {
+ name: 'Vue',
+ data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
+ }]
}
const numberData = {
@@ -16,10 +17,11 @@ const numberData = {
name: 'Week',
data: ['1', '2', '3', '4', '5', '6', '7']
},
- measures: [{
- name: 'Vue',
- data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
- }]
+ measures: [
+ {
+ name: 'Vue',
+ data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
+ }]
}
const baseData = {
@@ -30,18 +32,19 @@ const baseData = {
'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'
]
},
- measures: [{
- name: 'Vue',
- data: ['3000.12', 3500.33, 3900.23, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000]
- },
- {
- name: 'React',
- data: ['2000.34', '2000.23', 2600.87, 2300, 2300, 2000, 2600, 2200, 2500, 2800, 2500, 2200]
- },
- {
- name: 'Angular',
- data: ['827.56', 949.39, 1400.78, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930]
- }]
+ measures: [
+ {
+ name: 'Vue',
+ data: ['3000.12', 3500.33, 3900.23, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000]
+ },
+ {
+ name: 'React',
+ data: ['2000.34', '2000.23', 2600.87, 2300, 2300, 2000, 2600, 2200, 2500, 2800, 2500, 2200]
+ },
+ {
+ name: 'Angular',
+ data: ['827.56', 949.39, 1400.78, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930]
+ }]
}
export default {
@@ -191,6 +194,31 @@ export default {
{
title: '折线图使用 markArea',
xprops: lineWithMarkArea
+ },
+ {
+ title: '系列自定义',
+ data: baseData,
+ settings: {
+ smooth: true,
+ itemStyle: {
+ 'Vue': {
+ color: '#f4a'
+ },
+ 'React': {
+ color: '#af4'
+ },
+ 'Angular': {
+ color: '#4af'
+ }
+ }
+ },
+ seriesOption: {
+ 'Vue': {
+ itemStyle: { color: 'green' },
+ showSymbol: false,
+ lineStyle: { type: 'dotted' }
+ }
+ }
}
]
}
diff --git a/app/data/pie.js b/app/data/pie.js
index a80d07b..82f505a 100644
--- a/app/data/pie.js
+++ b/app/data/pie.js
@@ -3,10 +3,11 @@ const baseData = {
name: '渠道',
data: ['APP', 'M端', '微信', '手Q', '小程序', 'PC']
},
- measures: [{
- name: 'PV',
- data: [40000, 27800, 22000, 20200, 15600, 13600]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [40000, 27800, 22000, 20200, 15600, 13600]
+ }]
}
const numberData = {
@@ -14,10 +15,11 @@ const numberData = {
name: '渠道',
data: [1, 2, 3, 4, 5, 6]
},
- measures: [{
- name: 'PV',
- data: [40000, 27800, 22000, 20200, 15600, 13600]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [40000, 27800, 22000, 20200, 15600, 13600]
+ }]
}
const pieDonut = [
@@ -26,20 +28,22 @@ const pieDonut = [
name: '渠道',
data: ['移动设备', 'PC']
},
- measures: [{
- name: 'PV',
- data: [150000, 90000]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [150000, 90000]
+ }]
},
{
dimensions: {
name: '渠道',
data: ['APP', 'M端', '微信', '手Q', '小程序', 'PC']
},
- measures: [{
- name: 'PV',
- data: [40000, 30000, 20000, 50000, 10000, 90000]
- }]
+ measures: [
+ {
+ name: 'PV',
+ data: [40000, 30000, 20000, 50000, 10000, 90000]
+ }]
}
]
@@ -63,23 +67,19 @@ export default {
{
title: '环饼图',
data: pieDonut,
- settings: [{
- selectedMode: 'single',
- radius: [0, '30%'],
- labelLine: {
- normal: {
- show: false
- }
- },
- label: {
- normal: {
+ settings: [
+ {
+ selectedMode: 'single',
+ radius: [0, '30%'],
+ label: {
position: 'inner'
}
+ },
+ {
+ selectedMode: 'single',
+ radius: ['40%', '55%']
}
- }, {
- selectedMode: 'single',
- radius: ['40%', '55%']
- }]
+ ]
},
{
title: '南丁格尔玫瑰图（半径模式）',
diff --git a/app/data/radar.js b/app/data/radar.js
index eeca946..fa108f4 100644
--- a/app/data/radar.js
+++ b/app/data/radar.js
@@ -92,7 +92,8 @@ export default {
shape: 'circle',
splitArea: {
areaStyle: {
- color: ['rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)',
+ color: [
+ 'rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)',
'rgba(114, 172, 209, 0.6)', 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
diff --git a/app/views/Chart.vue b/app/views/Chart.vue
index 027cb7e..6f593f0 100644
--- a/app/views/Chart.vue
+++ b/app/views/Chart.vue
@@ -10,6 +10,7 @@
class="chart-demo"
:data="item.data"
:settings="item.settings"
+ :series-option="item.seriesOption"
:color="color"
:ec.sync="chart"
v-bind="item.xprops"
diff --git a/docs/base-options.md b/docs/base-options.md
index 9d90e61..a055980 100644
--- a/docs/base-options.md
+++ b/docs/base-options.md
@@ -137,6 +137,7 @@ data: {
| height | 图表高度 | Number | - | `400`，单位`px` |
| renderer | 渲染方式 | String | `canvas` or `svg` | `canvas` |
| ec | 通过 echarts.init 创建的实例 | Object | - | 使用 `.sync` 进行绑定 [参考API](https://echarts.baidu.com/api.html#echartsInstance) |
+| seriesOption | `series`系列配置项 | Object | - | [参考示例](setting-demo.md) |
| --- | --- | --- | --- | --- |
> Tips:
diff --git a/docs/setting-demo.md b/docs/setting-demo.md
index dcf7cc1..55bed26 100644
--- a/docs/setting-demo.md
+++ b/docs/setting-demo.md
@@ -761,4 +761,48 @@ module.exports = {
}
}
}
-
\ No newline at end of file
+
+
+## 系列配置项
+
+
+
+
diff --git a/src/base-options.js b/src/base-options.js
index 2d0ce1c..3b4b8e2 100644
--- a/src/base-options.js
+++ b/src/base-options.js
@@ -5,8 +5,7 @@ export const options = {
left: 10,
containLabel: true
},
- series: [
- ]
+ series: []
}
export const itemPoint = (color) => {
@@ -30,25 +29,19 @@ export const color = [
export const treemapLevels = [
{
itemStyle: {
- normal: {
- borderColor: '#fff'
- }
+ borderColor: '#fff'
}
}, {
colorSaturation: [0.3, 0.6],
itemStyle: {
- normal: {
- borderColorSaturation: 0.7,
- gapWidth: 5,
- borderWidth: 2
- }
+ borderColorSaturation: 0.7,
+ gapWidth: 5,
+ borderWidth: 2
}
}, {
colorSaturation: [0.3, 0.5],
itemStyle: {
- normal: {
- borderColorSaturation: 0.6
- }
+ borderColorSaturation: 0.6
}
}, {
colorSaturation: [0.3, 0.5]
@@ -57,10 +50,8 @@ export const treemapLevels = [
export const waterfallConfig = {
secondaryMeasure: {
- normal: {
- barBorderColor: 'rgba(0,0,0,0)',
- color: 'rgba(0,0,0,0)'
- },
+ barBorderColor: 'rgba(0,0,0,0)',
+ color: 'rgba(0,0,0,0)',
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
diff --git a/src/mixins/core.js b/src/mixins/core.js
index 1bb2ead..2f63a49 100644
--- a/src/mixins/core.js
+++ b/src/mixins/core.js
@@ -1,4 +1,4 @@
-import { cloneDeep, isNull, isEmpty, isUndefined, get } from 'lodash-es'
+import { cloneDeep, isNull, isEmpty, isUndefined, get, merge } from 'lodash-es'
import { getType } from '../utils'
import { color } from '../base-options'
@@ -63,7 +63,8 @@ export default {
loading: { type: Boolean, default: false },
emptyText: String,
renderer: { type: String, default: 'canvas' },
- height: { type: Number, default: 400 }
+ height: { type: Number, default: 400 },
+ seriesOption: { type: Object, default () { return {} } }
},
data () {
return {
@@ -170,9 +171,21 @@ export default {
options[key] = this.animation[key]
})
}
+ options.series = this.seriesHandler(options.series)
// Merge options
this.options = Object.assign(cloneDeep(this.options), options)
},
+ seriesHandler (series) {
+ if (!(series instanceof Array) || series.length === 0) return []
+
+ if (Object.keys(this.seriesOption).length === 0) return series
+
+ for (const [key, opt] of Object.entries(this.seriesOption)) {
+ const _idx = series.findIndex(v => v.name === key)
+ if (_idx > -1) merge(series[_idx], opt)
+ }
+ return series
+ },
init () {
if (this.data) this.dataHandler(this.data)
},
diff --git a/src/packages/funnel/chart.js b/src/packages/funnel/chart.js
index 8e94cbb..a9d66c1 100644
--- a/src/packages/funnel/chart.js
+++ b/src/packages/funnel/chart.js
@@ -77,22 +77,18 @@ class FunnelChart extends BaseChart {
}
}
let label = {
- normal: {
- position: labelPosition
- }
+ position: labelPosition
}
if (contrast) {
const contrastLabel = {
- normal: {
- position: 'inside',
- formatter: params => {
- const maxValue = measures.reduce((prev, next) => {
- return max([max(prev.data), max(next.data)])
- })
- const [, , mea2] = params.value
- return `${Math.round((mea2 / maxValue * 100), 2)}%`
- }
+ position: 'inside',
+ formatter: params => {
+ const maxValue = measures.reduce((prev, next) => {
+ return max([max(prev.data), max(next.data)])
+ })
+ const [, , mea2] = params.value
+ return `${Math.round((mea2 / maxValue * 100), 2)}%`
},
emphasis: {
position: 'inside',
@@ -111,15 +107,11 @@ class FunnelChart extends BaseChart {
if (symmetric) {
const rightLabel = {
- normal: {
- position: labelPosition !== 'outside' ? labelPosition : 'left'
- }
+ position: labelPosition !== 'outside' ? labelPosition : 'left'
}
const leftLabel = {
- normal: {
- position: labelPosition !== 'outside' ? labelPosition : 'right'
- }
+ position: labelPosition !== 'outside' ? labelPosition : 'right'
}
label = idx === 0 ? rightLabel : leftLabel
}
diff --git a/src/packages/geo/chart.js b/src/packages/geo/chart.js
index 48eeba1..6eb73e0 100644
--- a/src/packages/geo/chart.js
+++ b/src/packages/geo/chart.js
@@ -45,9 +45,7 @@ class GeoChart extends BaseChart {
...res[dataIndex],
symbolSize,
itemStyle: {
- normal: {
- shadowBlur: normalShadowBlur
- }
+ shadowBlur: normalShadowBlur
}
}
}
@@ -140,7 +138,7 @@ class GeoChart extends BaseChart {
measures && measures.forEach(({ name, data }, index) => {
const mapData = isMapMode ? data : isLinesMode ? GeoChart.convertLinesData(name, data) : GeoChart.convertCityData(data, { index, connect })
- const unShowLabel = { normal: { show: false }, emphasis: { show: false } }
+ const unShowLabel = { show: false, emphasis: { show: false } }
if (isLinesMode) {
name = GeoChart.convertCityName(name)
seriesData.push(
@@ -158,10 +156,8 @@ class GeoChart extends BaseChart {
...lineEffect
},
lineStyle: {
- normal: {
- width: 0,
- curveness: (lineStyle && lineStyle.curveness) || 0.2
- }
+ width: 0,
+ curveness: (lineStyle && lineStyle.curveness) || 0.2
},
data: mapData
},
@@ -179,13 +175,11 @@ class GeoChart extends BaseChart {
...overlayEffect
},
lineStyle: {
- normal: {
- color: '#ED3574',
- width: 1,
- opacity: 0.6,
- curveness: 0.2,
- ...lineStyle
- }
+ color: '#ED3574',
+ width: 1,
+ opacity: 0.6,
+ curveness: 0.2,
+ ...lineStyle
},
data: mapData
},
@@ -200,11 +194,9 @@ class GeoChart extends BaseChart {
brushType: 'stroke'
},
label: effectScatterLabelVisible ? {
- normal: {
- show: true,
- formatter: '{b}',
- ...effectScatterLabel.normal
- },
+ show: true,
+ formatter: '{b}',
+ ...effectScatterLabel.normal,
emphasis: {
...effectScatterLabel.emphasis
}
@@ -226,11 +218,9 @@ class GeoChart extends BaseChart {
brushType: 'stroke'
},
label: effectScatterLabelVisible ? {
- normal: {
- show: true,
- formatter: '{b}',
- ...effectScatterLabel.normal
- },
+ show: true,
+ formatter: '{b}',
+ ...effectScatterLabel.normal,
emphasis: {
...effectScatterLabel.emphasis
}
@@ -263,7 +253,8 @@ class GeoChart extends BaseChart {
}
if (!isMapMode) {
- seriesData[index] = { ...seriesData[index],
+ seriesData[index] = {
+ ...seriesData[index],
...{
coordinateSystem: 'geo',
label: unShowLabel,
@@ -275,7 +266,8 @@ class GeoChart extends BaseChart {
itemStyle: symbolColor ? {
color: symbolColor
} : {}
- } }
+ }
+ }
}
}
@@ -334,7 +326,7 @@ class GeoChart extends BaseChart {
roam = false,
mapName = 'china'
} = args.settings
- const unShowLabel = { normal: { show: false }, emphasis: { show: false } }
+ const unShowLabel = { show: false, emphasis: { show: false } }
const geo = {
map: mapName,
silent,
diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js
index a471697..f4a9c31 100644
--- a/src/packages/line/chart.js
+++ b/src/packages/line/chart.js
@@ -107,11 +107,9 @@ class LineChart extends BaseChart {
return formatMeasure(formatType, value[seriesIndex], formatDigits)
}
return {
- normal: {
- position,
- formatter,
- ...others
- }
+ position,
+ formatter,
+ ...others
}
}
@@ -132,20 +130,11 @@ class LineChart extends BaseChart {
const series = []
const stackMap = stack && getStackMap(stack)
- function getLineStyle (lineParams) {
- return {
- normal: {
- width: 2
- }
- }
- }
-
measures.forEach(({ name, data }, i) => {
series.push({
type: 'line',
name,
label: this.getLineLabel(label),
- lineStyle: getLineStyle(),
showSymbol,
smooth,
stack: stack && stackMap[name],
diff --git a/src/packages/radar/chart.js b/src/packages/radar/chart.js
index e5d5bb5..c79c442 100644
--- a/src/packages/radar/chart.js
+++ b/src/packages/radar/chart.js
@@ -49,10 +49,8 @@ class RadarChart extends BaseChart {
return formatMeasure(formatType, value, formatDigits)
}
return {
- normal: {
- formatter,
- ...others
- }
+ formatter,
+ ...others
}
}
diff --git a/src/packages/tree/chart.js b/src/packages/tree/chart.js
index ecffaea..bf48912 100644
--- a/src/packages/tree/chart.js
+++ b/src/packages/tree/chart.js
@@ -49,21 +49,17 @@ class TreeChart extends BaseChart {
}
return {
label: {
- normal: {
- position: labelPosition,
- verticalAlign: 'middle',
- align: labelAlign,
- rotate
- }
+ position: labelPosition,
+ verticalAlign: 'middle',
+ align: labelAlign,
+ rotate
},
leaves: {
label: {
- normal: {
- position: leavesPosition,
- verticalAlign: 'middle',
- align: leavesAlign,
- rotate
- }
+ position: leavesPosition,
+ verticalAlign: 'middle',
+ align: leavesAlign,
+ rotate
}
}
}