mirror of
https://github.com/getrebuild/rebuild.git
synced 2024-09-20 23:45:55 +08:00
Chart option of render for Line/Bar
This commit is contained in:
parent
acdb4f0e77
commit
3ad73e56e5
|
@ -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") });
|
||||
}
|
||||
}
|
||||
|
|
|
@ -403,3 +403,11 @@ 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;
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue