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>

效果图：