v-charts基本使用

安装

npm i v-charts echarts --save

main.js里引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VCharts from 'v-charts'
Vue.config.productionTip = false
Vue.use(VCharts)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

需要用的页面，这是很常见的一个折线图

<ve-line :data="lineEchartData"></ve-line>

如果出现如下报错

This dependency was not found:echarts/lib/visual/dataColor
in ./node_modules/echarts-liquidfill/src/liquidFill.js
To install it, you can run: npm install --save echarts/lib/visual/dataColor

就安装指定版本

npm i v-charts echarts@4.9.0 -S

再回到页面进行配置，最基本的配置就是两个，一个columns，代表的是key，也就是你图表上面需要显示的键，例如日期:xxxx,

然后再去接口获取参数，赋值到rows里即可，一般数据都需要进行一下处理，因为后端不可能完全按照你想要的格式传给你，一般也就是循环一下，键对值，目前我有的会用中文做键，可能不太规范，但是还没找到更好的方法，如有更好的方式，请直接回复即可

lineEchartData: {
                    columns: ["日期", "销售额", '卖家商品实收金额', '卖家拍品实收金额', '售后退款金额', '商户优惠券支出', '商品订单数', '拍品订单数', '售后订单数'],
                    rows: []
                },

this.lineEchartData.rows = arr;