echarts折线图和一些配置解释

1、下载echarts插件对应的JS，然后引入：

<script type="text/javascript" src="/js/plugins/echarts/echarts.min.js" ></script>

2、设置DOM容器：

<div id="chartContainer"
     style="border:1px solid #DDDDDD; margin-left: 1px; margin-top:10px; width:99% !important; height:95% !important;">
</div>

3、创建柱状图：

<script type="text/javascript">
    $(document).ready(function () {   //在文档加载后激活函数function

        //页面加载完毕结束时间默认显示当前时间，开始时间默认当前时间的前一个月
        var begin=new Date();
        var end=new Date();
        new Date(begin.setMonth((new Date().getMonth()-1)));
        var begintime= begin.format("yyyy-MM-dd 00:00:00");
        var endtime=end.format("yyyy-MM-dd 23:59:59");
        $('#beginDate').val(begintime);
        $('#endDate').val(endtime);

        //使用ajax获取json数据
        $.ajax({
            url: 'driver/queryDriver.do',//请求springmvc的地址
            data: {
                "beginDate": $("#beginDate").val(),
                "endDate":$("#endDate").val()
            },
            dataType: 'json',//返回格式json
            type: 'post',
            success: function createBar(data) {  //success方法是请求成功后返回的数据

                var ccChart = echarts.init(document.getElementById('chartContainer'));// 基于准备好的dom，初始化echarts实例
                var ccOption = {  // （option的json格式）指定图表的配置项和数据

                    title: {   //标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
                        text: "司机工作时间(小时)",
                        textStyle: {
                            fontSize: 13,
                            color: '#333333'
                        },
                        x: '4%',
                        y: '25px'
                    },
                    tooltip: {   //提示框，鼠标悬浮交互时的信息提示
                        trigger: "axis",
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (datas) {
                            var res = datas[0].name + '<br/>', val;
                            for (var i = 0, length = datas.length; i < length; i++) {
                                res += '工作时间(小时)：' + datas[i].data.toFixed(2) + '<br/>'

                            }
                            return res;
                        }
                    },
                    legend: {   //图例，组件离容器左右上下的距离
                        data: ["工作时间"],
                        itemWidth: 10,  // 设置图例宽度
                        itemHeight: 8, // 设置图例高度
                        textStyle: {
                            fontWeight: '15px',
                            color: '#333333'
                        },
                        x: '45%',
                        y: '25px'
                    },
                    grid: {
                        /* y2: 110,*/
                        top: 80,
                        bottom: 90,
                        backgroundColor: 'rgba((255,255,255,0.1)',
                        left: '7%',
                        right: '5%'
                    },
                    toolbox: {   //工具箱，有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具
                        x: '85%',
                        y: '25px',
                        feature: {  //启用功能，目前支持feature，工具箱自定义功能回调处理, 最主要的属性，五个工具在这实现
                            mark: {
                                show: true
                            },
                            dataView: {  //展现当前图表所用的数据，编辑后可以动态更新
                                show: true,
                                readOnly: true
                            },
                            magicType: {  //动态类型切换。show->是否显示该工具，type->这是个数组，启用的动态类型，
                                // 包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
                                show: true,
                                type: ["line", "bar"]
                            },
                            restore: {  //配置项还原
                                show: true
                            },
                            saveAsImage: {   //把图表保存为图片
                                show: true
                            }
                        }
                    },
                    calculable: true,  //是否启用拖拽重计算特性，默认关闭(即值为false)
                    xAxis: [
                        {
                            type: "category",
                            /*data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],*/
                            name: "",
                            boundaryGap: true,
                            data: data.xArray,
                            axisLabel: {
                                inteval: 0,
                                rotate: -70
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#333333',
                                    width: 1
                                }
                            },
                            axisTick: { //x轴刻度线隐藏
                                show: false
                            },
                            splitLine: {
                                show: false
                            }

                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            name: "",
                            axisTick: { //y轴刻度线隐藏
                                show: false
                            },
                            axisLine: {
                                show: false,//y轴隐藏
                                lineStyle: {//y轴字体颜色
                                    color: '#333333',
                                    width: 1
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: "工作时间",
                            type: "line",
                            barMaxWidth: 30,
                            symbolSize: 5,
                            /*symbol: "none",//去掉拐点*/
                            smooth: true,//把线变成曲线
                            data: data.result,
                            barWidth: 8,//柱子宽度
                            areaStyle: {
                                normal: {
                                    /*color:'#FFC750'*/
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#2e87f2'},
                                            {offset: 0.5, color: '#45a5f6'},
                                            {offset: 1, color: '#cde4fc'}
                                        ]
                                    )
                                }
                            },
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        color: '#2e87f2',//线条颜色
                                        borderColor: '#2e87f2'  //拐点边框颜色圆点颜色
                                    },
                                    color: '#0090FF',
                                    barBorderRadius: [50, 50, 0, 0],//改变柱状图的圆角
                                    label: {
                                        show: false,
                                        position: 'top',
                                        textStyle: {
                                            color: '#ffffff'
                                        }

                                    }
                                }
                            }

                        }

                    ],
                    dataZoom: [ //x轴横向拉动
                        {
                            type: 'slider',
                            show: true,
                            start: 0,//滚动条的起始位置,表示40%
                            end: 100,//滚动条的截止位置,表示70%
                            handleSize: 2,
                            height: '15px'
                        },
                        {
                            type: 'inside',
                            start: 40,
                            end: 100
                        },
                        //里面拖动属性
                        {
                            type: 'slider',
                            show: false,
                            yAxisIndex: 0,
                            filterMode: 'empty',
                            width: 3,
                            height: '70%',
                            handleSize: 2,
                            showDataShadow: false,
                            left: '93%'
                        }
                    ]
                };
                window.onresize = function () {
                    ccChart.resize();                 

};
                ccChart.setOption(ccOption);
                /*window.onresize = function(){
                    ccChart.resize();
                    //myChart1.resize();    //若有多个图表变动，可多写

                }*/
            }
        })
    });