部分更改

shuishen

2022-03-25 20d94ba53e1b8c64754bda684a7350d32be10d99

 src/pcviews/large/index.vue

@@ -20,8 +20,8 @@
        </div>
        <div class="right-container">
            <div class="top" id="RightTop"></div>
            <div class="center"></div>
            <div class="bottom"></div>
            <div class="center" id="RightCenter"></div>
            <div class="bottom" id="RightBottom"></div>
        </div>
    </div>
</template>
@@ -43,7 +43,10 @@
        this.$nextTick(() => {
            this.initPillerOne()
            this.initPillerTwo()
            this.ecartsInitCircle()
            this.initCircle()
            this.initPlineThree()
            this.initGather()
            this.initPlines()
        })
    },
    methods: {
@@ -51,9 +54,24 @@
            // 柱形图
            // 因为初始化echarts 的时候，需要指定的容器 id='main'
            this.$echarts.init(document.getElementById('LeftTop')).setOption({
                title: {
                    text: '建筑物统计'
                },
                grid: {
                    // top: '2%',
                    left: '3%',
                    right: '3%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    nameRotate: 45,
                    data: ['文教建筑', '医疗建筑', '体育建筑', '展览建筑', '商业建筑', '行政建筑', '观演建筑'],
                    axisLabel: {
                        color: '#5ce7ff',
                        rotate: 35
                    }
                },
                yAxis: {
                    type: 'value'
@@ -108,7 +126,7 @@
                ]
            })
        },
        ecartsInitCircle () {
        initCircle () {
            this.$echarts.init(document.getElementById('LeftCenter')).setOption({
                title: {
                    text: 'Referer of a Website',
@@ -141,6 +159,166 @@
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        },
        initPlineThree () {
            let base = new Date(1968, 9, 3)
            const oneDay = 24 * 3600 * 1000
            const date = []
            const data = [Math.random() * 300]
            for (let i = 1; i < 20000; i++) {
                var now = new Date((base += oneDay))
                date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
                data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
            }
            this.$echarts.init(document.getElementById('LeftBottom')).setOption({
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%']
                    }
                },
                title: {
                    left: 'center',
                    text: 'Large Area Chart'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 10
                    },
                    {
                        start: 0,
                        end: 10
                    }
                ],
                series: [
                    {
                        name: 'Fake Data',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(255, 70, 131)'
                                }
                            ])
                        },
                        data: data
                    }
                ]
            })
        },
        initGather () {
            this.$echarts.init(document.getElementById('RightCenter')).setOption({
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '2015', '2016', '2017'],
                        ['Matcha Latte', 43.3, 85.8, 93.7],
                        ['Milk Tea', 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            })
        },
        initPlines () {
            this.$echarts.init(document.getElementById('RightBottom')).setOption({
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            })
@@ -251,7 +429,6 @@
        }

        .top {
            background: rgba(248, 248, 248, 0.75);
        }

        .center {