快速上手

安装

建议 Node.js 版本 18 或以上。

npm

npm install v3-echarts

yarn

yarn add v3-echarts

提示

v3-echarts 源码采用 ts + esm 编写，请确保您的项目支持 esm 模块并使用 import 进行导入它。

使用

通过 import 导入 <echarts-barx /> 组件，然后在模板中使用它。

src/app.vue

<template>
    <echarts-barx height="300px" :data="data" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { EchartsBarx } from 'v3-echarts'

const data = ref({
    axis: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    series: [
        {
            name: '销量',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
})
</script>

注意

图表默认高度为 100%，建议在实际开发中移除 height="300px"

🎉🎉🎉 到此，恭喜你，你的第一个图表已经完成啦！

更多

后续章节将会详细介绍 v3-echarts 有哪些可用的图表，以及图表的传入参数。