master

分支 (1)

管理

管理

master

plx-data-analyze-web
/
production-sales-detail.html

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" />
    <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
    <link rel="stylesheet" href="static/css/supply-demand-detail.css" />
    <link rel="stylesheet" href="static/css/commonality.css" />
    <link rel="stylesheet" href="lib/layui/css/layui.css" />
    <script src="./static/js/main.js"></script>
    <script src="./static/js/echarts.min.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/vue-resource.min.js"></script>
    <script src="./static/laydate/laydate.js"></script>
    <title>产品销量分析</title>
</head>

<body>
    <div class="detail" id="supplyAndDemand">
        <div class="nav">
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="./news-list.html">新闻</a>
                    </li>
                    <li>
                        <a href="./goods-list.html">商品信息</a>
                    </li>
                    <li>
                        <a href="company-list.html">企业信息</a>
                    </li>
                    <li>
                        <a href="./output-value-detail.html">产值分析</a>
                    </li>
                    <li>
                        <a href="./map-detail.html">市场分布</a>
                    </li>
                    <li class="selectBar-bor">
                        <a href="./product-list.html">产销分析</a>
                    </li>
                    <li>
                        <a href="./supply-demand-detail.html">供需分析</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- <div class="title">
            <div class="title-main">
                <div class="title-main-left">
                    产品销量分析
                </div>
            </div>
        </div> -->
        <div class="main" id="productionSales">
            <div class="main-mian">
                <div class="content-search">
                    <div>
                        统计年份：
                    </div>
                    <div>
                        <input type="text" id="year" v-model="year" required lay-verify="required" placeholder="请选择年份" readonly>
                    </div>
                </div>
                <div id="sales" style="width: 600px;height:400px;"></div>
            </div>
        </div>
    </div>
</body>
<script>

    laydate.render({
        elem: '#year', //指定元素
        type: 'year',
        done: function (value, date) {
            productionSales.year = date.year;
            productionSales.getProductionSales();
        }
    });

    Vue.use(VueResource);
    var productionSales = new Vue({
        el: "#productionSales",
        data: {
            id: getUrlPara("id"),
            year: currentYear()
        },
        methods: {
            getProductionSales: function () {
                this.$http.get(getHttpServer() + "/api/web/statistical/productionSales/" + this.id + "/" + this.year)
                    .then(function (response) {
                        var salesList = response.data.data;
                        var salesChart = echarts.init(document.getElementById('sales'));
                        var salesOption = {
                            title: {
                                text: this.year + '年销量走势图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['产品销量']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '产品销量',
                                    type: 'line',
                                    data: salesList
                                }
                            ]
                        };
                        salesChart.setOption(salesOption);
                    }).catch(function (response) {
                    });
            }
        }
    });

    productionSales.getProductionSales();
</script>

</html>