基于Vue2.x和Echarts的图表组件

图表 (v-charts)

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. v-charts is based on Vue2.x and echarts, just need to provide a friendly data scheme and set simple configuration items, you can easily generate common charts.

在使用echarts生成图表时，我们经常需要进行繁琐的数据方案转换，修改复杂的配置项，v图表以解决此问题。 v-charts基于Vue2.x和echarts，只需要提供友好的数据方案并设置简单的配置项，就可以轻松生成通用图表。

特征 (Features)

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

  简单的自定义：提供多种自定义Echarts方式，您可以轻松设置图表选项。

支持 (Support)

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

现代浏览器和Internet Explorer 10+，包括PC和移动浏览器。

安装 (Install)

npm i v-charts echarts -S

开始 (Start)

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

翻译自: https://vuejsexamples.com/chart-components-based-on-vue2-x-and-echarts/