【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