echart绘制GDP数据

{% extends "base.html" %}

{% block self_head_css_js %}
{% endblock %}

{% block main_content %}
    <div style="margin-left:50px;margin-right:50px;">
        <strong>一、 GDP是什么?<p></p>
            &nbsp; &nbsp;学名叫做国内生产总值，就是一个国家到底产生了多少经济活动。GDP增长率越高，代表经济越繁荣，经济发展的越快，理论上投资市场也应该越好。但是这里面还有很多盲点，比如说发生地震了，把房子都震倒了，我们需要重新把房子盖起来，又或者在无人区修一条高速公路，这就产生了无效GDP，数据表现很好，但是老百姓根本体会不到。之前我们没少干这种缺心眼的事。

            <p></p>
            二、国内生产总值的构成与核算方法<p></p>
            &nbsp; &nbsp;1、支出法 是把一国一定时期投入的生产要素生产出来的物品与劳务按需求者支出的金额分类汇总而成。<p></p>
            &nbsp; &nbsp;2、收入法 是把生产要素在生产中所得到的各种收入加总而成，由于要素的收入从企业角度看即是产品的成本（包括企业利润），所以这种方法又称要素成本法。<p></p>
            &nbsp; &nbsp;3、生产法（部门法或增加值法） 是从生产的角度出发，把所有企业单位投入的生产要素新创造出来的产品和劳务在市场上的销售价值，按产业部门分类汇总而成。<p></p>

        </strong>
    </div>
    <div id="gdp1" style="width: auto;height:400px; padding-top: 50px;font-family: 微软雅黑;padding-left: 40px;">gdp1</div>

    <script type="text/javascript">
        // ------------------------------GDP---------------------------------------------------------------------------------------
        var gdp1Chart = echarts.init(document.getElementById('gdp1'), '');
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['GDP同比增长', 'GDP绝对额(右轴)']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: [{
                type: 'value'
            },
                {
                    type: 'value',
                    name: 'GDP绝对额',
                    {#min: 1000,#}
                    {#max: 6000,#}
                    {#interval: 1000,#}
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: 'GDP绝对额(右轴)',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [],
                    markLine: {
                        silent: true,
                        data: [{
                            yAxis: 100000,
                        }],

                    },
                },
                {
                    name: 'GDP同比增长',
                    type: 'line',
                    stack: '总量',
                    data: [],
　　　　　　　　　　　　//绘制基准线6
                    markLine: {
                        silent: true,
                        data: [{
                            yAxis: 6,
                        }],

                    },

                },

            ]
        };

        //GDP绝对额数据
        $.get('http://localhost/data/gdp.json').done(function (data) {
            // 填入数据
            gdp1Chart.setOption({
                xAxis: {
                    data: data.map(function (item) {
                        return item[0];
                    })
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: 'GDP同比增长',
                    data: data.map(function (item) {
                        return item[1][0];
                    })
                },

                ]
            });
        });

        $.get('http://localhost/data/gdp.json').done(function (data) {
            // 填入数据
            gdp1Chart.setOption({
                xAxis: {
                    data: data.map(function (item) {
                        return item[0];
                    })
                },
                series: [
                    {
                        // 根据名字对应到相应的系列
                        name: 'GDP绝对额(右轴)',
                        data: data.map(function (item) {
                            return item[1][1];
                        })
                    },
                ]
            });
        });

        // 使用刚指定的配置项和数据显示图表。
        gdp1Chart.setOption(option);

    </script>

{% endblock %}

{% block js %}
    {#用于接收user_edit.html中layui子层的传值#}

{% endblock %}