【 VUE series 】 VUE and EChats combine spring, vUE plug-in Vechart

Recent projects require echarts, but the use of Vue and Vechart is strange, requires dom manipulation, and the code is not elegant. So the traditional echats.js and VUE are combined into a vUE plug-in, which is not too cool to use through the introduction and registration of the VUE plug-in. The plug-in is now uploaded to NPM. Step on vechart if you need it.

vechart

The Vechart plugin is used to encapsulate traditional Echart. js into Vue components and instructions.

Plug-in installation

NPM

npm i vechart
Copy the code

CNPM

cnpm i vechart
Copy the code

The introduction of the plugin

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

Vue.use(Vechart);
Copy the code

Basic usage

The use of vechart components

<vechart :options="options1" :styles="echartStyle"></vechart>
Copy the code

options1: {
    series: {
        type: 'pie'.data: [{
                name: 'A'.value: 1212
            },
            {
                name: 'B'.value: 2323
            },
            {
                name: 'C'.value: 1919}}},Copy the code

The use of vechart instructions

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

API

parameter	instructions	type	The default value
options	Secondary text	Object	–
styles	The default styles	Oject	{ width: '100px',height: '100px'}

DEOM address

Demo Demo Address

Author

habc0807

NPM

npm