SIPAIIS_WMS_JSSW/WebRoot/jsp/evaluation/showline.jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
        charset="utf-8"></script>
<script type="text/javascript">
    var json;
    var titlejson;
    var vj;
    var nv;
    var nt;
    var date;
    var myChart = echarts.init(document.getElementById("myLine"));
    $(function () {
        json = JSON.parse('${jsonDate}');
        titlejson = JSON.parse('${title_radar}');
        vj = JSON.parse('${values}');
        nv = JSON.parse('${newvaluelist}');
        nt = JSON.parse('${newtitlelist}');
        date = '${date}';
        // console.log(nv);
        // console.log(nt);
        //初始化ehcharts实例

        //指定图表的配置项和数据
        var option = {
            //标题
            title: {
                text: json.name + '趋势'
            },
            tooltip: {
                trigger: 'axis',
            },
            //工具箱
            //保存图片
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            //图例-每一条数据的名字
            legend: {
                data: [json.name],
                textStyle: {
                    fontSize: 18
                }
            },
            //x轴
            xAxis: {
                data: json.title,
                axisLabel: {
                    textStyle: {
                        fontSize : 18
                    }
                }
            },
            //y轴没有显式设置，根据值自动生成y轴
            yAxis: {
                axisLabel: {
                    textStyle: {
                        fontSize : 18
                    }
                }
            },
            //数据-data是最终要显示的数据
            series: [{
                name: json.name,
                type: 'line',
                data: json.val
            }]
        };
        //使用刚刚指定的配置项和数据项显示图表
        myChart.setOption(option);
        showRadarTwo(date);
        //showRadar();
        //showRadarNew();

    });

    myChart.on('click', function (params) {
        $.post(ext.contextPath + "/evaluation/show/getRadar.do", {date: params.name, type: '${type}'}, function (data) {
            //$('#radar').html('');
            var jsondata = JSON.parse(data);
            titlejson = jsondata.title_radar;
            vj = jsondata.vj;
            nv = jsondata.nv;
            nt = jsondata.nt;
            showRadarTwo(params.name);
            //console.log(titlejson);
            //showRadar();
        });
    });

    function showRadar() {
        var chartDom = document.getElementById('radar');
        var myChart2 = echarts.init(chartDom);
        var option2;
        option2 = {
            color: ['blue'],
            title: {
                text: '雷达图'
            },
            legend: {
                data: ['各指标分指数..']
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 18
                }
            },
            radar: [
                {
                    indicator: titlejson,
                    center: ['50%', '50%'],
                    radius: 80,
                    startAngle: 1,
                    splitNumber: 2,
                    shape: 'circle',
                    name: {
                        formatter: '【{value}】',
                        textStyle: {
                            color: '#428BD4'
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(51, 255, 51,0.8)', 'rgba(240,189,0,0.8)'],
                            shadowColor: 'rgba(0, 0, 0, 0.2)',
                            shadowBlur: 10
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(211, 253, 250, 0.8)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(211, 253, 250, 0.8)'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '雷达图',
                    type: 'radar',
                    emphasis: {
                        lineStyle: {
                            width: 4
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 22 }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: [
                        {
                            value: vj.vj,
                            name: '各指标分指数.'
                        }
                    ]
                }
            ]
        };

        myChart2.setOption(option2);
    }

    function showRadarNew() {
        var data = nv.nv;
        var t = nt.nt;
        var barHeight = 0;
        var chartDom2 = document.getElementById('radarnew');
        var myChart3 = echarts.init(chartDom2);
        var option3;
        option3 = {
            title: {
                text: '各指标分指数雷达图',
                subtext: '1级（优）：< 0.5；2级（合格）：0.5~1；3级（不合格）：> 1'
            },
            angleAxis: {
                type: 'category',
                data: t,
                interval: 1
            },
            tooltip: {
                show: true,
                confine: true,
                formatter: function (params) {
                    var id = params.dataIndex;
                    return t[id] + '<br>分指数：' + data[id][1];
                }
            },
            radiusAxis: {},
            polar: {
                radius: 150,
            },
            series: [{
                type: 'bar',
                itemStyle: {
                    color: 'transparent'
                },
                data: data.map(function (d) {
                    return d[0];
                }),
                coordinateSystem: 'polar',
                stack: '最大最小值'
            }, {
                type: 'bar',
                data: data.map(function (d) {
                    return d[1] - d[0];
                }),
                coordinateSystem: 'polar',
                stack: '最大最小值'
            }]
        };
        myChart3.setOption(option3);
    }

    function showRadarTwo(date) {
        // console.log(JSON.stringify(nv));
        // console.log(JSON.stringify(nt));
        $("#radartwo").attr("src", ext.contextPath + "/evaluation/show/showRadar.do?nv=" + encodeURI(JSON.stringify(nv)) + '&nt=' + encodeURI(JSON.stringify(nt)) + '&date=' + date);
    }

    //$('#radartwo').src = 'http://baidu.com';
</script>
<div class="modal fade" id="subModal">
    <div class="modal-dialog" style="width: 1200px;height: 600px;">
        <div class="modal-content" style="width: 100%;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">指数趋势</h4>
            </div>
            <div class="modal-body" style="float: left;width: 100%;">
                <div style="width:600px; height: 600px;float: left;" id="myLine"></div>
                <!-- <div style="width:550px; height: 500px;float: left;" id="radar" hidden="hidden"></div>
                <div style="width:550px; height: 500px;float: left;" id="radarnew" hidden="hidden"></div> -->
                <div style="width:550px; height: 600px;float: left;">
                    <iframe style="height:100%;width:100%;" frameborder="1" scrolling="no" id="radartwo"></iframe>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>