天道不一定酬所有勤
但是,天道只酬勤

Echart的使用

ECharts(Enterprise Charts),是百度的一套商业级数据图表。 官网地址:http://echarts.baidu.com/index.html Github地址:https://github.com/ecomfe/echarts

Echart提供了很多丰富多彩的图表。只要我们引入echart相关的前端资源,再按照要求生成数据,就能展示出很漂亮的图表来。

Ecahrt的使用

一、引入Echart

百度提供了几种方式在我们的web项目中引入echart,文档地址:http://echarts.baidu.com/doc/doc.html#%E5%BC%95%E5%85%A5ECharts 具体使用方法可以查看:http://echarts.baidu.com/doc/start.html 主要就是以下几个步骤:

1、为ECharts准备一个具备大小(宽高)的Dom。 2、新建<script>标签引入模块化单文件echarts.js 3、为刚刚准备好的dom填充数据

<div style="width:100%;float:left" class="box">
    <div id="chart_grade" style="width:100%;height:650px;;float:left"></div>
</div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script>
var myChartGrade = echarts.init(document.getElementById('chart_grade'));

    myChartGrade.showLoading({
        text: '正在努力的读取数据中...',
        effect : 'whirling',
    });

    var option_grade = {
        title : {
            text: '应用分级',
            subtext: '维护说明',
            sublink:'http://****/app-grade-magagement'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['本周','上周']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: false},
                dataView : {show: true, readOnly: true},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['A级','B级','C级','D级']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'本周',
                type:'bar',
                itemSr .wp/%e5Iw{
     /%e5Ia)   emS.mi ],
        series : [
            {
    -(  em
   dth: 48['#87CEEB{shshow: true, readOnly: t:[40name50name40name40na]
   series : [
,name:'本周',
                type:'lbox: {               itemSr .wp/%e5Iw{
     /%e5Ia)   emS.mi ],
        series : [
            {
    -(  em
   dth: 48['#DEB887{shshow: true, readOnly: t:[40name40name40name40na]
   series : [
          = {
  ({
        text: '正etO {
  (: {
        )http://charts.init文件e		<地址势必/p>从后t : 'whirs.b然后,
  成通过rt形

<所kqu/p>从后获t :用 'whirl那么接ote/h2介绍iv, 构造: { >

一庺侐'whiruot漂䖹式在增加依赖E.oe5%ina.net/free/(宽t;sECharts100%;float:lefte={siencye" style=========:lefme="pIde" sgt;.p>Echarries533tp://me="pIde" style=========:lefs="afactIde" s(宽tp://s="afactIde" style=========:lefvers e" s2.2.6tp://vers e" s ========:lef/te={siencye" st文件e

一100%;float =====* 漂[ext: '维护]uot柱状 =====* @eline= =====*/ ====pagagc text/j O { BarO { Fort: '(Map:lef),0,0),Ilege" sly: t,),0,0) te=t), O { : { ne},O { ()s ========: { h2 a:h(te=t + "-ext: '维护")s ========: { h2 a:h(). s("ink:'http://"). agem()s ========: { h2 'axis(T leg.: { )s ========: { h周',(r c=b.("bar', ", "lbox: ")s ========: { hs : [ ( )s ========: { h (ne},C: ['A (r c=b.(" ", "B ", "C ", "D护"))s ========: { hy (ne},V (r)s ========Bar how ne},Bar("bar', ")s ========how c=b.(c=b.; (" A"), c=b.; (" B"), c=b.; (" C"), c=b.; (" D"ng({ ====Bar how2 ne},Bar("lbox: ")s ========how2 c=b.(c=b.; ("chatWeekG A"), c=b.; ("chatWeekG B"), c=b.; ("chatWeekG C"), c=b.; ("chatWeekG D"))s ========: { h (how,=how2g({ ====eline=": { s ====}t文件e < >h3>一100%;floatjQ类ih3>一100%;floatpagagc "char Avai ilityRestylGnt(": [ : tru@Autowired ====priv: [ Avai ilityReoprtSeruser avai ilityReoprtSeruser({ pagagc void execute( @Param("te=t") ),0,0) te=t, @Param("llback),0,0) llba, @Param(":650px) ),0,0) :650p, TurbresRu ncti runy: t, ext?(d.782f83xt) throws IOExce { , SeruletExce { }, Map:lef),0,0),Doagaee" sl: { ),0,0) null; JSONOef="h jsonOef="h ne},JSONOef="h); if.),0,0)Utils.isB业(te=t)||),0,0)Utils.isB业( )||),0,0)Utils.isB业(llba)re jsonOef="h.put(" h2ult", "fai "); jsonOef="h.put("mess","参att不全无s.ba

详细 'whirs."); 82f83xt.put("json",jsonOef="h.toJSON),0,0)(r)s ========}e: { if.!tairSeruser.isPKeyE t(SLA_PKEY_PERFIX + ),0,0)Utils.upperCash(te=t) + "_" + ),0,0)Utils.upperCash( ))re jsonOef="h.put(" h2ult", "fai "); jsonOef="h.put("mess"," 'whirli存, s.请检查参atts."); 82f83xt.put("json",jsonOef="h.toJSON),0,0)(r)s ========}e: {e if.),0,0)Utils.equals(":650px, llba)re O { : { 彩的O { Gnt(": or. BarO { Fort: '(avai ilityReoprtSeruser. O { G D=b.(ce=t, ),te=t); jsonOef="h.put(" h2ult", "> locround.om/archives/categalibabas Blo; }t文件e件绑定h3>一100%;floatmy的AAvg.&c.tById('c82ffig.EVENT.CLICK,riextso )st文件e

ECharts(Enterprise Charts)st-01">tp://wwom/archives/category/%e5%89%8d%e7%ab%af" re10huanUncaugin e', Err: 4 Cannotis :lh-form" ‘toLowerCash’sl:f unyefresd tp://wwom/archives/category/%e5%89%8d%e7%ab%af" re9huan防止重复发送 Ajax 请求uot解决arts tp://wwom/archives/category/%e5%89%8d%e7%ab%af" re65uanJSON对象和字符串之间uot互<换 tp://wwom/archives/category/%e5%89%8d%e7%ab%af" reid="友ckquotalert tuangss="arttent="4ats li a:"classiv cla00%;SOHUCSx;;00%; avascr.le=1. > ) (State&&c.reriptappcript'cyrFnsBtC',82ffipt'iptd_957fbae232bab98fce4551fdee712071's ========riptdocipts);

EChartss ========suang._vers es-prefeipthuang._cyanes-prefeipt"utf-8ss ========suang._vers edystatiptState&&c.re huang._cyanecript'c-pngyan_Hollis_js'; huang._cyanem/c nt' s-pngyan.it;a,n&.png"/Hollis/wap- < m-icon-nas-icon-nav m-icon-nas-icon-na【置顶推】->VERS>式s>tp://wwom/archives/category/%e5%89%8d%e7%ab%af" re115uang采用[《成神之路-基础篇》http:础罿用——序刚评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re11huang采用[新menu-item-14技术一览cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re10 [10.17日更新]各互u.co司tem-14演进之路汇总cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re1003ang采用[《成神之路-基础篇》hVM——http:存要(o完结)cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re96 http:发必/uotIy/%J IDEA插件cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re800http:发必会uotem-83chuangcle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re72uang采用[新menu-item-14演刎程cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re489http:程师成神之路~cle clas采用[评论lass="topbatuangss="artss="site-na .item ver , .widget_mang式【猜你喜欢】->式s>tp://wwom/archives/category/%e5%89%8d%e7%ab%af" re529Taircle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re814http unreadyCaed majorle=1orlvers 52.0cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re1273ang采用[Zookeeper介绍评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re290多线程中C,untDownLatchuot法cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re295C,uld notifindD级']rencl.tag007,nctaRencl.taext?(d.cle clas采用[评论lass="topbatp://wwom/archives/category/%e5%89%8d%e7%ab%af" re178 >]迭容器评论lass="topbatuangss="artss="site-na .item ver , .widados(Ess="site-naref="ht /*960*60 创建于 2015-12-16*/ 360*30ar cpro_id = "u2451531";

ECharts(Enterprise Chartsss="artss="site-na .item ver , .widse-l"eg式门charts->式sss="site-naref=sang.com/archives/536">Echart的使用 se-&nu-item-83 e12">ang.com/archives/536">Echart的使用 se-&81%98">li> 5%8a%a1"men务 e11">ang.com/archives/536">Echart的使用 se-&

7具li> 5%li> 88%95%e9e http:程师成神之路 e10">ang.com/archives/536">Echart的使用 se-&

/a>式huanhttp:huang学习系 (9">ang.com/archives/536">Echart的使用 se-&s,0,0)">),0,0) (8">ang.com/archives/536">Echart的使用 se-&81式

式huanm-83学习系 (6">ang.com/archives/536">Echart的使用 se-&gnt("l ">泛 (6">ang.com/archives/536">Echart的使用 se-&zookeeper">zookeeper (6">ang.com/archives/536">Echart的使用 se-&enu-ithttp e5">ang.com/archives/536">Echart的使用 se-&81">单元测试
  • ang.com/archives/536">Echart的使用 se-&819工8uan锁 e5">ang.com/archives/536">Echart的使用 se-&81>
  • ang.com/archives/536">Echart的使用 se-&menu-itmenu- e4">ang.com/archives/536">Echart的使用 se-&81>">lfi>式hui>c class刚 e4">ang.com/archives/536">Echart的使用 se-&enu--7-a%95%e /a>
  • 式huanhttp 7 源码习系 (4">ang.com/archives/536">Echart的使用 se-&81署
  • jbob/->枚举 e3">ang.com/archives/536">Echart的使用 se-&jv="hjv= e3">ang.com/archives/536">Echart的使用 se-&81">单4>设8b/li> 例 e3">ang.com/archives/536">Echart的使用 se-&81%84">网站架构