37 Star 295 Fork 78

Ambit / echarts-for-vue

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.zh-CN.md 5.10 KB
一键复制 编辑 原始数据 按行查看 历史

简体中文 | English

ECharts For Vue  Version

📊📈 适用于 Vue 3、2 和 TypeScript 的 ECharts 包装组件

特点

  1. 支持 Vue 3 和 2;
  2. 支持图表大小自适应;
  3. 符合 Vue 与 ECharts 用户的使用习惯;
  4. 提供纯函数 API,无副作用;
  5. 轻量级封装,简单易用;

安装

npm i -S echarts-for-vue

用法

  1. Vue 3
import { createApp, h } from 'vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';

const app = createApp({ /*...*/ });
app.use(plugin, { echarts, h });                        // 作为插件使用
<template>
    <ECharts ref="chart" :option="option" />
</template>

<script>
    import { createComponent } from 'echarts-for-vue';
    import * as echarts from 'echarts';
    import { h } from 'vue';

    export default {
        components: {
            ECharts: createComponent({ echarts, h }),   // 作为组件使用
        },
        data: () => ({
            option: { /*...*/ },
        }),
        methods: {
            doSomething() {
                this.$refs.chart.inst.getWidth();       // 调用 ECharts 实例的方法
            },
        },
    }
</script>
  1. Vue 2
import Vue from 'vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';

Vue.use(plugin, { echarts });                           // 作为插件使用
<template>
    <ECharts ref="chart" :option="option" />
</template>

<script>
    import { createComponent } from 'echarts-for-vue';
    import * as echarts from 'echarts';

    export default {
        components: {
            ECharts: createComponent({ echarts }),      // 作为组件使用
        },
        data: () => ({
            option: { /*...*/ },
        }),
        methods: {
            doSomething() {
                this.$refs.chart.inst.getWidth();       // 调用 ECharts 实例的方法
            },
        },
    }
</script>
  1. 更多示例
  2. 在线演示

全局 API

定义 返回值 说明
createComponent(options: Options): object 组件定义对象 创建组件
plugin(app: Vue, options: Options): void 插件的安装方法

Options

属性 类型 默认值 可选 说明
echarts typeof echarts ECharts 库的全局对象
h Function Vue 的 createElement 方法(使用 Vue 3 时,是必选的)
ResizeObserver typeof ResizeObserver window.ResizeObserver 全局 ResizeObserver 不存在时,可通过 polyfill 提供支持
name string "ECharts" 组件的注册名称
deepWatchOption boolean true 深度监听属性 “option”

实例属性

名称 类型 只读 说明
inst ECharts ECharts 实例

props

名称 类型 默认值 响应性 说明
initTheme object | string echarts.init 方法的入参 theme详见
initOpts object echarts.init 方法的入参 opts详见
loading boolean false 显示加载动画效果
loadingType string "default" ECharts 实例 showLoading 方法的入参 type详见
loadingOpts EChartsLoadingOption ECharts 实例 showLoading 方法的入参 opts详见
option EChartOption ECharts 实例 setOption 方法的入参 option详见
optionOpts EChartsOptionConfig ECharts 实例 setOption 方法的入参 opts详见
events Arguments[] 数组元素为 ECharts 实例 on 方法的入参,详见
autoResize boolean true 自动调整大小

除了上述 props,其余属性将被传递给组件的根元素,如:styleclassonclick

事件

名称 说明
resize 图表大小调整时触发

methods

定义 说明
setOption(option: EChartOption, opts?: EChartsOptionConfig): void 调用 ECharts 实例的 setOption 方法,详见
resize(): void 调整图表大小(以组件根元素大小为基准)
addResizeListener(): void 添加 resize 监听器
removeResizeListener(): void 移除 resize 监听器

联系

  1. 微信: ambit_tsai
  2. QQ群: 663286147
  3. 邮箱: ambit_tsai@qq.com
TypeScript
1
https://gitee.com/ambit/echarts-for-vue.git
git@gitee.com:ambit/echarts-for-vue.git
ambit
echarts-for-vue
echarts-for-vue
master

搜索帮助