1 Star 0 Fork 79

酸奶 / echarts-for-vue

forked from Ambit / echarts-for-vue 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.zh-CN.md 4.73 KB
一键复制 编辑 原始数据 按行查看 历史
Ambit 提交于 2020-09-27 14:44 . publish v1.0.0

简体中文 | English

ECharts For Vue  Version

适用于 Vue 3 和 2 的 ECharts 包装组件

安装

npm i -S echarts-for-vue

用法

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

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

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

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

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

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

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

全局 API

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

initialOptions

名称 类型 默认值 可选 说明
echarts Object ECharts 库的全局对象
h Function Vue 的 createElement 方法(使用 Vue 3 时,是必选的)
ResizeObserver Function window.ResizeObserver 全局 ResizeObserver 不存在时,可通过 polyfill 提供支持
name String "ECharts" 组件的注册名称

实例属性

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

props

名称 类型 默认值 响应性 说明
initTheme Object, String echarts.init 方法的入参 theme详见
initOpts String echarts.init 方法的入参 opts详见
loading Boolean false 显示加载动画效果
loadingType String "default" ECharts 实例 showLoading 方法的入参 type详见
loadingOpts Object ECharts 实例 showLoading 方法的入参 opts详见
option Object ECharts 实例 setOption 方法的入参 option详见
setOptionOpts Object ECharts 实例 setOption 方法的入参 opts详见
events Array<Arguments> 数组元素为ECharts 实例 on 方法的入参,详见
autoResize Boolean true 自动调整大小(基于 ResizeObserver 实现,通过 polyfill 可向前兼容)

methods

定义 说明
void setOption(Object option, Object opts) 调用 ECharts 实例的 setOption 方法,详见
void resize() 调整图表大小(以组件外层 div 大小为准)
void addResizeListener() 添加 resize 监听器
void removeResizeListener() 移除 resize 监听器

联系

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

搜索帮助