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

在使用 echarts 生成圖表時烁登，經常需要做繁瑣的數(shù)據類型轉化喇完、修改復雜的配置項叽躯，v-charts 的出現(xiàn)正是為了解決這個痛點座云。基于 Vue2.0 和 echarts 封裝的 v-charts 圖表組件交掏，只需要統(tǒng)一提供一種對前后端都友好的數(shù)據格式設置簡單的配置項，便可輕松生成常見的圖表刃鳄。
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: ['訂單總數(shù)', '訂單金額'],
                    axisSite: {right: ['orderAmount']},
                    labelMap: {'orderCount': '訂單數(shù)量', '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; // 注意這里應該是接口給返回回來的數(shù)據勺择，為了方便展示data結構创南，我這里用的是靜態(tài)數(shù)據
                this.dataEmpty = false
                // const res = await getOrderData()
                // {
                //     if (res.data.length === 0) {
                //         this.dataEmpty = true
                //     } else {
                //this.chartData.rows = DATA_FROM_BACKEND.rows; // 注意這里應該是接口給返回回來的數(shù)據，為了方便展示data結構省核，我這里用的是靜態(tài)數(shù)據
                // 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>

效果圖：

圖片.png