百度图表1

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39461487/article/details/81538022

//图表显示
<div id="charElectricity" style="height:300px;"></div>
<script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"></script>
<script src="http://echarts.baidu.com/examples/vendors/jquery/jquery.js"></script>
<script>
    $(function() {
        var option = {
            title: {
                text: '一天用电量分布'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data:['用电量', '显示量']
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '01:15', '02:30', '03:45', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}QQ'
                },
                axisPointer: {
                    snap: true
                }
            },

            series: [
                {
                    name:'用电量',
                    type:'line',
                    smooth: true,
                    areaStyle: {normal: {}},//显示面积
                    data: [300, 280, 250, 260, 270, 300, 550,  380, 390, 400, 500, 600, 750, 790, 700, 600, 400],
                },
                {
                    name:'显示量',
                    type:'line',
                    smooth: true,
                    data: [305, 208, 250, 250, 271, 350, 450,  307, 399, 409, 550, 610, 710, 710, 740, 800, 450],
                }
            ]
        };
        var charElectricity = echarts.init(document.getElementById('charElectricity'));
        charElectricity.showLoading();
        charElectricity.setOption(option);
        charElectricity.hideLoading();
    });
</script>