【vue系列】vue 和 echats 结合的春天，vue插件vechart

最近项目需要用到echarts，但是vue和vechart的使用很奇怪，需要操作dom，代码写起来也不优雅。于是就将传统echats.js和vue结合成vue插件，通过vue插件引入、注册的方式使用不要太爽。目前已将该插件上传到npm上了。需要的快来踩vechart。

vechart

vechart 插件是将传统 echart.js 封装成Vue组件和指令使用。

插件的安装

NPM

npm i vechart

CNPM

cnpm i vechart

引入插件

import Vue from 'vue';
import Vechart from 'vechart';

Vue.use(Vechart);

基本用法

vechart组件的用法

<vechart :options="options1" :styles="echartStyle"></vechart>

options1: {
    series: {
        type: 'pie',
        data: [{
                name: 'A',
                value: 1212
            },
            {
                name: 'B',
                value: 2323
            },
            {
                name: 'C',
                value: 1919
            }
        ]
    }
},

vechart指令的用法

<div v-echarts="options" :styles="echartStyle" ></div>

API

DEOM地址

demo演示地址

Author

habc0807

NPM

npm