var dom1 = document.getElementById("Histogram");
var myChart1 = echarts.init(dom1);
window.addEventListener('resize',function () {
    myChart1.resize();
})
var app1 = {};

var dom = document.getElementById("baobiao2");
var myChart = echarts.init(dom);
window.addEventListener('resize',function () {
    myChart.resize();
})
var app = {};


var option1;

option1 = {
    title: {
        text: '年度进/出货量',
        x:'5px',
        y:'15px',
        textStyle:{
            color:'#ffffff',
            fontWeight:400,
            fontSize: 10,
        },
        subtext: 'Data',
        subtextStyle:{
            align:'center',
            color:'#ffffff',
            fontSize: 7,
        },
        show: true,

    },
    tooltip: {
        trigger: 'axis'
    },
    textStyle:{
        color:'#f5f4f4',
    },
    legend: {
        show:false,
        data: ['进货', '出货']
    },
    toolbox: {
        show: false,
        feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    calculable: true,
    xAxis: [
        {
            color:'#975a5a',
            type: 'category',
            axisTick:{
                show:false,
                lineStyle:{
                    color:'#000'
                }
            },
            axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                fontSize:9,
                interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                rotate: 0 ,// 横坐标上label的倾斜度
                textStyle: {
                    color:'#fff'
                }
            },
            axisLine:{
                lineStyle: {
                    color: '#e2e1e1',// x轴刻度线的颜色
                }},
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            offset: -4,
            axisTick:{
                show:false,
            },
            axisLabel: {
                fontSize:9,
            },
            splitLine:{
                lineStyle:{
                    color:'#cdcdcd'// y轴分割线颜色
                }
            }

        }
    ],
    series: [
        {
            color:['#88b0e2'],
            name: '进货',
            type: 'bar',
            data: [
                204.5, 50.5, 15.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ],
        },
        {
            color:['#f8f7f7'],
            name: '出货',
            type: 'bar',
            data: [
                100, 75.2, 33.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ],
        }
    ],

};

if (option1 && typeof option1 === 'object') {
    myChart1.setOption(option1);
}

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];
for (let i = 1; i < 20000; i++) {
    let now = new Date((base += oneDay));
    data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
}
option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    title: {
        x:'5px',
        y:'15px',
        text: '销售件数',
        textStyle:{
            color:'#ffffff',
            fontWeight:400,
            fontSize: 10,
        },
    },
    toolbox: {
        show:false,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    textStyle:{
        color:'#f5f4f4',
    },
    xAxis: {
        type: 'time',
        boundaryGap: false,
        axisTick:{
            show:false,
        },
        axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
            fontSize:9,
            interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
            rotate: 0 ,// 横坐标上label的倾斜度
            textStyle: {
                color:'#fff'
            }
        },
        axisLine:{
            lineStyle: {
                color: '#e2e1e1',// x轴刻度线的颜色
            }},

    },

    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        axisLabel: {
            fontSize:9,
        },
        splitLine:{
            lineStyle:{
                color:'#cdcdcd'// y轴分割线颜色
            }
        }
    },
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 20
        },
        {
            start: 0,
            end: 20
        }
    ],
    series: [
        {
            name: 'Fake Data',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
                normal: {
                    color: '#88b0e2' //改变区域颜色
                }
            },
            itemStyle : {
                normal : {
                    color:'#dddede', //改变折线点的颜色
                    lineStyle:{
                        // color:'#8cd5c2' //改变折线颜色
                        width:0.5,
                    }
                }
            },
            data: data
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}