# 2024 Smartphone Market Analysis
## Market Overview
Global [smartphone shipments](metric_name) reached [1.2 billion units](metric_value, origin=1200000000) in [2024](time_desc), showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year.
The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). [Average selling price](other_metric_value) was [$420](metric_value, origin=420, unit="USD").
## Key Findings
1. [Asia-Pacific](dim_value) remains the __largest market__
2. [Premium devices](dim_value) showed **strong growth**
3. Budget segment faced *headwinds*
## Regional Breakdown
### Asia-Pacific
[Asia-Pacific](dim_value) remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year.
Key markets:
- [China](dim_value): [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales
- [India](dim_value): [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45])
- [Southeast Asia](dim_value): [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal")
For detailed methodology, visit [our research page](https://example.com/methodology).
在 HTML、React 和 Vue 中使用 T8
在 HTML 中使用（通过 CDN）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T8 Narrative Text</title>
</head>
<body>
<div id="container"></div>
<!-- Import T8 from unpkg CDN -->
<script src="https://unpkg.com/@antv/t8/dist/t8.min.js"></script>
<script>
// T8 is available as a global variable
const { Text } = window.T8;
// Initialize T8 instance
const text = new Text(document.getElementById('container'));
// Render narrative text using T8 Syntax
const narrativeText = `
# Sales Report
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
`;
text.theme('light').render(narrativeText);
</script>
</body>
</html>
安装：
npm install @antv/t8
# or
yarn add @antv/t8
在 React 中使用
import { Text } from '@antv/t8';
import { useEffect, useRef } from 'react';
function T8Component() {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
// Initialize T8 instance
const text = new Text(containerRef.current);
// Render narrative text using T8 Syntax
const narrativeText = `
# Sales Report
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
`;
text.theme('light').render(narrativeText);
// Cleanup on unmount
return () => {
text.unmount();
};
}, []);
return <div ref={containerRef} />;
}
export default T8Component;
在 Vue 3 中使用
<template>
<div ref="containerRef"></div>
</template>
<script setup lang="ts">
import { Text } from '@antv/t8';
import { ref, onMounted, onBeforeUnmount } from 'vue';
const containerRef = ref<HTMLDivElement>();
let textInstance: Text | null = null;
onMounted(() => {
if (!containerRef.value) return;
// Initialize T8 instance
textInstance = new Text(containerRef.value);
// Render narrative text using T8 Syntax
const narrativeText = `
# Sales Report
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
`;
textInstance.theme('light').render(narrativeText);
});
onBeforeUnmount(() => {
if (textInstance) {
textInstance.unmount();
}
});
</script>
在 Vue 2 中使用
<template>
<div ref="container"></div>
</template>
<script>
import { Text } from '@antv/t8';
export default {
name: 'T8Component',
data() {
return {
textInstance: null,
};
},
mounted() {
// Initialize T8 instance
this.textInstance = new Text(this.$refs.container);
// Render narrative text using T8 Syntax
const narrativeText = `
# Sales Report
This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).
[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
`;
this.textInstance.theme('light').render(narrativeText);
},
beforeDestroy() {
if (this.textInstance) {
this.textInstance.unmount();
}
},
};
</script>
