Vue.js (v3) component for Apache ECharts™ (v5).
ksg-echarts 是基于 Vue3.x 与 ECharts5.x 构建封装的组件库，用以解决繁杂的 ECharts 配置项以及数据转化带来的烦恼。用户只需关心 数据 与 配置项，甚至无需配置项，即可生成一个默认的图表，使用 ksg-Echarts 助你快捷、高效地构建图表。
我们提供了 ksg-echarts npm 包，通过下面命令即可完成安装，ksg-echarts 依赖于 echarts，所以不要忘记安装依赖包。
npm i ksg-echarts echarts -S安装完成后，在项目中即可使用 import 导入ksg-echarts。
完整引入 ksg-echarts
import Vue from 'vue'
import KsgEcharts from 'ksg-echarts'
Vue.use(KsgEcharts)按需引入 ksg-echarts
import Vue from 'vue'
import { KsgPieChart } from 'ksg-echarts' // 引入单个图表
Vue.component('KsgPieChart', KsgPieChart)在 ksg-echarts 引入页面后，我们就已经做好了创建第一个图表的准备了，下面以一个基础饼图为例开始我们第一个图表的创建。大部分 demos 使用了父容器宽高，请确保父容器宽高或者手动设置图表宽高。
<ksg-pie-chart :data="chartData" />export default {
const chartData = ref([
{ channel: '移动设备', pv1: 150000, },
{ channel: 'PC', pv1: 90000 },
{ channel: 'APP', pv: 40000, },
{ channel: 'PC', pv: 30000 },
{ channel: 'M端', pv: 20000 },
{ channel: '微信', pv: 50000 },
{ channel: '手Q', pv: 10000, },
{ channel: '小程序', pv: 90000 },
]);
}| 配置项 | 说明 | 类型 | 可选值 | 用法 |
|---|---|---|---|---|
| loading | 加载动画 | booble | false/true | 默认 false |
| loading-options | loading配置 | object | - | echarts配置参考-> |
| autoresize | 自动重置 | boolean/{ throttle?: number, onResize?: () => void } |
- | 默认 true |
| init-options | 图表初始化配置 | object | - | echarts配置参考-> |
| update-options | 图表设置项 | object | - | echarts配置参考-> |
| width | 图表宽度 | string/number | - | 500 |
| height | 图表高度 | string/number | - | 500px |
| emptyText | 图表空状态文案 | string | 暂无数据 | - |
| theme | 表格主题 | string/object | dark/light | echarts配置参考-> |
| palette | 主题样式表 | string[] | - | ['#FF6B3B', ...] |
ksg-echarts 提供了五个 Injection key，通过 provide 可全局设置图表的参数：
- loading-options => LOADING_OPTIONS_KEY
- init-options => INIT_OPTIONS_KEY
- theme => THEME_KEY
- palette => PALETTE_KEY
- update-options => UPDATE_OPTIONS_KEY
provide(INIT_OPTIONS_KEY, { renderer: 'svg' })
provide(THEME_KEY, 'dark')
... // 其他设置