首页arco design vue图表用法示例

arco design vue图表用法示例

时间: 2025-06-22 08:39:27 浏览: 6

### Arco Design Vue 图表组件使用教程 #### 安装依赖包为了使用 Arco Design Vue 的图表组件，首先需要安装 `@arco-design/web-vue` 和图表相关的依赖。可以通过 npm 或 yarn 来完成这一步骤。 ```bash npm install @arco-design/web-vue echarts vue-echarts --save ``` 或者 ```bash yarn add @arco-design/web-vue echarts vue-echarts ``` #### 导入并注册 ECharts 组件接着，在项目入口文件或相应页面中导入所需模块，并全局或局部注册 ECharts 组件[^4]。 ```javascript import { defineComponent } from 'vue'; import VEcharts from 'vue-echarts'; import * as echarts from 'echarts/core'; // 引入图表类型 import { BarChart, LineChart } from 'echarts/charts'; // 引入提示框，标题，直角坐标系组件 import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'; // 注册必须的组件 echarts.use([ BarChart, LineChart, TitleComponent, TooltipComponent, GridComponent ]); export default defineComponent({ name: "App", components: { VChart: VEcharts // 自定义标签名 }, }); ``` #### 创建简单的柱状图实例下面展示如何创建一个基础的柱状图案例： ```html <template> <div style="width: 600px;height:400px;"> <v-chart :option="barOption"/> </div> </template> <script setup lang="ts"> const barOption = reactive({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) </script> ``` 此代码片段展示了如何配置数据源以及设置 X 轴、Y 轴等属性来绘制一张简单直观的柱形统计图。

阅读全文