百度图表1

Bertha 。 2022-05-17 09:25 201阅读 0赞

//图表显示
    <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>

![70][]

[70]: /images/20220517/44754e02431049d6b23adeca561d2281.png