简体中文 | English

ECharts For Vue  

📊📈 适用于 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>

2. 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>

3. 更多示例
4. 在线演示

全局 API

Options

实例属性

props

除了上述 props，其余属性将被传递给组件的根元素，如：style、class、onclick 等

事件

methods

联系

1. 微信: ambit_tsai
2. QQ群: 663286147
3. 邮箱: ambit_tsai@qq.com

网友提问

当作为全局插件使用的时候，如何配置地图 示例echarts-for-vue-master\test\vue3-echarts5运行失败