百度echarts实现折线图

realnode.png vps-under-title.png 科学上网教程 | 机场推荐 | 云深不知处(机场)

echarts版本:4.1.0;

html代码:

<div id="countLine" style="height: 500px;"></div>

JS代码:

<script type="text/javascript">
    $(function () {
        initChart();
    });

    /*图表生成*/
    function initChart() {
        var xData = [],yData = [];
        $.ajax({
            url: context + "/service/queryApplyStatistics/countDsInfoQueryTimesOnlyByDeptData",
            async: false,
            dataType: "json",
            data: {"startDate": $('#startDate').val(), "endDate": $('#endDate').val()},
            type: "GET",
            success: function (countData) {
                $.each(countData,function (index,value) {
                    xData.push(value.APPLY_DEPT_NAME);
                    yData.push(Number(value.COUNT_NUM));
                })
            }
        });
        var barChart = echarts.init(document.getElementById('countLine'), 'macarons');
        var option = {
            tooltip: {},
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: yData,
                type: 'line'
            }]
        };
        barChart.setOption(option);
    }
</script>

后台得到的数据格式为:

## xData
['测试部门1','省院案件管理室','测试部门2']

## yData
[1,5,0]

效果预览

赞(0)
未经允许禁止转载:优米格 » 百度echarts实现折线图

评论 抢沙发

合作&反馈&投稿

商务合作、问题反馈、投稿,欢迎联系

广告合作侵权联系

登录

找回密码

注册

Ads Blocker Image Powered by Code Help Pro

检测到广告已被屏蔽

尊敬的优米格用户,

您好,系统检测到您使用了广告屏蔽组件。本网站并不包含任何侵入性广告,如果本站能给您一点帮助,还请将本站加入拦截白名单,这是我们仅有的收入来源!

网站的持续运作和改进,需要您的慷概帮助,感谢您的支持。

此致,
优米格 团队