【vue系列】vue 和 echats 結合的春天，vue外掛vechart

尤小小發表於2019-11-13
Vue

最近專案需要用到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

相關文章