Chart components based on Vue2.x and Echarts

Chart components based on Vue2.x and Echarts

When using echarts to generate charts, we often need to do cumbersome data scheme conversion, modify complex configuration items, v-charts precisely to solve this.

mark text


Build Status NPM downloads Npm package Language License Join the chat

Document | Sample Project | English | 中文

Chart components based on Vue2.x and Echarts


  • Uniform data format: Use an uniform data format that both convient for frontend and backend, and also easy to create and edit.
  • Simplified configuration: With simplified configuration items, complex requirements can be easily implemented.
  • Simple customization: Provide a variety of custom Echarts way, you can easily set the chart options.


Modern browsers and Internet Explorer 10+, include pc and mobile browser.


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 }


Detailed changes for each release are documented in the release notes or ChangeLog.


Please make sure to read the Contributing Guide before making a pull request.



Github Repository

Tags: #VueJs #Charts