【vue】vue中v-charts的使用

官方文档：https://v-charts.js.org/#/

在使用 echarts 生成图表时，常常须要作繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只须要统一提供一种对先后端都友好的数据格式设置简单的配置项，即可轻松生成常见的图表。

1：在初次安装的时候，用的是官方推荐

npm i v-charts echarts -S
    可是在引入的时候老是报错，换了下面这个指令就能够了，

npm install v-echarts echarts --save
2：能够按需引入或者全局引入

    全局引入：

// main.js import Vue from 'vue' import VCharts from 'v-charts' import App from './App.vue' Vue.use(VCharts) new Vue({ el: '#app', render: h => h(App) })

 

按需引入：

import Vue from 'vue' import VeLine from 'v-charts/lib/line' import App from './App.vue' Vue.component(VeLine.name, VeLine) new Vue({ el: '#app', render: h => h(App) })

 

3：数据

    v-charts数据主要由两部分组成，指标和纬度

    纬度相似咱们X轴的参数，指标就是咱们当前纬度咱们须要展现的数据，因此注意咱们的数据结构，简单的结构以下，