Vue 后台管理項目 ECharts數據展示

先看效果： 點擊右上角可以進行視圖切換

 

主要代碼：

 toolbox: { // 工具箱
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['bar', 'line']},
                            restore: {}
                }
},

 

 template：

<template>
  <div>

    <span>{{nowWeek}}</span> &nbsp; &nbsp;
    <span>{{nowDate}}</span> &nbsp; &nbsp;
    <span>{{nowTime}}</span><br>
    總數：{{total}} <br>
    商品管理總個數：{{GoodsTotal}} <br>
    訂單總量：{{orderTotal}} <br>
    <div id="main">
    </div>

  </div>
</template>

script：

 

<script>
    import {mapState} from 'vuex'

    var echarts = require('echarts');
    export default {
        data() {
            return {
                myChart: {},
                timer: null,
                nowWeek: '',
                nowDate: '',
                nowTime: '',
            }
        },
        //從vuex中獲取展示數據
        computed: {
            ...mapState(['total']),
            ...mapState(['GoodsTotal']),
            ...mapState(['orderTotal']),
        },
        mounted() {
            // 基於准備好的dom，初始化echarts實例
            this.myChart = echarts.init(document.getElementById('main'));
            this.initData();
            //展示當前時間
            this.timer = setInterval(() => {
                this.setNowTimes()
            }, 1000)

        },
        methods: {
            initData() {
                // 繪制圖表
                const option = {
                    title: {
                        text: '走勢圖'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['總數', '商品管理總個數', '訂單總量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: { // 工具箱
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['bar', 'line']},
                            restore: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '總數',
                            type: 'line',
                            stack: '總量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '商品管理總個數',
                            type: 'line',
                            stack: '總量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '訂單總量',
                            type: 'line',
                            stack: '總量',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },

                    ]
                };
                this.myChart.setOption(option)
            },
            //展示時間
            setNowTimes() {
                let myDate = new Date()
                // console.log(myDate)
                let wk = myDate.getDay();
                let yy = String(myDate.getFullYear());
                let mm = myDate.getMonth() + 1;
                let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
                let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
                let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
                let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
                let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                let week = weeks[wk]
                this.nowDate = yy + '-' + mm + '-' + dd
                this.nowTime = hou + ':' + min + ':' + sec
                this.nowWeek = week;

            },

        },

    }
</script>

 

 

 

 style:

<style lang="scss" scoped>
  @import "../../Scss/index";
  // div的大小 不能省略
  #main {
    @include Size(600px, 400px);
  }


</style>