Use of v-charts

Introduction to v-charts

When using echarts to generate charts, it is often necessary to do tedious data type conversion and modify complex configuration items. The emergence of v-charts is to solve this pain point. Based on the V-Charts chart component encapsulated by Vue2.0 and echarts, you only need to provide a unified configuration item that is friendly to the front and back ends of the data format, and you can easily generate common charts.

v-charts installation

npm i v-charts -S

v-charts introduction

Import all

//main.js
import VCharts from 'v-charts'
Vue.use(VCharts)

Each chart component of V-Charts introduced on demand is packaged separately in the lib folder. The following is a case

• lib/
  • line.js -------------- Line chart
  • bar.js --------------- bar graph
  • histogram.js --------- histogram
  • pie.js --------------- Pie chart
  • ring.js -------------- Ring diagram
  • funnel.js ------------ Funnel chart
  • waterfall.js --------- Waterfall chart
  • radar.js ------------- Radar chart
  • map.js --------------- map
  • bmap.js -------------- Baidu map

When in use, you can directly introduce a single chart into the project, and see your project needs corresponding to the above chart

import VeHistogram from 'v-charts/lib/histogram.common'
//或者
import VeLine from 'v-charts/lib/line'

v-charts use

<ve-histogram :data="chartData" :settings="chartSettings"/>

v-charts public attributes

Configuration item	Introduction	Types of	Remarks
data	Chart data	Object	columns represents the name of the indicator and dimension, rows is the data content
width	Chart width	String	Default auto
height	Chart height	String	Default 400px
settings	Chart configuration items	Object	Private properties of the chart
colors	Color list	Array	-
tooltip-visible	Whether to show the prompt box	Boolean	The default is true
legend-visible	Whether to show the legend	Boolean	The default is true
legend-position	Legend display position	String	Optional'left','top','right','bottom'
grid	Grid configuration	Object	-
events	Bind events to the chart	Object	The object containing the event name-event handler
before-config	Additional processing of data in advance	Function	Triggered before the start of data conversion into configuration items, the parameter is data, and the return value is tabular data
after-config	Generate echarts configuration for additional processing	Function	Triggered after the data is converted into configuration items, the parameter is options, and the return value is echarts configuration
after-set-option	Obtain the echarts instance after generating the graph	Function	The parameter is an echarts instance
after-set-option-once	Get echarts only once after the picture	Function	The parameter is an echarts instance
mark-line	Chart marking	Object	-
mark-area	Chart flag area	Object	-
visual-map	Visual mapping component	Array, Object	-
mark-point	Chart punctuation	Object	-
data-zoom	Area zoom component	Array, Object	-
toolbox	Toolbox	Object	-
title	Chart title	Object	-
init-optionsinit	Additional parameters	Object	-
theme	Custom theme	Object	The content is a custom theme parameter
theme-name	Custom theme name	String	The content is a globally registered custom theme name
loading	Loading status	Boolean	The default is false
data-empty	No data status	Boolean	The default is false
judge-width	Whether to deal with the width problem when generating the chart	Boolean	The default is true
width-change-delay	Delay in container width change	Number	The default is 300
extend	Set detailed properties of echart	Object	-