【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

参数	说明	类型	默认值
options	中等文本	Object	-
styles	默认样式	Oject	{ width: '100px',height: '100px'}

DEOM地址

demo演示地址

Author

habc0807

NPM

npm