From f2b9beaeb93435aea7ebd49a4dc5b042b3e8db63 Mon Sep 17 00:00:00 2001 From: zimuZhao Date: Wed, 21 Apr 2021 17:38:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=85=AC=E5=85=B1?= =?UTF-8?q?=E7=B3=BB=E5=88=97=E9=85=8D=E7=BD=AE=E9=A1=B9'seriesOption'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/data/donut.js | 20 +++------ app/data/funnel.js | 83 ++++++++++++++++++------------------ app/data/geo.js | 36 +++++++--------- app/data/line.js | 68 ++++++++++++++++++++--------- app/data/pie.js | 60 +++++++++++++------------- app/data/radar.js | 3 +- app/views/Chart.vue | 1 + docs/base-options.md | 1 + docs/setting-demo.md | 46 +++++++++++++++++++- src/base-options.js | 25 ++++------- src/mixins/core.js | 17 +++++++- src/packages/funnel/chart.js | 28 +++++------- src/packages/geo/chart.js | 48 +++++++++------------ src/packages/line/chart.js | 17 ++------ src/packages/radar/chart.js | 6 +-- src/packages/tree/chart.js | 20 ++++----- 16 files changed, 257 insertions(+), 222 deletions(-) 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 } } }