From 3ad73e56e55e88dc291a4b1ff2677127d3983308 Mon Sep 17 00:00:00 2001 From: devezhao-mbp Date: Tue, 28 Apr 2020 01:15:24 +0800 Subject: [PATCH] Chart option of render for Line/Bar --- .../server/business/charts/LineChart.java | 4 +-- src/main/webapp/assets/css/chart-design.css | 8 +++++ src/main/webapp/assets/js/charts/charts.jsx | 33 ++++++++++++------- src/main/webapp/dashboard/chart-design.jsp | 3 +- 4 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/main/java/com/rebuild/server/business/charts/LineChart.java b/src/main/java/com/rebuild/server/business/charts/LineChart.java index c9467b7b5..ddbef84e8 100644 --- a/src/main/java/com/rebuild/server/business/charts/LineChart.java +++ b/src/main/java/com/rebuild/server/business/charts/LineChart.java @@ -64,7 +64,7 @@ public class LineChart extends ChartData { } return JSONUtils.toJSONObject( - new String[] { "xAxis", "yyyAxis" }, - new Object[] { JSON.toJSON(dimAxis), JSON.toJSON(yyyAxis) }); + new String[] { "xAxis", "yyyAxis", "_renderOption" }, + new Object[] { JSON.toJSON(dimAxis), JSON.toJSON(yyyAxis), config.getJSONObject("option") }); } } diff --git a/src/main/webapp/assets/css/chart-design.css b/src/main/webapp/assets/css/chart-design.css index 7ca5f3021..33869ec07 100644 --- a/src/main/webapp/assets/css/chart-design.css +++ b/src/main/webapp/assets/css/chart-design.css @@ -402,4 +402,12 @@ a.ui-draggable.ui-draggable-dragging { .chart-type>a.active>i.C360 { background-position: -1372px -1464px; +} + +.chart-type>a>i.C243 { + background-position: -1322px -1288px; +} + +.chart-type>a.active>i.C243 { + background-position: -1290px -1288px; } \ No newline at end of file diff --git a/src/main/webapp/assets/js/charts/charts.jsx b/src/main/webapp/assets/js/charts/charts.jsx index a11493264..751e57249 100644 --- a/src/main/webapp/assets/js/charts/charts.jsx +++ b/src/main/webapp/assets/js/charts/charts.jsx @@ -190,6 +190,13 @@ const ECHART_AXIS_LABEL = { fontWeight: '400' } } +// Show value on chart +const ECHART_VALUE_LABEL = { + show: true, + formatter: function (a) { + return formatThousands(a.data) + } +} const ECHART_TOOLTIP_FORMATTER = function (i) { if (!Array.isArray(i)) i = [i] // Object > Array const tooltip = [`${i[0].name}`] @@ -203,8 +210,8 @@ const ECHART_RENDER_OPT = { } const shortNumber = function (num) { - if (num > 1000000) return (num / 1000000).toFixed(0) + 'W' - else if (num > 10000) return (num / 1000).toFixed(0) + 'K' + if (num > 1000000 || num < -1000000) return (num / 1000000).toFixed(0) + 'W' + else if (num > 10000 || num < -10000) return (num / 1000).toFixed(0) + 'K' else return num } @@ -233,6 +240,9 @@ class ChartLine extends BaseChart { const that = this const elid = 'echarts-line-' + (this.state.id || 'id') this.setState({ chartdata: (
) }, () => { + const showGrid = data._renderOption && data._renderOption.showGrid + const showNumerical = data._renderOption && data._renderOption.showNumerical + for (let i = 0; i < data.yyyAxis.length; i++) { const yAxis = data.yyyAxis[i] yAxis.type = 'line' @@ -242,6 +252,7 @@ class ChartLine extends BaseChart { normal: { borderWidth: 2 }, emphasis: { borderWidth: 6 } } + if (showNumerical) yAxis.label = ECHART_VALUE_LABEL yAxis.cursor = 'default' data.yyyAxis[i] = yAxis } @@ -258,13 +269,13 @@ class ChartLine extends BaseChart { }, yAxis: { type: 'value', - splitLine: { show: false }, + splitLine: { show: showGrid, lineStyle: { color: '#ddd' } }, axisLabel: { ...ECHART_AXIS_LABEL, formatter: shortNumber }, axisLine: { - lineStyle: { color: '#ddd', width: 0 } + lineStyle: { color: '#ddd', width: showGrid ? 1 : 0 } } }, series: data.yyyAxis @@ -292,15 +303,13 @@ class ChartBar extends BaseChart { const that = this const elid = 'echarts-bar-' + (this.state.id || 'id') this.setState({ chartdata: (
) }, () => { + const showGrid = data._renderOption && data._renderOption.showGrid + const showNumerical = data._renderOption && data._renderOption.showNumerical + for (let i = 0; i < data.yyyAxis.length; i++) { const yAxis = data.yyyAxis[i] yAxis.type = 'bar' - yAxis.smooth = true - yAxis.lineStyle = { width: 3 } - yAxis.itemStyle = { - normal: { borderWidth: 1 }, - emphasis: { borderWidth: 4 } - } + if (showNumerical) yAxis.label = ECHART_VALUE_LABEL yAxis.cursor = 'default' data.yyyAxis[i] = yAxis } @@ -317,13 +326,13 @@ class ChartBar extends BaseChart { }, yAxis: { type: 'value', - splitLine: { show: false }, + splitLine: { show: showGrid, lineStyle: { color: '#ddd' } }, axisLabel: { ...ECHART_AXIS_LABEL, formatter: shortNumber }, axisLine: { - lineStyle: { color: '#ddd', width: 0 } + lineStyle: { color: '#ddd', width: showGrid ? 1 : 0 } } }, series: data.yyyAxis diff --git a/src/main/webapp/dashboard/chart-design.jsp b/src/main/webapp/dashboard/chart-design.jsp index 769d73226..08c464fb7 100644 --- a/src/main/webapp/dashboard/chart-design.jsp +++ b/src/main/webapp/dashboard/chart-design.jsp @@ -56,6 +56,7 @@