Echartst图表的封装---v-charts

官网地址：https://v-charts.js.org/#/

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

1、安装

npm i v-charts echarts -S

2、完整引入

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'Vue.use(VCharts)

3、按需引入

import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'Vue.component(VeLine.name, VeLine)

更多的属性暂时不介绍了，感觉echarts用的久了，反而觉得这种封装过的组件使用起来让人觉得麻烦，还要学习使用方法，还要查找文档，不过有兴趣的小伙伴可以自行探索，先贴上一份源码，还有效果图。

<template><div class="tab-container"><el-row><el-col :span="24"><div class="grid-content"><ve-histogram:data="chartData":colors="chartColor":legend-visible="true":loading="loading":data-empty="dataEmpty":extend="extend":settings="chartSettings"></ve-histogram></div></el-col></el-row></div>
</template><script>const DATA_FROM_BACKEND = {rows: [{date: '2018-11-01', orderCount: 10, orderAmount: 1093},{date: '2018-11-02', orderCount: 20, orderAmount: 2230},{date: '2018-11-03', orderCount: 33, orderAmount: 3623},{date: '2018-11-04', orderCount: 50, orderAmount: 6423},{date: '2018-11-05', orderCount: 80, orderAmount: 8492},{date: '2018-11-06', orderCount: 60, orderAmount: 6293},{date: '2018-11-07', orderCount: 20, orderAmount: 2293},{date: '2018-11-08', orderCount: 60, orderAmount: 6293},{date: '2018-11-09', orderCount: 50, orderAmount: 5293},{date: '2018-11-10', orderCount: 30, orderAmount: 3293},{date: '2018-11-11', orderCount: 20, orderAmount: 2293},{date: '2018-11-12', orderCount: 80, orderAmount: 8293},{date: '2018-11-13', orderCount: 100, orderAmount: 10293},{date: '2018-11-14', orderCount: 10, orderAmount: 1293},{date: '2018-11-15', orderCount: 40, orderAmount: 4293}]};import 'v-charts/lib/style.css'import 'v-charts/lib/style.css'export default {name: 'VCharts',data() {return {chartSettings: {xAxisType: 'time',area: true,yAxisName: ['订单总数', '订单金额'],axisSite: {right: ['orderAmount']},labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}},chartData: {columns: ['date', 'orderCount', 'orderAmount'],rows: []},extend: {series: {symbolSize: 5,label: {normal: {show: true}}}},chartColor: ['#00B8B8', '#FAA375'],loading: false,dataEmpty: false,barMaxWidth: 5}},created() {this.getData()},methods: {async getData() {this.chartData.rows = DATA_FROM_BACKEND.rows; // 注意这里应该是接口给返回回来的数据，为了方便展示data结构，我这里用的是静态数据this.dataEmpty = false// const res = await getOrderData()// {//     if (res.data.length === 0) {//         this.dataEmpty = true//     } else {//this.chartData.rows = DATA_FROM_BACKEND.rows; // 注意这里应该是接口给返回回来的数据，为了方便展示data结构，我这里用的是静态数据// this.dataEmpty = false//     }//     console.log(res)// }}}}</script><style scoped lang="scss">.tab-container {margin-top: 15px;height: calc(100vh - 160px);border-radius: 5px;.el-row {height: 100%;margin-bottom: 15px;.el-col {height: 100%;.grid-content {height: 100%;padding: 10px;background: #fff;border-radius: 5px;box-shadow: 0 2px 3px 0 #ccc;}}}}
</style>

效果图：