qimall/backend/modules/mall/views/overview/components/mini-echarts.php

<template id="mini-echarts">
    <div class="mini-echarts" ref='echarts'></div>
</template>
<script>
    // 组件变量传不出去
    Vue.component('mini-echarts', {
        name: "mini-echarts",
        template: '#mini-echarts',
        props: {
            options: {
                type: Object,
                default () {
                    return {}
                }
            },
            data: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        methods: {
            echarts() {
                var chartDom = this.$refs.echarts
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    grid: {
                        left: '-6px',
                        right: '-6px',
                        top: '0px',
                        bottom: '0%'
                    },
                    xAxis: {
                        show: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
                    },
                    yAxis: {
                        show: false,
                        type: 'value'
                    },
                    series: [{
                        data: [100, 200, 400, 100, 200],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        max: 1000,
                        lineStyle: {
                            width: 1,
                            color: '#0034E4'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 52, 228, 0)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 52, 228, 0.56)'
                                }
                            ])
                        },
                    }]
                };
                option && myChart.setOption(option);
            }
        },
        mounted() {
            this.echarts()
        }
    });
</script>
<style>
    .mini-echarts {
        width: 100%;
        height: 100%;
    }
</style>