echarts-3.8.4

<script src="${ctxStatic}/echarts-3.8.4/echarts/dist/echarts.js"></script>

  
<style type="text/css">
    .lineChart {
        backgroun:#FFF;
        height: 300px;
        width: 100% !important;
        overflow: hidden;
         padding : 4px;
         margin-bottom: 4px;
         border: 0;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;
         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    } 

</style>

<%--折線圖--%>
<script type="text/javascript">
    $(document).ready(function() {
        var url="${ctx}/answer/answerQuestionnaire/getChartDataFor12Month";
        $.ajax({
            url:url,
            type:"POST",
            beforeSend: function(){

            },
            success:function(data)
            {
                debugger;
                var xAxisData = JSON.parse(data).data["xAxisData"];
                var yAxisData = JSON.parse(data).data["yAxisData"];
                var standardData = JSON.parse(data).data["standardData"];
                //初始化echarts實例
                var myChart = echarts.init(document.getElementById('lineChart'));
                //使用制定的配置項和數據顯示圖表
                var option=setOptions(xAxisData,yAxisData,standardData);
                myChart.setOption(option);
            }, error: function(){
                alert('error');
            }
        });

        function setOptions(xAxisData,yAxisData,standardData) {
            var legends=['每月平均值'];
            var series=[];
            var colors = ['#5793f3', '#d14a61', '#675bba'];
            series.push({
                name:legends[0],
                type:'line',
                itemStyle : { normal: {label : {show: true}}},
                smooth: true,
                markLine: {
                    data: [
                        {
                            name: '標準值',
                            yAxis: 70
                        }
                    ]
                },
                data: yAxisData
            });

            var   option = {
                color: colors,
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data:legends
                },
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return '每月平均值 ' + params.value
                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: xAxisData
                    },
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return '每月平均值' + params.value
                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: xAxisData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: series
            };
            return option;
        }
    });
</script>

<div id="lineChart"  class="lineChart"></div>