getrebuild/rebuild
1
1
Fork 0
mirror of https://github.com/getrebuild/rebuild.git synced 2024-09-20 15:35:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chart option of render for Line/Bar

Browse source
This commit is contained in:
devezhao-mbp 2020-04-28 01:15:24 +08:00
parent acdb4f0e77
commit 3ad73e56e5
4 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/main/java/com/rebuild/server/business/charts/LineChart.java
View file

@ -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") });
}
}

8
src/main/webapp/assets/css/chart-design.css
View file

@ -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;
}

33
src/main/webapp/assets/js/charts/charts.jsx
View file

@ -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 = [`<b>${i[0].name}</b>`]
@ -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: (<div className="chart line" id={elid}></div>) }, () => {
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: (<div className="chart bar" id={elid}></div>) }, () => {
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

3
src/main/webapp/dashboard/chart-design.jsp
View file

@ -56,6 +56,7 @@
<a title="雷达图" data-type="RADAR" data-allow-dims="1|1" data-allow-nums="1|3"><i class="C290"></i></a>
<a title="散点图" data-type="SCATTER" data-allow-dims="0|3" data-allow-nums="2|2"><i class="C280"></i></a>
<!--
<a title="对比图" data-type="BARNEGATIVE" data-allow-dims="1|1" data-allow-nums="2|2"><i class="C243"></i></a>
<a title="词云" data-type="DOLOR" data-allow-dims="1|1" data-allow-nums="0|0"><i class="C340"></i></a>
<a title="地图" data-type="CNMAP" data-allow-dims="1|1" data-allow-nums="1|1"><i class="C271"></i></a>
<a title="旭日图" data-type="SUNBURST" data-allow-dims="2|3" data-allow-nums="1|1"><i class="C360"></i></a>
@ -97,7 +98,7 @@
<div class="hide J_opt-LINE J_opt-BAR J_opt-SCATTER">
<label class="custom-control custom-control-sm custom-checkbox mb-2">
<input class="custom-control-input" type="checkbox" data-name="showGrid">
<span class="custom-control-label"> 显示网格线</span>
<span class="custom-control-label"> 显示参考线</span>
</label>
</div>
</div>