mirrors/VChart
1
0
Fork 0
mirror of https://github.com/VisActor/VChart synced 2024-11-22 17:26:19 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: new theme guide

Browse Source
This commit is contained in:
Howard Zhang 2023-11-13 09:00:13 +08:00 committed by Weixing Zhang
parent 28b79f7d0c
commit f215ecfbfe
1 changed files with 288 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
packages/vchart/__tests__/runtime/browser/test-page/pie.ts
View File

@ -1,4 +1,3 @@
import { isMobile } from 'react-device-detect';
import { default as VChart } from '../../../../src/index';
const spec = {
@ -318,16 +317,296 @@ const spec = {
rose: {
clipByLayout: true
},
dataKey: ['20001'],
tooltip: {
renderMode: 'canvas'
}
dataKey: ['20001']
};
const vchart = new VChart(spec as any, {
dom: document.getElementById('chart') as HTMLElement,
mode: isMobile ? 'mobile-browser' : 'desktop-browser'
});
const vchart = new VChart(spec as any, { dom: document.getElementById('chart') as HTMLElement });
vchart.renderAsync();
window['vchart'] = vchart;
setTimeout(() => {
vchart.updateSpec({
type: 'pie',
categoryField: '20001',
valueField: '230719190940041',
data: [
{
id: 'data',
values: [
{
'20001': '器具-东北',
'230719190940041': '407333.6141357422',
'230719190940044': '器具',
'230719190940047': '东北'
},
{
'20001': '椅子-东北',
'230719190940041': '366799.0764160156',
'230719190940044': '椅子',
'230719190940047': '东北'
},
{
'20001': '复印机-东北',
'230719190940041': '337993.04010009766',
'230719190940044': '复印机',
'230719190940047': '东北'
},
{
'20001': '书架-东北',
'230719190940041': '295175.3292236328',
'230719190940044': '书架',
'230719190940047': '东北'
},
{
'20001': '电话-东北',
'230719190940041': '280637.64530944824',
'230719190940044': '电话',
'230719190940047': '东北'
},
{
'20001': '桌子-东北',
'230719190940041': '184567.76220703125',
'230719190940044': '桌子',
'230719190940047': '东北'
},
{
'20001': '配件-东北',
'230719190940041': '180783.90380859375',
'230719190940044': '配件',
'230719190940047': '东北'
},
{
'20001': '收纳具-东北',
'230719190940041': '162163.54042816162',
'230719190940044': '收纳具',
'230719190940047': '东北'
},
{
'20001': '设备-东北',
'230719190940041': '136781.42694091797',
'230719190940044': '设备',
'230719190940047': '东北'
},
{
'20001': '用具-东北',
'230719190940041': '74156.23627090454',
'230719190940044': '用具',
'230719190940047': '东北'
},
{
'20001': '信封-东北',
'230719190940041': '50332.65993499756',
'230719190940044': '信封',
'230719190940047': '东北'
},
{
'20001': '用品-东北',
'230719190940041': '47610.72386550903',
'230719190940044': '用品',
'230719190940047': '东北'
},
{
'20001': '纸张-东北',
'230719190940041': '47254.48011779785',
'230719190940044': '纸张',
'230719190940047': '东北'
},
{
'20001': '装订机-东北',
'230719190940041': '45179.95973491669',
'230719190940044': '装订机',
'230719190940047': '东北'
},
{
'20001': '美术-东北',
'230719190940041': '25795.55990600586',
'230719190940044': '美术',
'230719190940047': '东北'
},
{
'20001': '系固件-东北',
'230719190940041': '23673.776067733765',
'230719190940044': '系固件',
'230719190940047': '东北'
},
{
'20001': '标签-东北',
'230719190940041': '15328.740070343018',
'230719190940044': '标签',
'230719190940047': '东北'
}
],
transform: [
{
type: 'fields',
options: {
fields: {
'20001': {
alias: '图例项 ',
domain: [
'器具-东北',
'椅子-东北',
'复印机-东北',
'书架-东北',
'电话-东北',
'桌子-东北',
'配件-东北',
'收纳具-东北',
'设备-东北',
'用具-东北',
'信封-东北',
'用品-东北',
'纸张-东北',
'装订机-东北',
'美术-东北',
'系固件-东北',
'标签-东北'
]
},
'230719190940041': {
alias: '销售额'
},
'230719190940044': {
alias: '子类别'
},
'230719190940047': {
alias: '地区'
}
}
}
}
]
}
],
outerRadius: 0.75,
label: {
visible: true,
overlap: {
hideOnHit: true
},
style: {},
color: null,
strokeOpacity: 1,
strokeWidth: 0,
position: 'outside'
},
color: {
field: '20001',
type: 'ordinal',
range: [
'#2E62F1',
'#4DC36A',
'#FF8406',
'#FFCC00',
'#4F44CF',
'#5AC8FA',
'#003A8C',
'#B08AE2',
'#FF6341',
'#98DD62',
'#07A199',
'#87DBDD',
'#2E62F1',
'#4DC36A',
'#FF8406',
'#FFCC00',
'#4F44CF'
],
specified: {}
},
legends: [
{
type: 'discrete',
orient: 'right',
position: 'start',
visible: true,
maxWidth: 257,
hover: false,
maxCol: 1,
title: {
textStyle: {
fontSize: 12,
fill: '#6F6F6F'
}
},
item: {
spaceRow: 0,
spaceCol: 0,
padding: {
top: 4,
bottom: 4,
left: 4,
right: 22
},
background: {
style: {
fillOpacity: 0.001
}
},
label: {
style: {
fontSize: 12,
fill: '#6F6F6F'
}
},
shape: {
style: {
symbolType: 'square'
}
}
},
pager: {
textStyle: {},
handler: {
style: {},
state: {
disable: {}
}
}
},
padding: {
top: 0,
bottom: 0,
left: 16,
right: 0
}
}
],
hover: {
enable: true
},
select: {
enable: true
},
pie: {
state: {
hover: {
cursor: 'pointer',
fillOpacity: 0.8,
stroke: '#58595B',
lineWidth: 1,
zIndex: 500,
outerRadius: 0.8
},
selected: {
cursor: 'pointer',
fillOpacity: 1,
stroke: '#58595B',
lineWidth: 1,
outerRadius: 0.8
},
selected_reverse: {
fillOpacity: 0.3,
strokeWidth: 0.3
}
},
clipByLayout: true
},
background: 'rgba(255, 255, 255, 0)',
rose: {
clipByLayout: true
},
dataKey: ['20001']
});
}, 1000);