JS之折线图教程(实现第一周到第四周)

前言

    项目需要实现一个直线图，横坐标表示的为第一周、第二周、第三周的表现效果。

项目环境

    MVC+SQL+EasyUI，ECharts

应用实例

D层

sql语句的拼写：

①第一周、第二周的数据查询；

    首先保证数据库中的表字段中有日期。

    使用时间函数DATEDIFF()筛选出每周的数据；点击此处查看sql语法。

SELECT b.BottleType,COUNT(b.BarCode)as 第一周 FROM BOTTLE_STOCK b 
WHERE  DATEDIFF(ww,b.BeginDate,GETDATE())=8
GROUP BY b.BottleType

    注意坑：因为是从第一周到第八周，将距离当今日期最远日期为第一周。
②数据连接

    使用left join连接即可

③空数据置换为0

SELECT b.BottleType,isnull(one.[第一周],0)第一周
FROM BOTTLE_STOCK b

html页面

    引用echarts.js

<script type="text/javascript" src="/Scripts/echarts-all.js"></script>

<div class="item-hd">库存变化趋势</div>
<div class="chart1-chart" id="chart3"></div>

JS

//库存变化趋势
function bottleStock() {

    var airtype = [];//存放气种类型

    $.ajax({
        url: '/TotalOverview/queryBottleStock',
        type: 'post',

        success: function (result) {
            var obj = eval('(' + result + ')');
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            for (var i = 0; i < obj.length; i++) {
                airtype.push(obj[i].name)
            }

            var option = {

                tooltip: { trigger: 'axis' },
                legend: {
                    data: airtype,
                    show: true
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周', '第八周']
                    }
                ],
                yAxis: [{ type: 'value' }],
                series: obj
            };

            var myChart3 = echarts.init(document.getElementById('chart3'));
            myChart3.setOption(option);

        },
        error: function (errorMsg) {
            //请求失败时执行该函数            
            $.messager.alert("系统提示", "图表请求数据失败!");
            myChart3.hideLoading();
        }
    });
}

效果图

总结

     多看帮助，少走弯路。echarts的官方网址：http://echarts.baidu.com/echarts2/doc/example.html。还请大家多多指教。