diff --git a/examples/case/customize/demo/meta.json b/examples/case/customize/demo/meta.json index d66e024f64..898ba7c785 100644 --- a/examples/case/customize/demo/meta.json +++ b/examples/case/customize/demo/meta.json @@ -7,8 +7,8 @@ { "filename": "line.ts", "title": { - "zh": "自定义折线图", - "en": "Custom line" + "zh": "用户会话", + "en": "User session" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*_iXASYTyIzcAAAAAAAAAAAAAARQnAQ" }, diff --git a/examples/case/multi-view/demo/nobel-prize.ts b/examples/case/multi-view/demo/nobel-prize.ts index e38ecc6dd8..d718208f0e 100644 --- a/examples/case/multi-view/demo/nobel-prize.ts +++ b/examples/case/multi-view/demo/nobel-prize.ts @@ -5,8 +5,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c .then((data) => data.json()) .then((data) => { const COLORS = ['#ff93a7', '#ff9300', '#bb82f3', '#6349ec', '#0074ff']; - const START_BTN = 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*rhl0QYDkV7EAAAAAAAAAAAAAARQnAQ'; - const STOP_BTN = 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*2F9fRr2RfEEAAAAAAAAAAAAAARQnAQ'; let currentYear = 1901; /** 散点图数据（各国诺贝尔奖获奖者的年龄分布） */ const getPointViewData = (year) => { @@ -61,7 +59,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c region: { start: { x: 0, y: 0.35 }, end: { x: 1, y: 0.65 } }, coordinate: { type: 'theta', - cfg: { innerRadius: 0.89, radius: 0.96 }, + cfg: { innerRadius: 0.78, radius: 0.96 }, }, geometries: [ { @@ -75,24 +73,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c adjust: { type: 'stack' }, }, ], - annotations: [ - { - type: 'html', - position: ['50%', '50%'], - style: { - textAlign: 'center', - fill: 'rgba(255,255,255,0.85)', - }, - html: (container, view) => { - const width = Math.min(view.getCoordinate().getWidth(), view.getCoordinate().getHeight()) * 0.2; - return `
- image -
`; - }, - }, - ], }, { data: getPointViewData(currentYear), @@ -291,11 +271,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c let interval; function start() { - if (!interval) { - if (document.querySelector('#btn').querySelector('img')) { - document.querySelector('#btn').querySelector('img').setAttribute('src', START_BTN); - } - } interval = setInterval(() => { if (currentYear < 2016) { currentYear += 1; @@ -308,9 +283,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c function end() { clearInterval(interval); interval = null; - if (document.querySelector('#btn').querySelector('img')) { - document.querySelector('#btn').querySelector('img').setAttribute('src', STOP_BTN); - } } start(); diff --git a/examples/case/multi-view/demo/series-columns.ts b/examples/case/multi-view/demo/series-columns.ts index c8cd84476b..a3539b6b5f 100644 --- a/examples/case/multi-view/demo/series-columns.ts +++ b/examples/case/multi-view/demo/series-columns.ts @@ -49,6 +49,7 @@ labPlot.update({ }, label: { position: 'left', + layout: { type: 'adjust-color' }, formatter: ({ value }) => `${(value * 100).toFixed(1)}%`, style: { fill: '#fff' }, }, @@ -75,10 +76,15 @@ labPlot.update({ const value = data.find((d) => d.area === area).value; return value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey; }, - style: { lineWidth: 1 }, + style: ({ value }) => { + return { + lineWidth: 1, + fillOpacity: 0, + stroke: value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey, + }; + }, }, label: { - layout: { type: 'adjust-color' }, position: 'left', formatter: ({ value }) => `${(value * 100).toFixed(1)}%`, }, @@ -99,7 +105,7 @@ labPlot.update({ coordinate: { cfg: { isTransposed: true } }, geometries: [ { - type: 'interval', + type: 'point', xField: 'area', yField: 'value', mapping: { @@ -107,38 +113,36 @@ labPlot.update({ const value = data.find((d) => d.area === area).value; return value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey; }, - style: { fillOpacity: 0 }, + style: ({ value }) => { + return { + r: 4, + strokeOpacity: 0, + fill: value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey, + }; + }, + }, + label: { + offsetY: -12, + offsetX: 8, + style: { textAlign: 'right' }, + position: 'top', + formatter: ({ value }) => `${(value * 100).toFixed(1)}%`, }, - label: { position: 'right', formatter: ({ value }) => `${(value * 100).toFixed(1)}%` }, }, ], annotations: [ - ...data.map((d) => { - return { - type: 'html', - position: d, - offsetX: -1, - html: () => - `
`, - style: () => { - return { - fill: d.value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey, - fontWeight: 800, - }; - }, - }; - }), ...data.map((d) => { return { type: 'line', start: [d.area, 'min'], - end: [d.area, d.value], + end: [d.area, 'max'], + top: false, style: { - lineWidth: 4, - stroke: d.value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey, + lineWidth: 2, + radius: 2, + lineDash: [2, 4], + stroke: defaultGrey, }, }; }), @@ -191,8 +195,8 @@ labPlot.update({ annotations: data.map((d, idx) => { return { type: 'line', - start: [3 - idx - 0.4, 'min'], - end: [3 - idx - 0.4, 'max'], + start: [3 - idx - 0.25, 'min'], + end: [3 - idx - 0.25, 'max'], style: { lineWidth: 2, stroke: '#595959', @@ -202,8 +206,5 @@ labPlot.update({ }, ], }); -labPlot.chart.theme({ - columnWidthRatio: 0.85, -}); // Step 3: 渲染图表 labPlot.render(); diff --git a/examples/case/multi-view/design.en.md b/examples/case/multi-view/design.en.md deleted file mode 100644 index 7bdef0839b..0000000000 --- a/examples/case/multi-view/design.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Design Guide ---- - -Lab Chart is in BETA stage, DO NOT use it in production env. \ No newline at end of file diff --git a/examples/case/multi-view/design.zh.md b/examples/case/multi-view/design.zh.md deleted file mode 100644 index 9a5b168b86..0000000000 --- a/examples/case/multi-view/design.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 设计规范 ---- - -实验室图表正处于 beta 阶段，暂不适用于生产阶段。 diff --git a/examples/case/multi-view/index.en.md b/examples/case/multi-view/index.en.md index 06fab1e548..8683014ad5 100644 --- a/examples/case/multi-view/index.en.md +++ b/examples/case/multi-view/index.en.md @@ -1,4 +1,4 @@ --- -title: Multi-View Charts +title: Multi-View Charts(beta) order: 1 --- diff --git a/examples/case/multi-view/index.zh.md b/examples/case/multi-view/index.zh.md index 3818dbacfa..943b9184a6 100644 --- a/examples/case/multi-view/index.zh.md +++ b/examples/case/multi-view/index.zh.md @@ -1,4 +1,4 @@ --- -title: 多图层图表 +title: 多图层图表(beta) order: 1 --- diff --git a/examples/case/statistical-scenario/demo/meta.json b/examples/case/statistical-scenario/demo/meta.json index 5d3ddf5c0a..060465d9f3 100644 --- a/examples/case/statistical-scenario/demo/meta.json +++ b/examples/case/statistical-scenario/demo/meta.json @@ -18,7 +18,7 @@ "zh": "场景漏斗图", "en": "Funnel Scenario" }, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yYAiTdM%242e/case-funnel.png" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kqkXF8ap7d/24934434-0067-4c1f-9c22-e51b27beb3f6.png" }, { "filename": "pie.ts", @@ -35,7 +35,7 @@ "zh": "漏斗图(趋势)", "en": "Statistical Charts-Funnel" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Tf6bTKBux8gAAAAAAAAAAAAAARQnAQ" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yYAiTdM%242e/case-funnel.png" } ] }