Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 5027432b 编写于 作者: Y yufeng04
浏览文件
操作

support data[i].title/data[i].detail & add test

上级 dc988d18
隐藏空白更改
内联 并排
Showing with 242 addition and 256 deletion
src/chart/gauge/GaugeSeries.ts
浏览文件 @ 5027432b
......@@ -67,12 +67,20 @@ interface ProgressOption {
itemStyle?: ItemStyleOption
}
interface TitleDetailItemOption {
isCombination?: boolean
orient?: 'vertical' | 'horizontal'
width?: number
height?: number
itemGap?: number
interface TitleOption extends LabelOption {
/**
* [x, y] offset
*/
offsetCenter?: (number | string)[]
formatter?: LabelFormatter | string
}
interface DetailOption extends LabelOption {
/**
* [x, y] offset
*/
offsetCenter?: (number | string)[]
formatter?: LabelFormatter | string
}
export interface GaugeStateOption {
......@@ -84,6 +92,8 @@ export interface GaugeDataItemOption extends GaugeStateOption, StatesOptionMixin
value?: OptionDataValueNumeric
pointer?: PointerOption
progress?: ProgressOption
title?: TitleOption
detail?: DetailOption
}
export interface GaugeSeriesOption extends SeriesOption<GaugeStateOption>, GaugeStateOption,
CircleLayoutOptionMixin {
......@@ -140,22 +150,9 @@ export interface GaugeSeriesOption extends SeriesOption<GaugeStateOption>, Gauge
pointer?: PointerOption
anchor?: AnchorOption
titleDetailItem?: TitleDetailItemOption
title?: LabelOption & {
/**
* [x, y] offset
*/
offsetCenter?: (number | string)[]
formatter?: LabelFormatter | string
}
detail?: LabelOption & {
/**
* [x, y] offset
*/
offsetCenter?: (number | string)[]
formatter?: LabelFormatter | string
}
title?: TitleOption
detail?: DetailOption
data?: (OptionDataValueNumeric | GaugeDataItemOption)[]
}
......@@ -262,14 +259,6 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
}
},
titleDetailItem: {
isCombination: false,
orient: 'horizontal',
width: 0,
height: 0,
itemGap: 10
},
title: {
show: true,
// x, y，单位px
......
src/chart/gauge/GaugeView.ts
浏览文件 @ 5027432b
......@@ -181,19 +181,9 @@ class GaugeView extends ChartView {
this._renderAnchor(seriesModel, posInfo);
// if (isRenderTogather) {
this._renderTitleAndDetail(
seriesModel, ecModel, api, getColor, posInfo
)
// }
// else {
// this._renderTitle(
// seriesModel, ecModel, api, getColor, posInfo
// );
// this._renderDetail(
// seriesModel, ecModel, api, getColor, posInfo
// );
// }
this._renderTitleAndDetail(
seriesModel, ecModel, api, getColor, posInfo
)
}
_renderTicks(
......@@ -557,45 +547,29 @@ class GaugeView extends ChartView {
getColor: (percent: number) => ColorString,
posInfo: PosInfo
) {
const titleDetailModel = seriesModel.getModel('titleDetailItem');
const titleModel = seriesModel.getModel('title');
const detailModel = seriesModel.getModel('detail');
const showTogather = titleDetailModel.get('isCombination');
const showTitle = titleModel.get('show');
const showDetail = detailModel.get('show');
if (!showDetail && !showTitle && !showTogather) {
return;
}
const data = seriesModel.getData();
const valueDim = data.mapDimension('value');
const minVal = +seriesModel.get('min');
const maxVal = +seriesModel.get('max');
const contentGroup = new graphic.Group;
const titleOffsetCenter = titleModel.get('offsetCenter');
const titleX = posInfo.cx + parsePercent(titleOffsetCenter[0], posInfo.r);
const titleY = posInfo.cy + parsePercent(titleOffsetCenter[1], posInfo.r);
const detailOffsetCenter = detailModel.get('offsetCenter');
const detailX = posInfo.cx + parsePercent(detailOffsetCenter[0], posInfo.r);
const detailY = posInfo.cy + parsePercent(detailOffsetCenter[1], posInfo.r);
const width = parsePercent(detailModel.get('width'), posInfo.r);
const height = parsePercent(detailModel.get('height'), posInfo.r);
data.each(function(idx) {
const itemGroup = new graphic.Group;
const value = data.get(valueDim, idx) as number;
const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
const value = data.get(valueDim, idx) as number;
const itemGroup = new graphic.Group;
const autoColor = getColor(
linearMap(value, [minVal, maxVal], [0, 1], true)
);
if (showTitle || showTogather) {
const itemTitleModel = itemModel.getModel('title');
if (itemTitleModel.get('show')) {
const titleOffsetCenter = itemTitleModel.get('offsetCenter');
const titleX = posInfo.cx + parsePercent(titleOffsetCenter[0], posInfo.r);
const titleY = posInfo.cy + parsePercent(titleOffsetCenter[1], posInfo.r);
itemGroup.add(new graphic.Text({
silent: true,
style: createTextStyle(titleModel, {
style: createTextStyle(itemTitleModel, {
x: titleX,
y: titleY,
text: data.getName(idx),
......@@ -605,115 +579,37 @@ class GaugeView extends ChartView {
}));
}
if (showDetail || showTogather) {
const progressColor = data.getItemVisual(idx, 'style').fill as string;
const itemDetailModel = itemModel.getModel('detail');
if (itemDetailModel.get('show')) {
const detailOffsetCenter = itemDetailModel.get('offsetCenter');
const detailX = posInfo.cx + parsePercent(detailOffsetCenter[0], posInfo.r);
const detailY = posInfo.cy + parsePercent(detailOffsetCenter[1], posInfo.r);
const width = parsePercent(itemDetailModel.get('width'), posInfo.r);
const height = parsePercent(itemDetailModel.get('height'), posInfo.r);
const detailColor = (
seriesModel.get(['progress', 'show']) ? data.getItemVisual(idx, 'style').fill : autoColor
) as string;
itemGroup.add(new graphic.Text({
silent: true,
style: createTextStyle(detailModel, {
style: createTextStyle(itemDetailModel, {
x: detailX,
y: detailY,
text: formatLabel(
value, detailModel.get('formatter')
value, itemDetailModel.get('formatter')
),
width: isNaN(width) ? null : width,
height: isNaN(height) ? null : height,
align: 'center',
verticalAlign: 'middle'
}, {inheritColor: showTogather ? progressColor : autoColor})
}, {inheritColor: detailColor})
}));
}
contentGroup.add(itemGroup);
});
if (showTogather) {
layoutUtil.box(
titleDetailModel.get('orient'),
contentGroup,
titleDetailModel.get('itemGap'),
titleDetailModel.get('width'),
titleDetailModel.get('height')
);
}
this.group.add(contentGroup);
}
_renderTitle(
seriesModel: GaugeSeriesModel,
ecModel: GlobalModel,
api: ExtensionAPI,
getColor: (percent: number) => ColorString,
posInfo: PosInfo
) {
const data = seriesModel.getData();
const valueDim = data.mapDimension('value');
const titleModel = seriesModel.getModel('title');
if (titleModel.get('show')) {
const offsetCenter = titleModel.get('offsetCenter');
const x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r);
const y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r);
const minVal = +seriesModel.get('min');
const maxVal = +seriesModel.get('max');
const value = seriesModel.getData().get(valueDim, 0) as number;
const autoColor = getColor(
linearMap(value, [minVal, maxVal], [0, 1], true)
);
this.group.add(new graphic.Text({
silent: true,
style: createTextStyle(titleModel, {
x: x,
y: y,
// FIXME First data name ?
text: data.getName(0),
align: 'center',
verticalAlign: 'middle'
}, {inheritColor: autoColor})
}));
}
}
_renderDetail(
seriesModel: GaugeSeriesModel,
ecModel: GlobalModel,
api: ExtensionAPI,
getColor: (percent: number) => ColorString,
posInfo: PosInfo
) {
const detailModel = seriesModel.getModel('detail');
const minVal = +seriesModel.get('min');
const maxVal = +seriesModel.get('max');
if (detailModel.get('show')) {
const offsetCenter = detailModel.get('offsetCenter');
const x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r);
const y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r);
const width = parsePercent(detailModel.get('width'), posInfo.r);
const height = parsePercent(detailModel.get('height'), posInfo.r);
const data = seriesModel.getData();
const value = data.get(data.mapDimension('value'), 0) as number;
const autoColor = getColor(
linearMap(value, [minVal, maxVal], [0, 1], true)
);
this.group.add(new graphic.Text({
silent: true,
style: createTextStyle(detailModel, {
x: x,
y: y,
text: formatLabel(
// FIXME First data name ?
value, detailModel.get('formatter')
),
width: isNaN(width) ? null : width,
height: isNaN(height) ? null : height,
align: 'center',
verticalAlign: 'middle'
}, {inheritColor: autoColor})
}));
}
}
}
ChartView.registerClass(GaugeView);
......
test/gauge-group-title-detail.html
浏览文件 @ 5027432b
......@@ -80,19 +80,39 @@ under the License.
roundCap: true
},
data: [
{value: 20, name: '完成率'},
{value: 40, name: '达标率'},
{value: 60, name: '优秀率'}
{
value: 20,
name: '完成率',
title: {
offsetCenter: ['-40%', '20%']
},
detail: {
offsetCenter: ['-40%', '35%']
}
},
{
value: 40,
name: '达标率',
title: {
offsetCenter: ['0%', '20%']
},
detail: {
offsetCenter: ['0%', '35%']
}
},
{
value: 60,
name: '优秀率',
title: {
offsetCenter: ['40%', '20%']
},
detail: {
offsetCenter: ['40%', '35%']
}
}
],
titleDetailItem: {
isCombination: true,
orient: 'horizontal',
width: '100%',
itemGap: 10
},
title: {
fontSize: 14,
offsetCenter: ['-40%', '20%']
fontSize: 14
},
detail: {
width: 30,
......@@ -103,19 +123,15 @@ under the License.
borderWidth: 1,
borderRadius: 3,
formatter: '{value}%',
offsetCenter: ['-40%', '35%']
},
}
]
};
var chart = testHelper.create(echarts, 'main0', {
title: [
'default style'
'detail with border'
],
option: option
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
......@@ -150,27 +166,46 @@ under the License.
roundCap: true
},
data: [
{value: 20, name: '完成率'},
{value: 40, name: '达标率'},
{value: 60, name: '优秀率'}
{
value: 20,
name: '完成率',
title: {
offsetCenter: ['-40%', '20%']
},
detail: {
offsetCenter: ['-40%', '35%']
}
},
{
value: 40,
name: '达标率',
title: {
offsetCenter: ['0%', '20%']
},
detail: {
offsetCenter: ['0%', '35%']
}
},
{
value: 60,
name: '优秀率',
title: {
offsetCenter: ['40%', '20%']
},
detail: {
offsetCenter: ['40%', '35%']
}
}
],
titleDetailItem: {
isCombination: true,
orient: 'horizontal',
width: '100%',
itemGap: 10
},
title: {
fontSize: 14,
offsetCenter: ['-40%', '20%']
fontSize: 14
},
detail: {
width: 30,
height: 12,
fontSize: 12,
color: 'auto',
formatter: '{value}%',
offsetCenter: ['-40%', '35%']
formatter: '{value}%'
}
}
]
......@@ -180,9 +215,6 @@ under the License.
'detail without border'
],
option: option1
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
setInterval(function () {
option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
......@@ -217,19 +249,39 @@ under the License.
roundCap: true
},
data: [
{value: 20, name: '完成率'},
{value: 40, name: '达标率'},
{value: 60, name: '优秀率'}
{
value: 20,
name: '完成率',
title: {
offsetCenter: ['-40%', '20%']
},
detail: {
offsetCenter: ['-40%', '35%']
}
},
{
value: 40,
name: '达标率',
title: {
offsetCenter: ['0%', '20%']
},
detail: {
offsetCenter: ['0%', '35%']
}
},
{
value: 60,
name: '优秀率',
title: {
offsetCenter: ['40%', '20%']
},
detail: {
offsetCenter: ['40%', '35%']
}
}
],
titleDetailItem: {
isCombination: true,
orient: 'horizontal',
width: '100%',
itemGap: 10
},
title: {
fontSize: 14,
offsetCenter: ['-40%', '20%']
fontSize: 14
},
detail: {
width: 30,
......@@ -238,20 +290,16 @@ under the License.
color: '#fff',
backgroundColor: 'auto',
borderRadius: 3,
formatter: '{value}%',
offsetCenter: ['-40%', '35%']
formatter: '{value}%'
}
}
]
};
var chart2 = testHelper.create(echarts, 'main2', {
title: [
'detail with backgroundColor'
'detail with backgroundColor (not recommended)'
],
option: option2
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
setInterval(function () {
option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
......@@ -286,19 +334,39 @@ under the License.
roundCap: true
},
data: [
{value: 20, name: '完成率'},
{value: 40, name: '达标率'},
{value: 60, name: '优秀率'}
{
value: 20,
name: '完成率',
title: {
offsetCenter: ['0%', '20%']
},
detail: {
offsetCenter: ['0%', '35%']
}
},
{
value: 40,
name: '达标率',
title: {
offsetCenter: ['0%', '55%']
},
detail: {
offsetCenter: ['0%', '70%']
}
},
{
value: 60,
name: '优秀率',
title: {
offsetCenter: ['0%', '90%']
},
detail: {
offsetCenter: ['0%', '105%']
}
}
],
titleDetailItem: {
isCombination: true,
orient: 'vertical',
height: '100%',
itemGap: 10
},
title: {
fontSize: 14,
offsetCenter: ['0', '20%']
fontSize: 14
},
detail: {
width: 30,
......@@ -308,20 +376,16 @@ under the License.
borderColor: 'auto',
borderRadius: 3,
borderWidth: 1,
formatter: '{value}%',
offsetCenter: ['0', '35%']
formatter: '{value}%'
},
}
]
};
var chart3 = testHelper.create(echarts, 'main3', {
title: [
'the orient is vertical (not recommended)'
'the orient is vertical'
],
option: option3
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
setInterval(function () {
option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
......@@ -356,19 +420,39 @@ under the License.
roundCap: true
},
data: [
{value: 20, name: '完成率'},
{value: 40, name: '达标率'},
{value: 60, name: '优秀率'}
{
value: 20,
name: '完成率',
title: {
offsetCenter: ['-40%', '80%']
},
detail: {
offsetCenter: ['-40%', '95%']
}
},
{
value: 40,
name: '达标率',
title: {
offsetCenter: ['0%', '80%']
},
detail: {
offsetCenter: ['0%', '95%']
}
},
{
value: 60,
name: '优秀率',
title: {
offsetCenter: ['40%', '80%']
},
detail: {
offsetCenter: ['40%', '95%']
}
}
],
titleDetailItem: {
isCombination: true,
orient: 'horizontal',
width: '100%',
itemGap: 10
},
title: {
fontSize: 14,
offsetCenter: ['-40%', '80%']
fontSize: 14
},
detail: {
width: 30,
......@@ -379,8 +463,7 @@ under the License.
borderColor: 'auto',
borderWidth: 1,
// backgroundColor: 'auto',
formatter: '{value}%',
offsetCenter: ['-40%', '95%']
formatter: '{value}%'
},
}
]
......@@ -390,9 +473,6 @@ under the License.
'out of gauge'
],
option: option4
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
setInterval(function () {
option4.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
......@@ -427,19 +507,39 @@ under the License.
roundCap: true
},
data: [
{value: 20, name: '完成率'},
{value: 40, name: '达标率'},
{value: 60, name: '优秀率'}
{
value: 20,
name: '完成率',
title: {
offsetCenter: ['-40%', '80%']
},
detail: {
offsetCenter: ['-40%', '95%']
}
},
{
value: 40,
name: '达标率',
title: {
offsetCenter: ['0%', '80%']
},
detail: {
offsetCenter: ['0%', '95%']
}
},
{
value: 60,
name: '优秀率',
title: {
offsetCenter: ['40%', '80%']
},
detail: {
offsetCenter: ['40%', '95%']
}
}
],
titleDetailItem: {
isCombination: true,
orient: 'horizontal',
width: '100%',
itemGap: 10
},
title: {
fontSize: 14,
offsetCenter: ['-40%', '80%']
fontSize: 14
},
detail: {
width: 30,
......@@ -448,8 +548,7 @@ under the License.
color: '#fff',
backgroundColor: 'auto',
borderRadius: 3,
formatter: '{value}%',
offsetCenter: ['-40%', '95%']
formatter: '{value}%'
},
}
]
......@@ -459,9 +558,6 @@ under the License.
'out of gauge, detail with backgroundColor'
],
option: option5
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
setInterval(function () {
option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
......
test/gauge-simple.html
浏览文件 @ 5027432b
......@@ -140,7 +140,7 @@ under the License.
{
name: 'Pressure',
type: 'gauge',
data: []
data: [{}]
}
]
};
......
test/runTest/actions/gauge-distance.json 0 → 100644
浏览文件 @ 5027432b
[{"name":"Action 1","ops":[{"type":"screenshot","time":3170}],"scrollY":0,"scrollX":0,"timestamp":1602246267936},{"name":"Action 2","ops":[{"type":"screenshot","time":2585}],"scrollY":714,"scrollX":0,"timestamp":1602246285822},{"name":"Action 3","ops":[{"type":"screenshot","time":2051}],"scrollY":1693,"scrollX":0,"timestamp":1602246296183},{"name":"Action 4","ops":[{"type":"screenshot","time":1388}],"scrollY":2476,"scrollX":0,"timestamp":1602246309308},{"name":"Action 5","ops":[{"type":"screenshot","time":1445}],"scrollY":3584,"scrollX":0,"timestamp":1602246320327},{"name":"Action 6","ops":[{"type":"screenshot","time":1831}],"scrollY":4544,"scrollX":0,"timestamp":1602246332115}]
\ No newline at end of file
test/runTest/actions/gauge-group-title-detail.json 0 → 100644
浏览文件 @ 5027432b
[{"name":"Action 1","ops":[{"type":"screenshot","time":3413}],"scrollY":0,"scrollX":0,"timestamp":1602246421396},{"name":"Action 2","ops":[{"type":"screenshot","time":1686}],"scrollY":458,"scrollX":0,"timestamp":1602246432833},{"name":"Action 3","ops":[{"type":"screenshot","time":1853}],"scrollY":911,"scrollX":0,"timestamp":1602246445097},{"name":"Action 4","ops":[{"type":"screenshot","time":1876}],"scrollY":1374,"scrollX":0,"timestamp":1602246452846},{"name":"Action 5","ops":[{"type":"screenshot","time":1764}],"scrollY":1832,"scrollX":0,"timestamp":1602246460967},{"name":"Action 6","ops":[{"type":"screenshot","time":2066}],"scrollY":2148,"scrollX":0,"timestamp":1602246468649}]
\ No newline at end of file
test/runTest/actions/gauge-pointer.json 0 → 100644
浏览文件 @ 5027432b
[{"name":"Action 1","ops":[{"type":"screenshot","time":1824}],"scrollY":0,"scrollX":0,"timestamp":1602246538416},{"name":"Action 2","ops":[{"type":"screenshot","time":1348}],"scrollY":481,"scrollX":0,"timestamp":1602246547107},{"name":"Action 3","ops":[{"type":"screenshot","time":1242}],"scrollY":952,"scrollX":0,"timestamp":1602246555653},{"name":"Action 4","ops":[{"type":"screenshot","time":1149}],"scrollY":1432,"scrollX":0,"timestamp":1602246561913},{"name":"Action 5","ops":[{"type":"screenshot","time":1278}],"scrollY":1925,"scrollX":0,"timestamp":1602246567775},{"name":"Action 6","ops":[{"type":"screenshot","time":1155}],"scrollY":2292,"scrollX":0,"timestamp":1602246574297}]
\ No newline at end of file
test/runTest/actions/gauge-progress.json 0 → 100644
浏览文件 @ 5027432b
[{"name":"Action 1","ops":[{"type":"screenshot","time":1573}],"scrollY":0,"scrollX":0,"timestamp":1602246699614},{"name":"Action 2","ops":[{"type":"screenshot","time":1145}],"scrollY":460,"scrollX":0,"timestamp":1602246707775},{"name":"Action 3","ops":[{"type":"screenshot","time":1198}],"scrollY":910,"scrollX":0,"timestamp":1602246714393},{"name":"Action 4","ops":[{"type":"screenshot","time":1279}],"scrollY":1378,"scrollX":0,"timestamp":1602246720625},{"name":"Action 5","ops":[{"type":"screenshot","time":1430}],"scrollY":1708,"scrollX":0,"timestamp":1602246726107}]
\ No newline at end of file
test/runTest/actions/gauge.json 0 → 100644
浏览文件 @ 5027432b
[{"name":"Action 1","ops":[{"type":"screenshot","time":3972}],"scrollY":0,"scrollX":0,"timestamp":1602245762818},{"name":"Action 2","ops":[{"type":"screenshot","time":2806}],"scrollY":605,"scrollX":0,"timestamp":1602246030112},{"name":"Action 3","ops":[{"type":"screenshot","time":2428}],"scrollY":1008,"scrollX":0,"timestamp":1602246050732}]
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或