安装
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;