diff --git a/app/data/bar.js b/app/data/bar.js index 061f10c..848a089 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, @@ -194,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/app/data/line.js b/app/data/line.js index b5f4f0f..2514163 100644 --- a/app/data/line.js +++ b/app/data/line.js @@ -160,7 +160,32 @@ export default { fontSize: '12', fontWeight: 'bold' }, - smooth: true + smooth: true, + yAxisLabelColor: 'rgba(209, 10, 220, 1)', + xAxisLabelColor: 'rgba(14, 33, 237, 1)' + } + }, + { + title: '折线图设置 - 刻度标签、轴线显隐', + data: baseData, + settings: { + label: { + show: true, + fontSize: '12', + fontWeight: 'bold' + }, + smooth: true, + yAxisLabelShow: false, + yAxisLineShow: false + } + }, + { + title: '折线图设置 - 坐标轴翻转', + data: simpleData, + settings: { + smooth: true, + xAxisInverse: true, + yAxisInverse: false } }, { 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-bar.md b/docs/chart-bar.md index 293f441..e1fc093 100644 --- a/docs/chart-bar.md +++ b/docs/chart-bar.md @@ -214,6 +214,47 @@ } +## 设置坐标轴刻度标签和轴线显隐 + + + + + ## 对比条形图 @@ -409,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)' } } } @@ -658,6 +701,14 @@ | 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 | `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` | +| xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` | +| xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null | +| 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 5514d2b..2286f00 100644 --- a/docs/chart-line.md +++ b/docs/chart-line.md @@ -268,7 +268,54 @@ fontSize: '12', fontWeight: 'bold' }, - smooth: true + smooth: true, + yAxisLabelColor: 'rgba(209, 10, 220, 1)', + xAxisLabelColor: 'rgba(14, 33, 237, 1)' + } + } + } + + +## 折线图设置 - 刻度标签、轴线显隐 + + + + +## 雷达图 - 指示器 + + + + + +## 雷达图 - 数据标签 + + + + + +## 雷达图 - 刻度线 + + + + + ## 多雷达图 > 覆盖 `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/bar/chart.js b/src/packages/bar/chart.js index b9042d5..7fb84af 100644 --- a/src/packages/bar/chart.js +++ b/src/packages/bar/chart.js @@ -48,18 +48,31 @@ class BarChart extends BaseChart { // build dimension Axis static getBarDimAxis (settings) { - const { dimAxisType } = settings + const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor, xAxisName, xAxisSplitLine } = 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 + fontWeight: 400, + color: Array.isArray(dimAxisLabelColor) ? dimAxisLabelColor[0] : dimAxisLabelColor } } + if (xAxisName) { + axisItem.name = xAxisName + } + + if (xAxisSplitLine) { + axisItem.splitLine = xAxisSplitLine + } + const disAxis = [] disAxis.push(axisItem) return disAxis @@ -70,6 +83,9 @@ class BarChart extends BaseChart { const { meaAxisType, meaAxisDigits, + meaAxisLineShow, + meaAxisLabelShow, + meaAxisLabelColor, yAxisScale = false, percentage = false, yAxisName, @@ -91,8 +107,10 @@ class BarChart extends BaseChart { const meaAxis = [] meaAxisType.forEach((type, i) => { 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轴标签格式化后保留几位小数兼容之前版本类型 @@ -103,9 +121,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 +227,15 @@ class BarChart extends BaseChart { yAxisLabelType, yAxisLabelDigits = 0, yAxisName, + yAxisLabelShow = [true, true], + yAxisLineShow = [true, true], + yAxisLabelColor = [null, null], xAxisLabelType, xAxisLabelDigits = 0, - xAxisName + xAxisName, + xAxisLabelShow = true, + xAxisLineShow = true, + xAxisLabelColor = null } = settings // 默认柱状图 @@ -218,9 +247,15 @@ 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.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) { @@ -244,7 +279,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 diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js index af33ad8..a471697 100644 --- a/src/packages/line/chart.js +++ b/src/packages/line/chart.js @@ -24,19 +24,27 @@ class LineChart extends BaseChart { } } - static getLineDimAxis (args) { - const { settings } = args - const type = settings.yAxisType || 'category' + static getLineDimAxis ({ settings }) { + const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false, xAxisName, xAxisSplitLine } = settings + const type = yAxisType || 'category' return { type, boundaryGap: false, + axisLine: { + show: xAxisLineShow + }, axisTick: { show: false }, axisLabel: { + show: xAxisLabelShow, margin: 10, - fontWeight: 400 - } + fontWeight: 400, + color: xAxisLabelColor || null + }, + inverse: xAxisInverse, + name: xAxisName !== undefined ? xAxisName : null, + splitLine: xAxisSplitLine !== undefined ? xAxisSplitLine : null } } @@ -50,18 +58,27 @@ class LineChart extends BaseChart { yAxisInterval, yAxisMax, yAxisMin, - percentage = false + yAxisInverse, + percentage = false, + yAxisLabelShow = true, + yAxisLineShow = true, + yAxisLabelColor } = settings let axisValue = { type: 'value', scale: yAxisScale, + axisLine: { + show: yAxisLineShow + }, axisTick: { show: false }, axisLabel: { + show: yAxisLabelShow, margin: 10, fontWeight: 400, + color: yAxisLabelColor || null, formatter: value => formatMeasure(yAxisLabelType, value, yAxisLabelDigits) }, min: percentage ? 0 : null, @@ -71,6 +88,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 } 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 } }