echarts

<script src="${ctxStatic}/echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
   // 路径配置
   require.config({
      paths : {
         echarts : '${ctxStatic}/echarts-2.2.7/build/dist'
      } 
   });
</script>

<script>
    var url="${ctx}/answer/answerQuestionnaire/getChartDataFor12Month";
    $.ajax({
        url:url,
        type:"POST",
        beforeSend: function(){

        },
        success:function(data)
        {
            var xAxisData = JSON.parse(data).data["xAxisData"];
            var yAxisData = JSON.parse(data).data["yAxisData"];
            require(
                [
                    'echarts',
                    'echarts/chart/line'
                ],
                //回调函数内执行图表对象的初始化
                function(ec) {
                    //初始化echarts实例
                    var myChart = ec.init(document.getElementById('lineChart'));
                    //使用制定的配置项和数据显示图表
                    var option=setOptions(xAxisData,yAxisData);
                    myChart.setOption(option);
                }
            );
        }, error: function(){
            alert('error');
        }
    });

    function setOptions(xAxisData,yAxisData) {
        var legends=['平均值']
        var series=[];
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        for(var i=0;i<yAxisData.length;i++){
            series.push({
                name:legends,
                type:'line',
                smooth: true,
                data: yAxisData[i]
            });
        }
        
        var   option = {
            color: colors,

            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: 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>