From 9d5418cf09d8aee812450cf5063f3aa5717dcef1 Mon Sep 17 00:00:00 2001 From: liweina Date: Thu, 11 Mar 2021 15:54:19 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E9=9B=B7=E8=BE=BE=E5=9B=BE?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9D=90=E6=A0=87=E8=BD=B4/=E6=8C=87?= =?UTF-8?q?=E7=A4=BA=E5=99=A8/=E6=A0=87=E7=AD=BE=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/data/radar.js | 48 +++++++++++++ docs/chart-radar.md | 139 ++++++++++++++++++++++++++++++++++++ src/mixins/core.js | 2 + src/packages/radar/chart.js | 84 ++++++++++++++++++---- 4 files changed, 260 insertions(+), 13 deletions(-) diff --git a/app/data/radar.js b/app/data/radar.js index 8f4c40a..eeca946 100644 --- a/app/data/radar.js +++ b/app/data/radar.js @@ -13,6 +13,21 @@ const baseData = { ] } +const polarData = { + dimensions: [ + { name: '销售（sales）', max: 52000 }, + { name: '管理（Administration）', max: 52000 }, + { name: '信息技术（Information Techology）', max: 52000 }, + { name: '客服（Customer Support）', max: 52000 }, + { name: '研发（Development）', max: 52000 }, + { name: '市场（Marketing）', max: 52000 } + ], + measures: [ + { name: '预算分配（Allocated Budget）', data: [37000, 30000, 28000, 35000, 35000, 19000] }, + { name: '实际开销（Actual Spending）', data: [23000, 24000, 28000, 31000, 42000, 21000] } + ] +} + export default { name: '雷达图', type: 'radar', @@ -35,6 +50,39 @@ export default { } } }, + { + title: '雷达图设置 - 数据标签', + data: baseData, + settings: { + radius: 120, + splitNumber: 4, + shape: 'circle', + label: { + show: true, + color: 'auto', + fontFamily: 'MicroSoft YaHei', + fontSize: '12', + fontWeight: 'bold', + formatDigits: 0, + formatType: 'currency', + position: 'top' + } + } + }, + { + title: '雷达图(带刻度)', + data: polarData, + xprops: { + tickMarkVisible: true + }, + settings: { + radius: 120, + splitNumber: 4, + fontSize: 14, + color: 'rgba(64, 177, 126, 1)', + shape: 'circle' + } + }, { title: '自定义雷达图', data: baseData, diff --git a/docs/chart-radar.md b/docs/chart-radar.md index 4106341..06b88fe 100644 --- a/docs/chart-radar.md +++ b/docs/chart-radar.md @@ -100,6 +100,140 @@ } +## 雷达图 - 指示器 + + + + + +## 雷达图 - 数据标签 + + + + + +## 雷达图 - 刻度线 + + + + + ## 多雷达图 > 覆盖 `radar`及`series` 属性。 @@ -312,6 +446,7 @@ ## settings 配置项 +axisLabel | 配置项 | 简介 | 类型 | 用法 | | --- | --- | --- | --- | @@ -321,3 +456,7 @@ | shape | 雷达图绘制类型。支持 'polygon' 和 'circle' | String | 参见圆形雷达图 | | splitArea | 坐标轴在 grid 区域中的分隔区域，默认不显示 | Object | 参见圆形雷达图。具体配置项参考[文档](https://echarts.apache.org/zh/option.html#radar.splitArea) | | itemStyle | 图形样式 | Object | 参见基础雷达图(面积)。具体配置项参考[文档](https://echarts.apache.org/zh/option.html#series-radar.itemStyle) | +| name | 指示器样式 | Object | 参见配置雷达图。具体配置项参考[文档](https://echarts.apache.org/zh/option.html#radar.name) | +| label | 数据标签| Object | 参见配置雷达图。具体配置项参考[文档](https://echarts.apache.org/zh/option.html#series-radar.label) | +| axisLabel | 坐标轴刻度标签 | Object | 参见配置雷达图。具体配置项参考[文档](https://echarts.apache.org/zh/option.html#radiusAxis.axisLabel) | +| axisLine | 坐标轴轴线相关设置 | Object | 参见配置雷达图。具体配置项参考[文档](https://echarts.apache.org/zh/option.html#radiusAxis.axisLine) | diff --git a/src/mixins/core.js b/src/mixins/core.js index ad10d24..1bb2ead 100644 --- a/src/mixins/core.js +++ b/src/mixins/core.js @@ -57,6 +57,7 @@ export default { // ve-charts custom props tooltipVisible: { type: Boolean, default: true }, legendVisible: { type: Boolean, default: true }, + tickMarkVisible: { type: Boolean, default: false }, // 雷达图是否显示刻度 legendPosition: String, theme: [String, Object], loading: { type: Boolean, default: false }, @@ -128,6 +129,7 @@ export default { legendVisible: this.legendVisible, isEmptyData: this.isEmptyData, isEmptySeries: this.isEmptySeries, + tickMarkVisible: this.tickMarkVisible, _once: this._once } if (this.beforeConfig) data = this.beforeConfig(data) diff --git a/src/packages/radar/chart.js b/src/packages/radar/chart.js index c724d31..fcd0563 100644 --- a/src/packages/radar/chart.js +++ b/src/packages/radar/chart.js @@ -1,3 +1,4 @@ +import { formatMeasure } from '../../utils' import BaseChart from '../../BaseChart' class RadarChart extends BaseChart { @@ -20,13 +21,12 @@ class RadarChart extends BaseChart { static getRadarRadar (args) { const { data, settings } = args - const { offsetY = '50%', radius = '75%', splitNumber = 5, shape = 'polygon', splitArea = {} } = settings + const { offsetY = '50%', radius = '75%', splitNumber = 5, shape = 'polygon', splitArea = {}, name = {} } = settings return { name: { - textStyle: { - padding: [3, 5] - } + padding: [3, 5], + ...name }, center: ['50%', offsetY], radius, @@ -37,9 +37,28 @@ class RadarChart extends BaseChart { } } - static getRadarSeries (args) { - const { itemStyle } = args - const { measures } = args.data + static getRadarLabel (args) { + const { + formatType = 'currency', + formatDigits = 0, + ...others + } = args + const formatter = params => { + const { value } = params + // dataset formatter need shift the value + return formatMeasure(formatType, value, formatDigits) + } + return { + normal: { + formatter, + ...others + } + } + } + + static getRadarSeries ({ data, settings }) { + const { measures } = data + const { label, itemStyle } = settings const series = [] measures.forEach((data, idx) => { @@ -49,15 +68,53 @@ class RadarChart extends BaseChart { name: data.name, value: data.data }], + label: label && RadarChart.getRadarLabel(label), itemStyle: Object.assign({}, itemStyle) }) }) return series } + static getRadiusPolar ({ data, settings }) { + const { splitNumber = 5, offsetY = '50%', radius = '75%', axisLabel = {}, axisLine = {} } = settings + const max = data.dimensions[0].max + const min = 0 + const interval = (max - min) / splitNumber + + return { + polar: { + radius, + center: ['50%', offsetY] + }, + radiusAxis: { + min, + max, + interval: Math.round(interval * 100) / 100, + splitLine: { + show: false + }, + axisLabel, + axisLine + }, + angleAxis: { + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + axisLine: { + show: false + }, + splitLine: { + show: false + } + } + } + } + radar (data, settings, extra) { - const { tooltipVisible, legendVisible, isEmptyData } = extra - const { itemStyle } = settings + const { tooltipVisible, legendVisible, isEmptyData, tickMarkVisible } = extra if (isEmptyData) return {} @@ -67,18 +124,19 @@ class RadarChart extends BaseChart { const radar = RadarChart.getRadarRadar({ data, settings }) - const series = RadarChart.getRadarSeries({ data, itemStyle }) + const series = RadarChart.getRadarSeries({ data, settings }) + + const polarOptions = tickMarkVisible ? RadarChart.getRadiusPolar({ data, settings }) : {} // build echarts options const options = { tooltip, legend, radar, - series + series, + ...polarOptions } - // console.log(options) - return options } } From 8e9e850b8937cad1c323e7b5c440f3d7b7dcd606 Mon Sep 17 00:00:00 2001 From: liweina Date: Mon, 15 Mar 2021 17:34:19 +0800 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=E6=9F=B1=E7=8A=B6=E5=9B=BE?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9D=90=E6=A0=87=E8=BD=B4=E5=88=BB=E5=BA=A6?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=92=8C=E8=BD=B4=E7=BA=BF=E5=8F=AF=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E6=98=BE=E9=9A=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/data/bar.js | 16 ++++++++++++++ docs/chart-bar.md | 45 +++++++++++++++++++++++++++++++++++++++ src/packages/bar/chart.js | 26 +++++++++++++++++++--- 3 files changed, 84 insertions(+), 3 deletions(-) diff --git a/app/data/bar.js b/app/data/bar.js index 061f10c..17fe278 100644 --- a/app/data/bar.js +++ b/app/data/bar.js @@ -179,6 +179,22 @@ export default { direction: 'row' } }, + { + title: '设置坐标轴刻度标签和轴线显隐', + data: groupData, + settings: { + direction: 'row', + label: { + show: true, + fontSize: '12', + fontWeight: 'bold' + }, + xAxisLabelShow: false, + xAxisLineShow: false, + yAxisLabelShow: true, + yAxisLineShow: false + } + }, { title: '堆叠条形图', data: groupData, diff --git a/docs/chart-bar.md b/docs/chart-bar.md index 293f441..cfb5df8 100644 --- a/docs/chart-bar.md +++ b/docs/chart-bar.md @@ -214,6 +214,47 @@ } +## 设置坐标轴刻度标签和轴线显隐 + + + + + ## 对比条形图 @@ -661,3 +702,7 @@ | percentage | 是否是百分比堆叠柱状图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false` | | xAxisInverse | X轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#xAxis.inverse) | | yAxisInverse | Y轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) | +| yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | +| xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | \ No newline at end of file diff --git a/src/packages/bar/chart.js b/src/packages/bar/chart.js index b9042d5..1ab66af 100644 --- a/src/packages/bar/chart.js +++ b/src/packages/bar/chart.js @@ -48,14 +48,18 @@ class BarChart extends BaseChart { // build dimension Axis static getBarDimAxis (settings) { - const { dimAxisType } = settings + const { dimAxisType, dimAxisLineShow, dimAxisLabelShow } = settings const axisItem = { type: dimAxisType, + axisLine: { + show: Array.isArray(dimAxisLineShow) ? dimAxisLineShow[0] : dimAxisLineShow + }, axisTick: { show: false }, axisLabel: { + show: Array.isArray(dimAxisLabelShow) ? dimAxisLabelShow[0] : dimAxisLabelShow, margin: 10, fontWeight: 400 } @@ -70,6 +74,8 @@ class BarChart extends BaseChart { const { meaAxisType, meaAxisDigits, + meaAxisLineShow, + meaAxisLabelShow, yAxisScale = false, percentage = false, yAxisName, @@ -91,6 +97,7 @@ class BarChart extends BaseChart { const meaAxis = [] meaAxisType.forEach((type, i) => { const axisLabel = { + show: Array.isArray(meaAxisLabelShow) ? meaAxisLabelShow[i] : meaAxisLabelShow, margin: 10, fontWeight: 400 } @@ -103,9 +110,14 @@ class BarChart extends BaseChart { axisLabel.formatter = value => formatMeasure(type, value, meaAxisDigits) } } + const axisLine = { + show: Array.isArray(meaAxisLineShow) ? meaAxisLineShow[i] : meaAxisLineShow + } + const axisItem = { ...meaAxisBase, - axisLabel + axisLabel, + axisLine } if (yAxisName && yAxisName.length) { axisItem['name'] = yAxisName[i] @@ -204,9 +216,13 @@ class BarChart extends BaseChart { yAxisLabelType, yAxisLabelDigits = 0, yAxisName, + yAxisLabelShow = [true, true], + yAxisLineShow = [true, true], xAxisLabelType, xAxisLabelDigits = 0, - xAxisName + xAxisName, + xAxisLabelShow = true, + xAxisLineShow = true } = settings // 默认柱状图 @@ -218,9 +234,13 @@ class BarChart extends BaseChart { settings.meaAxisType = (isBar ? xAxisLabelType : yAxisLabelType) || defaultMeaAxisType settings.meaAxisDigits = isBar ? xAxisLabelDigits : yAxisLabelDigits settings.meaAxisName = (isBar ? xAxisName : yAxisName) || [] + settings.meaAxisLabelShow = (isBar ? xAxisLabelShow : yAxisLabelShow) + settings.meaAxisLineShow = (isBar ? xAxisLineShow : yAxisLineShow) settings.dimAxisType = (isBar ? yAxisLabelType : xAxisLabelType) || 'category' settings.dimAxisDigits = isBar ? yAxisLabelDigits : xAxisLabelDigits settings.dimAxisName = (isBar ? yAxisName : xAxisName) || '' + settings.dimAxisLabelShow = (isBar ? yAxisLabelShow : xAxisLabelShow) + settings.dimAxisLineShow = (isBar ? yAxisLineShow : xAxisLineShow) // 如果设置了双Y轴，将双Y轴统一设置 meaAxisType if (defaultMeaAxisType.length > settings.meaAxisType.length) { From 13f190fd1e66e920a034a8c2565c1f767ba5ad39 Mon Sep 17 00:00:00 2001 From: liweina Date: Wed, 17 Mar 2021 14:32:10 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=E6=8A=98=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9D=90=E6=A0=87=E8=BD=B4=E5=88=BB=E5=BA=A6?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=92=8C=E8=BD=B4=E7=BA=BF=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E6=98=BE=E9=9A=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/data/line.js | 14 +++++++++++ docs/chart-line.md | 49 ++++++++++++++++++++++++++++++++++++++ src/packages/line/chart.js | 18 ++++++++++---- 3 files changed, 77 insertions(+), 4 deletions(-) diff --git a/app/data/line.js b/app/data/line.js index b5f4f0f..3fcfa2d 100644 --- a/app/data/line.js +++ b/app/data/line.js @@ -163,6 +163,20 @@ export default { smooth: true } }, + { + title: '折线图设置 - 刻度标签、轴线显隐', + data: baseData, + settings: { + label: { + show: true, + fontSize: '12', + fontWeight: 'bold' + }, + smooth: true, + yAxisLabelShow: false, + yAxisLineShow: false + } + }, { title: '折线图使用 markArea', xprops: lineWithMarkArea diff --git a/docs/chart-line.md b/docs/chart-line.md index 5514d2b..f7e6fb5 100644 --- a/docs/chart-line.md +++ b/docs/chart-line.md @@ -274,6 +274,51 @@ } +## 折线图设置 - 刻度标签、轴线显隐 + + + + + ## 折线图设置 - 格式化Y轴 @@ -393,3 +438,7 @@ | percentage | 是否是百分比堆叠面积图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false` | | tooltipOptions | 配置tooltip提示框组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#tooltip) | | legendOptions | 配置图例组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#legend) | +| yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | +| xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js index af33ad8..2d13fea 100644 --- a/src/packages/line/chart.js +++ b/src/packages/line/chart.js @@ -24,16 +24,20 @@ class LineChart extends BaseChart { } } - static getLineDimAxis (args) { - const { settings } = args - const type = settings.yAxisType || 'category' + static getLineDimAxis ({ settings }) { + const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true } = settings + const type = yAxisType || 'category' return { type, boundaryGap: false, + axisLine: { + show: xAxisLineShow + }, axisTick: { show: false }, axisLabel: { + show: xAxisLabelShow, margin: 10, fontWeight: 400 } @@ -50,16 +54,22 @@ class LineChart extends BaseChart { yAxisInterval, yAxisMax, yAxisMin, - percentage = false + percentage = false, + yAxisLabelShow = true, + yAxisLineShow = true } = settings let axisValue = { type: 'value', scale: yAxisScale, + axisLine: { + show: yAxisLineShow + }, axisTick: { show: false }, axisLabel: { + show: yAxisLabelShow, margin: 10, fontWeight: 400, formatter: value => formatMeasure(yAxisLabelType, value, yAxisLabelDigits) From 05679384e109f7f5e92ea4a57f546079ced43bfe Mon Sep 17 00:00:00 2001 From: liweina Date: Wed, 17 Mar 2021 15:15:51 +0800 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=E6=8A=98=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9D=90=E6=A0=87=E8=BD=B4=E5=88=BB=E5=BA=A6?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A2=9C=E8=89=B2=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/data/line.js | 4 +++- docs/chart-line.md | 7 ++++++- src/packages/line/chart.js | 9 ++++++--- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/app/data/line.js b/app/data/line.js index 3fcfa2d..0129bec 100644 --- a/app/data/line.js +++ b/app/data/line.js @@ -160,7 +160,9 @@ export default { fontSize: '12', fontWeight: 'bold' }, - smooth: true + smooth: true, + yAxisLabelColor: 'rgba(209, 10, 220, 1)', + xAxisLabelColor: 'rgba(14, 33, 237, 1)' } }, { diff --git a/docs/chart-line.md b/docs/chart-line.md index f7e6fb5..22378c8 100644 --- a/docs/chart-line.md +++ b/docs/chart-line.md @@ -268,7 +268,9 @@ fontSize: '12', fontWeight: 'bold' }, - smooth: true + smooth: true, + yAxisLabelColor: 'rgba(209, 10, 220, 1)', + xAxisLabelColor: 'rgba(14, 33, 237, 1)' } } } @@ -439,6 +441,9 @@ | tooltipOptions | 配置tooltip提示框组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#tooltip) | | legendOptions | 配置图例组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#legend) | | yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| yAxisLabelColor | 纵坐标轴刻度标签文字颜色| String | - | 默认 null | | yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` | | xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | +| xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | | xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | + diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js index 2d13fea..bda75ed 100644 --- a/src/packages/line/chart.js +++ b/src/packages/line/chart.js @@ -25,7 +25,7 @@ class LineChart extends BaseChart { } static getLineDimAxis ({ settings }) { - const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true } = settings + const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor } = settings const type = yAxisType || 'category' return { type, @@ -39,7 +39,8 @@ class LineChart extends BaseChart { axisLabel: { show: xAxisLabelShow, margin: 10, - fontWeight: 400 + fontWeight: 400, + color: xAxisLabelColor || null } } } @@ -56,7 +57,8 @@ class LineChart extends BaseChart { yAxisMin, percentage = false, yAxisLabelShow = true, - yAxisLineShow = true + yAxisLineShow = true, + yAxisLabelColor } = settings let axisValue = { @@ -72,6 +74,7 @@ class LineChart extends BaseChart { show: yAxisLabelShow, margin: 10, fontWeight: 400, + color: yAxisLabelColor || null, formatter: value => formatMeasure(yAxisLabelType, value, yAxisLabelDigits) }, min: percentage ? 0 : null, From f822ca613fdaa7b331611732f62455fd450877ee Mon Sep 17 00:00:00 2001 From: liweina Date: Wed, 17 Mar 2021 15:59:20 +0800 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E6=9F=B1=E7=8A=B6=E5=9B=BE?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9D=90=E6=A0=87=E8=BD=B4=E5=88=BB=E5=BA=A6?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A2=9C=E8=89=B2=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/data/bar.js | 4 +++- docs/chart-bar.md | 6 +++++- src/packages/bar/chart.js | 15 +++++++++++---- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/app/data/bar.js b/app/data/bar.js index 17fe278..848a089 100644 --- a/app/data/bar.js +++ b/app/data/bar.js @@ -210,7 +210,9 @@ export default { data: mixinData, settings: { secondMeaAxis: 'Vue', - yAxisLabelType: ['en', 'zh'] + yAxisLabelType: ['en', 'zh'], + yAxisLabelColor: ['rgba(209, 10, 220, 1)', 'rgba(247, 14, 6, 1)'], + xAxisLabelColor: 'rgba(14, 33, 237, 1)' } }, { diff --git a/docs/chart-bar.md b/docs/chart-bar.md index cfb5df8..2bb2af5 100644 --- a/docs/chart-bar.md +++ b/docs/chart-bar.md @@ -450,7 +450,9 @@ }] } this.chartSettings = { - secondMeaAxis: 'Vue' + secondMeaAxis: 'Vue', + yAxisLabelColor: ['rgba(209, 10, 220, 1)', 'rgba(247, 14, 6, 1)'], + xAxisLabelColor: 'rgba(14, 33, 237, 1)' } } } @@ -703,6 +705,8 @@ | xAxisInverse | X轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#xAxis.inverse) | | yAxisInverse | Y轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) | | yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| yAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | | yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` | | xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | +| xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | | xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | \ No newline at end of file diff --git a/src/packages/bar/chart.js b/src/packages/bar/chart.js index 1ab66af..6a0f84b 100644 --- a/src/packages/bar/chart.js +++ b/src/packages/bar/chart.js @@ -48,7 +48,7 @@ class BarChart extends BaseChart { // build dimension Axis static getBarDimAxis (settings) { - const { dimAxisType, dimAxisLineShow, dimAxisLabelShow } = settings + const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor } = settings const axisItem = { type: dimAxisType, @@ -61,7 +61,8 @@ class BarChart extends BaseChart { axisLabel: { show: Array.isArray(dimAxisLabelShow) ? dimAxisLabelShow[0] : dimAxisLabelShow, margin: 10, - fontWeight: 400 + fontWeight: 400, + color: Array.isArray(dimAxisLabelColor) ? dimAxisLabelColor[0] : dimAxisLabelColor } } const disAxis = [] @@ -76,6 +77,7 @@ class BarChart extends BaseChart { meaAxisDigits, meaAxisLineShow, meaAxisLabelShow, + meaAxisLabelColor, yAxisScale = false, percentage = false, yAxisName, @@ -99,7 +101,8 @@ class BarChart extends BaseChart { const axisLabel = { show: Array.isArray(meaAxisLabelShow) ? meaAxisLabelShow[i] : meaAxisLabelShow, margin: 10, - fontWeight: 400 + fontWeight: 400, + color: Array.isArray(meaAxisLabelColor) ? meaAxisLabelColor[i] : meaAxisLabelColor } if (type !== 'normal') { // Y轴标签格式化后保留几位小数兼容之前版本类型 @@ -218,11 +221,13 @@ class BarChart extends BaseChart { yAxisName, yAxisLabelShow = [true, true], yAxisLineShow = [true, true], + yAxisLabelColor = [null, null], xAxisLabelType, xAxisLabelDigits = 0, xAxisName, xAxisLabelShow = true, - xAxisLineShow = true + xAxisLineShow = true, + xAxisLabelColor = null } = settings // 默认柱状图 @@ -236,11 +241,13 @@ class BarChart extends BaseChart { settings.meaAxisName = (isBar ? xAxisName : yAxisName) || [] settings.meaAxisLabelShow = (isBar ? xAxisLabelShow : yAxisLabelShow) settings.meaAxisLineShow = (isBar ? xAxisLineShow : yAxisLineShow) + settings.meaAxisLabelColor = (isBar ? xAxisLabelColor : yAxisLabelColor) settings.dimAxisType = (isBar ? yAxisLabelType : xAxisLabelType) || 'category' settings.dimAxisDigits = isBar ? yAxisLabelDigits : xAxisLabelDigits settings.dimAxisName = (isBar ? yAxisName : xAxisName) || '' settings.dimAxisLabelShow = (isBar ? yAxisLabelShow : xAxisLabelShow) settings.dimAxisLineShow = (isBar ? yAxisLineShow : xAxisLineShow) + settings.dimAxisLabelColor = (isBar ? yAxisLabelColor : xAxisLabelColor) // 如果设置了双Y轴，将双Y轴统一设置 meaAxisType if (defaultMeaAxisType.length > settings.meaAxisType.length) { From 722ff496c89161a91951146d79f6e4906e300fd1 Mon Sep 17 00:00:00 2001 From: liweina Date: Wed, 17 Mar 2021 18:11:48 +0800 Subject: [PATCH 06/10] =?UTF-8?q?fix:=20=E6=8A=98=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/chart-line.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/chart-line.md b/docs/chart-line.md index 22378c8..eb7ac5a 100644 --- a/docs/chart-line.md +++ b/docs/chart-line.md @@ -440,9 +440,9 @@ | percentage | 是否是百分比堆叠面积图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false` | | tooltipOptions | 配置tooltip提示框组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#tooltip) | | legendOptions | 配置图例组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#legend) | -| yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | | yAxisLabelColor | 纵坐标轴刻度标签文字颜色| String | - | 默认 null | -| yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` | +| yAxisLineShow | 纵坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | | xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | | xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | | xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | From aae5dad710d339666c0a210147294a5f596415cd Mon Sep 17 00:00:00 2001 From: liweina Date: Wed, 17 Mar 2021 18:38:21 +0800 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=E6=9F=B1=E7=8A=B6=E5=9B=BE?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=8F=8C=E7=BA=B5=E5=9D=90=E6=A0=87=E5=88=86?= =?UTF-8?q?=E5=88=AB=E7=BF=BB=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/chart-bar.md | 2 +- src/packages/bar/chart.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/chart-bar.md b/docs/chart-bar.md index 2bb2af5..7d30473 100644 --- a/docs/chart-bar.md +++ b/docs/chart-bar.md @@ -703,7 +703,7 @@ | yAxisName | 坐标轴名称 | Array | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.name) | | percentage | 是否是百分比堆叠柱状图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false` | | xAxisInverse | X轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#xAxis.inverse) | -| yAxisInverse | Y轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) | +| yAxisInverse | Y轴方向反向| Boolean/Array | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) | | yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean/Array | `true`/`false`| 默认 `true` | | yAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | | yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` | diff --git a/src/packages/bar/chart.js b/src/packages/bar/chart.js index 6a0f84b..30020e5 100644 --- a/src/packages/bar/chart.js +++ b/src/packages/bar/chart.js @@ -271,7 +271,7 @@ class BarChart extends BaseChart { // 处理X轴和Y轴翻转 const { yAxisInverse, xAxisInverse } = settings - if (yAxisInverse !== undefined) yAxis.forEach(i => { i.inverse = yAxisInverse }) + if (yAxisInverse !== undefined) yAxis.forEach((i, index) => { i.inverse = Array.isArray(yAxisInverse) ? yAxisInverse[index] : yAxisInverse }) if (xAxisInverse !== undefined) xAxis.forEach(i => { i.inverse = xAxisInverse }) // build echarts options From 2d87fd622f70157a417e760a529b45e11bf575dc Mon Sep 17 00:00:00 2001 From: liweina Date: Wed, 17 Mar 2021 18:55:34 +0800 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=E6=8A=98=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9D=90=E6=A0=87=E8=BD=B4=E7=BF=BB=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/data/line.js | 9 +++++++++ docs/chart-line.md | 2 ++ src/packages/line/chart.js | 7 +++++-- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/app/data/line.js b/app/data/line.js index 0129bec..2514163 100644 --- a/app/data/line.js +++ b/app/data/line.js @@ -179,6 +179,15 @@ export default { yAxisLineShow: false } }, + { + title: '折线图设置 - 坐标轴翻转', + data: simpleData, + settings: { + smooth: true, + xAxisInverse: true, + yAxisInverse: false + } + }, { title: '折线图使用 markArea', xprops: lineWithMarkArea diff --git a/docs/chart-line.md b/docs/chart-line.md index eb7ac5a..791e4e2 100644 --- a/docs/chart-line.md +++ b/docs/chart-line.md @@ -446,4 +446,6 @@ | xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | | xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | | xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | +| xAxisInverse | X轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#xAxis.inverse) | +| yAxisInverse | Y轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) | diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js index bda75ed..5ae05fc 100644 --- a/src/packages/line/chart.js +++ b/src/packages/line/chart.js @@ -25,7 +25,7 @@ class LineChart extends BaseChart { } static getLineDimAxis ({ settings }) { - const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor } = settings + const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false } = settings const type = yAxisType || 'category' return { type, @@ -41,7 +41,8 @@ class LineChart extends BaseChart { margin: 10, fontWeight: 400, color: xAxisLabelColor || null - } + }, + inverse: xAxisInverse } } @@ -55,6 +56,7 @@ class LineChart extends BaseChart { yAxisInterval, yAxisMax, yAxisMin, + yAxisInverse, percentage = false, yAxisLabelShow = true, yAxisLineShow = true, @@ -84,6 +86,7 @@ class LineChart extends BaseChart { if (yAxisInterval) axisValue['interval'] = Number(yAxisInterval) if (yAxisMax) axisValue['max'] = yAxisMax if (yAxisMin) axisValue['min'] = yAxisMin + if (yAxisInverse !== undefined) axisValue['inverse'] = yAxisInverse return axisValue } From 3e48792038cf0d7690f34f38ee084971ba82babf Mon Sep 17 00:00:00 2001 From: liweina Date: Thu, 18 Mar 2021 15:01:35 +0800 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=E6=9F=B1=E7=8A=B6=E5=9B=BE?= =?UTF-8?q?=E5=92=8C=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=96=B0=E5=A2=9E=E7=BB=B4?= =?UTF-8?q?=E5=BA=A6=E5=9D=90=E6=A0=87=E5=90=8D=E7=A7=B0=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/chart-bar.md | 1 + docs/chart-line.md | 1 + src/packages/bar/chart.js | 6 +++++- src/packages/line/chart.js | 5 +++-- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/chart-bar.md b/docs/chart-bar.md index 7d30473..e6633fb 100644 --- a/docs/chart-bar.md +++ b/docs/chart-bar.md @@ -701,6 +701,7 @@ | yAxisMin | 坐标轴刻度最小值 | Array | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.min) | | yAxisScale | 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度 | Boolean | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.scale) | | yAxisName | 坐标轴名称 | Array | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.name) | +| xAxisName | 坐标轴名称 | String | - | 参见[文档](https://echarts.apache.org/zh/option.html#xAxis.name) | | percentage | 是否是百分比堆叠柱状图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false` | | xAxisInverse | X轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#xAxis.inverse) | | yAxisInverse | Y轴方向反向| Boolean/Array | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) | diff --git a/docs/chart-line.md b/docs/chart-line.md index 791e4e2..7a734c8 100644 --- a/docs/chart-line.md +++ b/docs/chart-line.md @@ -437,6 +437,7 @@ | yAxisMin | 坐标轴刻度最小值 | Number | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.min) | | yAxisScale | 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度 | Boolean | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.scale) | | yAxisName | 坐标轴名称 | String | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.name) | +| xAxisName | 坐标轴名称 | String | - | 参见[文档](https://echarts.apache.org/zh/option.html#xAxis.name) | | percentage | 是否是百分比堆叠面积图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false` | | tooltipOptions | 配置tooltip提示框组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#tooltip) | | legendOptions | 配置图例组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#legend) | diff --git a/src/packages/bar/chart.js b/src/packages/bar/chart.js index 30020e5..46d380a 100644 --- a/src/packages/bar/chart.js +++ b/src/packages/bar/chart.js @@ -48,7 +48,7 @@ class BarChart extends BaseChart { // build dimension Axis static getBarDimAxis (settings) { - const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor } = settings + const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor, xAxisName } = settings const axisItem = { type: dimAxisType, @@ -65,6 +65,10 @@ class BarChart extends BaseChart { color: Array.isArray(dimAxisLabelColor) ? dimAxisLabelColor[0] : dimAxisLabelColor } } + if (xAxisName) { + axisItem.name = xAxisName + } + const disAxis = [] disAxis.push(axisItem) return disAxis diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js index 5ae05fc..1a153e0 100644 --- a/src/packages/line/chart.js +++ b/src/packages/line/chart.js @@ -25,7 +25,7 @@ class LineChart extends BaseChart { } static getLineDimAxis ({ settings }) { - const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false } = settings + const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false, xAxisName } = settings const type = yAxisType || 'category' return { type, @@ -42,7 +42,8 @@ class LineChart extends BaseChart { fontWeight: 400, color: xAxisLabelColor || null }, - inverse: xAxisInverse + inverse: xAxisInverse, + name: xAxisName !== undefined ? xAxisName : null } } From f103cf56f10f24dfb98e7c2149b159df4debc31d Mon Sep 17 00:00:00 2001 From: liweina Date: Thu, 18 Mar 2021 15:23:16 +0800 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=E6=9F=B1=E7=8A=B6=E5=9B=BE/?= =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=96=B0=E5=A2=9E=E7=BB=B4=E5=BA=A6?= =?UTF-8?q?=E8=BD=B4=E5=88=86=E9=9A=94=E7=BA=BF=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/chart-bar.md | 3 ++- docs/chart-line.md | 1 + src/packages/bar/chart.js | 6 +++++- src/packages/line/chart.js | 5 +++-- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/chart-bar.md b/docs/chart-bar.md index e6633fb..e1fc093 100644 --- a/docs/chart-bar.md +++ b/docs/chart-bar.md @@ -710,4 +710,5 @@ | yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` | | xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | | xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | -| xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | \ No newline at end of file +| xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | +| xAxisSplitLine | 坐标轴分隔线| Object | - | 默认不显示 | https://echarts.apache.org/zh/option.html#xAxis.splitLine | \ No newline at end of file diff --git a/docs/chart-line.md b/docs/chart-line.md index 7a734c8..2286f00 100644 --- a/docs/chart-line.md +++ b/docs/chart-line.md @@ -449,4 +449,5 @@ | xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` | | xAxisInverse | X轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#xAxis.inverse) | | yAxisInverse | Y轴方向反向| Boolean | `true`/`false` | 默认 `false` 参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) | +| xAxisSplitLine | 坐标轴分隔线| Object | - | 默认不显示 | https://echarts.apache.org/zh/option.html#xAxis.splitLine | diff --git a/src/packages/bar/chart.js b/src/packages/bar/chart.js index 46d380a..7fb84af 100644 --- a/src/packages/bar/chart.js +++ b/src/packages/bar/chart.js @@ -48,7 +48,7 @@ class BarChart extends BaseChart { // build dimension Axis static getBarDimAxis (settings) { - const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor, xAxisName } = settings + const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor, xAxisName, xAxisSplitLine } = settings const axisItem = { type: dimAxisType, @@ -69,6 +69,10 @@ class BarChart extends BaseChart { axisItem.name = xAxisName } + if (xAxisSplitLine) { + axisItem.splitLine = xAxisSplitLine + } + const disAxis = [] disAxis.push(axisItem) return disAxis diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js index 1a153e0..a471697 100644 --- a/src/packages/line/chart.js +++ b/src/packages/line/chart.js @@ -25,7 +25,7 @@ class LineChart extends BaseChart { } static getLineDimAxis ({ settings }) { - const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false, xAxisName } = settings + const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false, xAxisName, xAxisSplitLine } = settings const type = yAxisType || 'category' return { type, @@ -43,7 +43,8 @@ class LineChart extends BaseChart { color: xAxisLabelColor || null }, inverse: xAxisInverse, - name: xAxisName !== undefined ? xAxisName : null + name: xAxisName !== undefined ? xAxisName : null, + splitLine: xAxisSplitLine !== undefined ? xAxisSplitLine : null } }