zoukankan      html  css  js  c++  java
  • [struts2]struts结合ECharts的用法

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    var pxlb= ['自评','初审','初评','终评'];
    <%-- var option = {
    tooltip: {
    show: true
    },
    legend: {
    data:['评审结果汇总']
    },
    xAxis : [
    {
    type : 'category',
    data : ["共性评分","共性总分","专项评分","专项总分"]
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    "name":"分数",
    "type":"bar",
    "data":[
    <s:iterator value="lsVevInfo" var="vinfo" status="st">
    <s:property value="resultValue" />,
    <s:property value="fullScore" />,
    <s:if test="resultValue == 0">0</s:if>
    <s:elseif test="resultValue != 0">
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
    <fmt:formatNumber value="${(resultValue)/(fullScore)*100}" pattern="0.00" />
    </s:elseif>
    <s:if test="!#st.Last">,
    </s:if>
    </s:iterator>
    ]
    }
    ]
    }; --%>

    option = {
    tooltip : {
    trigger: 'axis',
    axisPointer : { // 坐标轴指示器,坐标轴触发有效
    type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
    }
    },
    legend: {
    data:['共性要求评分','专项要求评分','共性要求总分','专项要求总分']
    },
    toolbox: {
    show : true,
    orient: 'vertical',
    x: 'right',
    y: 'center',
    feature : {
    mark : {show: true},
    dataView : {show: true, readOnly: false},
    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
    restore : {show: true},
    saveAsImage : {show: true}
    }
    },
    calculable : true,
    xAxis : [
    {
    type : 'category',
    data : pxlb
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    name:'共性要求评分',
    type:'bar',
    data:[<s:iterator value="revMap.keySet()" id="key" status='s'>
    <s:iterator value="revMap.get(#key)" status='st'>
    <s:if test="#st.index == 0">
    <s:property value="resultValue" />
    </s:if>
    </s:iterator><s:if test="!#s.Last">,</s:if>
    </s:iterator>]
    },
    {
    name:'共性要求总分',
    type:'bar',
    data:[<s:iterator value="revMap.keySet()" id="key" status='s'>
    <s:iterator value="revMap.get(#key)" status='st'>
    <s:if test="#st.index == 0">
    <s:property value="fullScore" />
    </s:if>
    </s:iterator><s:if test="!#s.Last">,</s:if>
    </s:iterator>]
    },
    {
    name:'专项要求评分',
    type:'bar',
    data:[<s:iterator value="revMap.keySet()" id="key" status='s'>
    <s:iterator value="revMap.get(#key)" status='st'>
    <s:if test="#st.index == 1">
    <s:property value="resultValue" />
    </s:if>
    </s:iterator><s:if test="!#s.Last">,</s:if>
    </s:iterator>]
    },
    {
    name:'专项要求总分',
    type:'bar',
    data:[<s:iterator value="revMap.keySet()" id="key" status='s'>
    <s:iterator value="revMap.get(#key)" status='st'>
    <s:if test="#st.index == 1">
    <s:property value="fullScore" />
    </s:if>
    </s:iterator><s:if test="!#s.Last">,</s:if>
    </s:iterator>]
    }
    ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    </script>

  • 相关阅读:
    ADF中遍历VO中的行数据(Iterator)
    程序中实现两个DataTable的Left Join效果(修改了,网上第二个DataTable为空,所处的异常)
    ArcGIS api for javascript——鼠标悬停时显示信息窗口
    ArcGIS api for javascript——查询,然后单击显示信息窗口
    ArcGIS api for javascript——查询,立刻打开信息窗口
    ArcGIS api for javascript——显示多个查询结果
    ArcGIS api for javascript——用图表显示查询结果
    ArcGIS api for javascript——查询没有地图的数据
    ArcGIS api for javascript——用第二个服务的范围设置地图范围
    ArcGIS api for javascript——显示地图属性
  • 原文地址:https://www.cnblogs.com/luoxiaolei/p/5048440.html
Copyright © 2011-2022 走看看