首页vue3 ts echarts 折线图

vue3 ts echarts 折线图

时间: 2025-04-24 17:10:24 浏览: 25

### 实现折线图为了在 Vue 3 和 TypeScript 环境下创建 ECharts 折线图，可以遵循如下方法：定义组件并初始化 ECharts 实例。首先安装 `echarts` 及其对应的类型声明包 `@types/echarts`。 ```bash npm install echarts @types/echarts --save ``` 接着，在 Vue 组件中导入必要的模块，并设置选项来配置折线图样式和数据[^1]。 ```typescript // LineChart.vue <template> <div ref="chartRef" :style="{ width: '600px', height: '400px' }"></div> </template> <script lang="ts"> import { defineComponent, onMounted, ref, Ref } from 'vue'; import * as echarts from 'echarts'; export default defineComponent({ name: 'LineChart', setup() { let chartInstance: echarts.ECharts | null; const chartRef: Ref<HTMLDivElement | undefined> = ref(); const initChart = () => { if (!chartInstance && chartRef.value) { chartInstance = echarts.init(chartRef.value); const option: echarts.EChartsOption = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }] }; chartInstance.setOption(option); } }; onMounted(() => { initChart(); }); return { chartRef, }; } }); </script> ``` 此代码片段展示了如何在一个简单的 Vue 3 组件里集成 ECharts 来显示一条基本的折线图。通过调整 `option` 对象中的属性，可以根据具体需求定制图形外观和行为。

阅读全文