<template>
    <div>
        <div class="statistically-all">
            <div class="canvas-box">
                <div id="statisticallyone" style="width: 50%;height:400px;"></div>
                <div id="grossmargin" style="width: 50%;height:400px;"></div>
                <div id="grossmargins" style="width: 50%;height:400px;"></div>
                <div id="grossmarginss" style="width: 50%;height:400px;"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data () {
        return {
            aaa:[
                ['product', '去年销售额', '今年销售额'],
                ['1月', 43.3, 85.8],
                ['2月', 83.1, 73.4],
                ['3月', 86.4, 65.2],
                ['4月', 72.4, 53.9],
                ['5月', 72.4, 53.9],
                ['6月', 72.4, 53.9],
                ['7月', 72.4, 53.9],
                ['8月', 72.4, 53.9],
                ['9月', 72.4, 53.9],
                ['10月', 72.4, 53.9],
                ['11月', 72.4, 53.9],
                ['12月', 72.4, 53.9],
            ],
            bbb:[
                ['product', '毛利率',],
                ['1月', 43.3,],
                ['2月', 83.1,],
                ['3月', 86.4,],
                ['4月', 72.4,],
                ['5月', 72.4,],
                ['6月', 72.4,],
                ['7月', 72.4,],
                ['8月', 72.4,],
                ['9月', 72.4,],
                ['10月', 72.4,],
                ['11月', 72.4,],
                ['12月', 72.4,],
            ],
        }
    }, 
    methods: {
        statisone(){
            var myChart = echarts.init(document.getElementById('statisticallyone'));
            myChart.setOption({
                title:{
                    text: '业务总收入额',
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: this.aaa
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '销售额',
                },
                
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' },]
            });
            var grossmargins = echarts.init(document.getElementById('grossmargins'));
            grossmargins.setOption({
                title:{
                    text: '业务总收入额',
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: this.aaa
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '销售额',
                },
                
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' },]
            });
            var grossmarginss = echarts.init(document.getElementById('grossmarginss'));
            grossmarginss.setOption({
                title:{
                    text: '业务总收入额',
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: this.aaa
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '销售额',
                },
                
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' },]
            });
            var grossmargin = echarts.init(document.getElementById('grossmargin'));
            grossmargin.setOption({
                title:{
                    text: '毛利率',
                },
                legend: {},
                tooltip: {
                    formatter:function(params){
                        // console.log(params);
                        console.log(params.data)
                        var html = params.data[0]+'毛利率'+"<br/>"+ params.data[1]+"%";
                    // for(var i=0;i<params.length;i++){

                    // html +=
                    //     params[i].marker +params[i].seriesName+
                    //     params[i].value +"人"+"<br/>";
                    // }
                    return html 
                }

                },
                dataset: {
                    source: this.bbb
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '毛利额',
                },
                color:['#EEAD0E'],
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' },]
            });
        }
    },
    mounted(){
        this.statisone()
    }
}
</script>
<style>
.statistically-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.canvas-box{
    display: flex;
    flex-wrap: wrap;
  }
</style>