web轻巧的图表表示数据——echart

来源：互联网发布：印光法师文钞全集淘宝编辑：程序博客网时间：2024/06/05 17:54

官方原例(官网-http://echarts.baidu.com/)：

<!DOCTYPE html><head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">    <title>ECharts</title></head><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">    // 路径配置    require.config({        paths: {echarts: 'http://echarts.baidu.com/build/dist'        }    }); // 使用        require(            [                'echarts',                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载            ],            function (ec) {                // 基于准备好的dom，初始化echarts图表                var myChart = ec.init(document.getElementById('main'));                                 var option = {                    tooltip: {                        show: true                    },                    legend: {                        data:['销量']                    },                    xAxis : [                        {                            type : 'category',                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]                        }                    ],                    yAxis : [                        {                            type : 'value'                        }                    ],                    series : [                        {                            "name":"销量",                            "type":"bar",                            "data":[51, 20, 40, 10, 10, 20]                        }                    ]                };                        // 为echarts对象加载数据                 myChart.setOption(option);             }        );</script><body><div id="div">被越过的青春，被打碎的瓶子，被挥散的混沌，被释放的梦魇，我想那些都与我们无关。就像它每天为她衔来洼处的水，她慢慢为它开一朵花。很久以前的认识，延误到现在。</div>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="height:400px"></div></body>

这个例子还是很好理解的。所以可以看出echart用起来很方便。

下面是我自己做项目的时候的扩展：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>${site.shortName}</title><script type="text/javascript" src="${resSys}/jquery-1.9.1.min.js"></script><link type="text/css" rel="stylesheet" href="/${res}/css/index.css" /><script type="text/javascript" src="/${res}/js/index.js"></script><script type="text/javascript">function _export(){var tableForm = document.getElementById("jvForm");tableForm.action="${base}/org_count/inner/o_export.jspx";tableForm.onsubmit=null;tableForm.submit();}function _back(){var tableForm = document.getElementById("jvForm");tableForm.action="${base}/org_count/inner_super/v_list.jspx";tableForm.onsubmit=null;tableForm.submit();}</script></head><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">var myChart;    // 路径配置    require.config({        paths: {echarts: 'http://echarts.baidu.com/build/dist'        }    }); // 使用        require(            [                'echarts',                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载            ],            function (ec) {                // 基于准备好的dom，初始化echarts图表                myChart = ec.init(document.getElementById('main'));                                                var option = {                    title : {        text: '单位统计'    },                    tooltip: {                        show: true                    },                    legend: {                                            data:[                       [#if yearList ?? && yearList?size gt 0]              [#list yearList as y]                                               ${y.name}+"年",                                      [/#list]            [/#if]                        ]                    },                                        xAxis : [                        {                            type : 'category',                            data : [                                                        [#if orgList ?? && orgList?size gt 0]              [#list orgList as o]              "${o.name}",              [/#list]              [/#if]               ]                        }                    ],                    yAxis : [                        {                            type : 'value'                        }                    ],                    series : [                    [#if yearList ?? && yearList?size gt 0]              [#list yearList as y]                                                            {                                                    "name":${y.name}+"年",                            "type":"bar",                            "data":[                                                          [#if orgList ?? && orgList?size gt 0]               [#list orgList as o]                [#assign flag=0?number]                                                                                  [#if list ?? && list?size gt 0]              [#list list as l]              [#if y.id==l.year.id&&o.id==l.org.id]              ${l.times!0},              [#assign flag=1]                                                                                                  [/#if]                                          [/#list]                                          [/#if]              [#if flag?number==0]0,[/#if]                                                                       [/#list]               [/#if]                                          ]                                  },                                                                          [/#list]             [/#if]                                                                   ],                                                       };                        // 为echarts对象加载数据                 myChart.setOption(option);                //getData();            }        ); </script><body><form id="jvForm" method="post"><input type="hidden" id="id" name="id" value="" /><input type="hidden" id="order" name="order" value="${order!}" /><div class="total">[#include "../include/top.html"/]<div class="mainbody">[#include "../include/channel.html"/]<div class="webnews"><span>当前位置：</span><a href="${base}/">首页</a> > 单位统计</div><div class="sjCon"><div class="sj_main"><div><a style="margin-right: 10px;float: right;" href="javascript:_back();">表格模式</a><a style="margin-right: 10px;float: right;" href="javascript:_export();">导出</a></div>    <div id="main" style="height:400px"></div></div></div></div>[#include "../include/footer.html"/]</div></form></body></html>

0 0