zhxg-echarts-v3

基于 ECharts 5 封装的 Vue 3 图表组件库，是 zhxg-echarts 的 Vue 3 版本。

安装

npm install zhxg-echarts-v3
# 或
yarn add zhxg-echarts-v3

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import ZhxgEcharts from 'zhxg-echarts-v3'
import 'zhxg-echarts-v3/lib/style.css'

const app = createApp(App)
app.use(ZhxgEcharts)
app.mount('#app')

按需引入

<template>
  <Line :bindlineData="chartData" />
</template>

<script setup>
import { Line } from 'zhxg-echarts-v3'
import 'zhxg-echarts-v3/lib/style.css'

const chartData = {
  // 图表配置
}
</script>

组件列表

| 组件名 | 说明 | | --- | --- | | Line | 折线图 | | MultiLine | 多折线图 | | EventLine | 事件折线图 | | TotalLine | 汇总折线图 | | Bar | 柱状图 | | HBar | 横向柱状图 | | EventBar | 事件柱状图 | | BarExtend | 扩展柱状图 | | DefinedBar | 自定义柱状图 | | MultiBar | 多柱状图 | | Pie | 饼图 | | MultiPie | 多饼图 | | Map | 地图 | | HotMap | 热力地图 | | Wordcloud | 词云图 | | WaterPolo | 水球图 | | Tree | 树图 | | Propagation | 传播图 | | PropagationExtend | 扩展传播图 | | Relationship | 关系图 | | RelationshipCoordinate | 坐标关系图 |

依赖

• Vue 3.3+
• ECharts 5.x
• echarts-liquidfill 3.x
• echarts-wordcloud 2.x

开发

# 安装依赖
npm install

# 启动开发服务
npm run dev

# 构建库文件
npm run lib

发布

npm run lib
npm publish

版本说明

• zhxg-echarts - Vue 2 版本
• zhxg-echarts-v3 - Vue 3 版本（当前）

License

MIT