Chart Components Based On Vue2.x and Echarts

V-Charts component Vue.js makes it easy to create a variety of charts for complex data sets. Modern browsers and Internet Explorer 10+, including PC and mobile browsers.

Features:

  • Uniform Data Format: Use a standard data format that is convenient for the front-end and back-end, and is easy to create and edit.
  • Simplified configuration: Using simplified configuration items, complex requirements can be easily implemented.
  • Simple customization: Provide a variety of custom Echarts ways, you can easily adjust the chart options.

How to make use of it:

Install

npm i v-charts echarts -S

Usage

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>
<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  components: { VeLine },
  data () {
    return {
      chartData: {
        columns: ['date', 'PV'],
        rows: [
          { 'date': '01-01', 'PV': 1231 },
          { 'date': '01-02', 'PV': 1223 },
          { 'date': '01-03', 'PV': 2123 },
          { 'date': '01-04', 'PV': 4123 },
          { 'date': '01-05', 'PV': 3123 },
          { 'date': '01-06', 'PV': 7123 }
        ]
      }
    }
  }
}
</script>

Performant Chart Library, v-charts

Read More – 

How to Visualize Time Series Data With μPlot Chart Library
Easy Interface Javascript Chart Library Based on D3.js | billboard.js


See Demo And Download

Official Website(ElemeFE): Click Here

This superior jQuery/javascript plugin is developed by ElemeFE. For extra advanced usage, please go to the official website.

Share