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.


  • 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:


npm i v-charts echarts -S


    <ve-line :data="chartData"></ve-line>
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 }

Performant Chart Library, v-charts


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.