This is my second day of the August Challenge

introduce

Both Echarts and V-Charts are used for graphical displays

Echarts is powerful and rich, but data conversion is cumbersome

V-charts has few functions, but they are basically sufficient and provide simple data.

Echarts website echarts.apache.org/zh

V – v-charts.js.org/#/ charts website

V-charts are the v-charts component encapsulated by Vue2.0 and echarts. Common charts can be generated by providing a simple configuration item with a data format that is friendly to both the front and back end.

NPM package download comparison

Echarts

download

You can obtain Apache ECharts (Incubating)TM in any of the following ways.

  • Obtain the official source code package from the Apache ECharts (Incubating) website and build it.
  • Available on GitHub of ECharts.
  • Obtain echarts from NPM,npm install echarts --save, see the”Use Echarts in WebPack”
  • Introduced through CDN such as jsDelivr
The introduction of

Introduced the global

In vue main.js

Import echarts from 'echarts' Vue. Prototype. $echarts = echartsCopy the code

Local introduction

Introduce Echarts in components that require them

The import echarts from 'echarts;Copy the code

using

<div id="myChart" ref="myChart" :style="{width: '300px', height: '300px'}"/>
Copy the code

Static data uses JS code

export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.drawLine(); }, methods: {drawLine(){// based on the prepared dom, Const myChart = echarts.init(this.$refs.mychart) // Draw the chart mychart.setoption ({title: {text: 'using echarts in Vue'}, tooltip: xAxis: {}, {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"]}, yAxis: {}, series: [{name: 'sales' type:' the line 'data: [5, 20, 36, 10, 10, 20]}}); }}}Copy the code

Note: We instantiate the Echarts object in the Mounted lifecycle function. Because we want to make sure that the DOM element is already mounted to the page

According to the effect

The dynamic reference

When Echarts is combined with the back-end, complicated data type conversion and complex configuration items are often required according to the data returned by the back-end. V-charts can solve this pain point

v-charts

When using Echarts to generate charts, it is often necessary to do tedious data type conversion and modify complex configuration items. V-charts appeared to solve this pain point. The v-charts component, packaged with Vue2.0 and echarts, can easily generate common charts by providing a simple configuration item with a data format that is both front and back end friendly.

NPM install
npm i v-charts echarts -S
Copy the code
The introduction of

Introduced the global

Import VCharts from 'v-charts' vue.use (VCharts)Copy the code

According to the need to introduce

Each chart component of V-Charts has been packaged into a separate lib folder

| - lib / | - line.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- line chart | - bar.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- bar | - histogram.com mon. Js -- -- -- -- -- -- -- -- -- a histogram | - pie.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the pie chart | - ring.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- ring figure | - funnel.com mon. Js -- -- -- -- -- -- -- -- -- -- -- - | - funnel diagram Waterfall.com mon. Js -- -- -- -- -- -- -- -- -- waterfall figure | - radar.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- -- entirely | - map.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | - map Sankey.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- the sankey diagram | - heatmap.com mon. Js -- -- -- -- -- -- -- -- -- -- - heat map | - scatter.com mon. Js -- -- -- -- -- -- -- -- -- -- - | - a scatter diagram Candle.com mon. Js -- -- -- -- -- -- -- -- -- -- -- - | k chart - gauge.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- - | - tree.com mon. Dashboard js -- -- -- -- -- -- -- -- -- -- -- -- -- - | - tree diagram Bmap.com mon. Js -- -- -- -- -- -- -- -- -- -- -- -- -- - | - amap.com mon. Baidu map js -- -- -- -- -- -- -- -- -- -- -- -- -- -- gold mapCopy the code
Import VeLine from 'v-charts/lib/line.common' // Vue.component(veline.name, VeLine)Copy the code

Data of V-Charts consists of indicators and dimensions. Dimensions are similar to our X-axis parameters, and indicators are the data we need to present for our current dimension, so pay attention to our data structure.

  • Columns are the set of dimensions and indicators. Most charts in V-Charts have single dimension and multiple indicators, so by default the first value is dimension and the rest are indicators
  • Rows is a collection of data.

There are two configurations in the setting attribute of the chart:

  • Dimension is used to specify a dimension
  • Metrics specifies metrics

Give an example

Introduce line charts as needed

<template> <ve-line :data="chartData"></ve-line> </template> <script> export default { data: Function () {return {chartData: {columns: [' date ', 'access to users',' order users', 'order rate], rows: [{' date' : '1/1', 'access to the user: Of 1393, 1093 'order users' :' order rate: 0.32}, {' date ':' half ', 'access to users' : 3530,' order users' : 3230, 'order rate: 0.26}, {' date' : 'one third', 'access to users' : 2923, 2623 'order users' :' order rate: 0.76}, {' date ':' a quarter ', 'access to users' : 1723,' order users' : 1423, 'order rate: 0.49}, {' date' : '1/5', 'access to users' : 3792, 3492 'order users' :' order rate: 0.323}, {' date ':' 1/6 ', 'access to users' : 4593,' order users' : 4293, 'order rate: 0.78}]}}}} < / script >Copy the code

Page display effect

Dynamic introduction

For the use of V-Charts, when data is introduced dynamically, there is basically no need to convert the data format. It is only necessary to return the data type according to the demo format of V-Charts official website after consultation with the back end.

Another advantage of V-Charts is that chart switching can be done, that is, one kind of data can be displayed with various graphs. Please refer to the official website v-charts.js.org/#/toggle

Conclusion: Compared with Echarts, V-Charts is better to show simply. The cost of learning and configuration of front-end and back-end are lower. Some charts commonly used in daily use can be displayed using V-charts.

Do people use Echarts or V-charts for visualization? Feel free to reply in the comments section