ECharts使用总结

我对Echarts的理解

我对技术的理解是,一门技术,先会使用,再去理解,使用才是真正目的,理解只是更上一层楼,但不是强求的,技术只是工具而已,它不是知识。所以用Echarts实现图表的展现,其内部原理,实现机制,程序员根本不需要了解,我们要做的就是把数据扔给它,如何给它数据,一是直接在页面上写死(-_-……),二是访问图表页面的时候,程序从后台返回数据,前台页面取得数据后,在需要的地方填入即可,三是用Ajax的方式来动态加载数据,Ajax取得数据后,在返回后的succss方法里通过js脚本替换Echarts的option里的相关数据,当然还有其它方法,目的只有一个,把数据给它。

Echarts的简单使用

一、准备。

新建一个echarts_demo.html页面,在body中准备一个div,用于放置图表。

<body>
    <div id="main" style="width:800px;height:500px"></div>
</body>

二、引入echarts.js

在echarts_demo.html中,引入echarts,主要有两种方式,一种是模块化包引入:

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

一种是单文件引入,在官网下载文件后,放在本地项目下,如下引入:

<script src="/js/echarts.js"></script>

三、配置echarts路径

<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
</script>

四、初始化图表

ECharts图表大部分要关心的是option的实现,这里以阅读数为例生成柱状图,代码如下。

<script type="text/javascript">
    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['2015年1-9月读书数'],
            backgroundColor:'blue'
        },
        xAxis : [
            {
                type : 'category',
                data : ["1月","2月","...省略","8月","9月"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"读书数",
                "type":"bar",
                "data":[3, 4, 1,1,1,3,1,2,4],
                itemStyle: {
                    normal: {
                        label : {
                            show: true,
                            position: 'top'
                        }
                    }
                }
            }
        ]
    };
    // 为echarts对象加载数据 
    myChart.setOption(option); 
    }
);
</script>

五、效果图

2015read2015.09.24_11h01m16s_002_

Ajax动态加载数据 [重点]

用Ajax动态加载图表数据,后台以Json方式传过来一个map,需要的是把option里用到的静态数据替换为返回的Json数据,要换的数据主要是

option.legend.data
option.xAxis.data
option.series.data

后台传过来的数据一般如下格式:

 {
    counts={
        食品=[3, 5, 35, 15], 
        药品=[5, 3, 2, 8]
    }, 
    years=[2011, 2012, 2013, 2014, 2015],        
    types=[
        com.demo.bean.CorpType@16d63462,
        com.demo.bean.CorpType@74728371,
        com.demo.bean.CorpType@a13ab71
        ]
    }

Ajax调用的代码如下,目的就是动态给相关属性设置值:

$.ajax({
        url:"/echarts/url", //访问后台取得Json数据路径
        type:"POST",
        dataType:"json",
        async:false,
        success:function(result){
            var types=[];           
            for(var i=0;i<result.types.length;i++){
                types.push(result.types[i].name);
            }
            option.legend.data=types;
            option.xAxis[0].data=result.years;
            option.series=[];
            for(var n in result.counts){
                var new_series={
                    type:'bar',
                    itemStyle: {
                    normal: {
                        label : {
                            show: true,
                            position: 'top'
                        }
                    }
                }};
                new_series.name=n;
                new_series.data=result.counts[n];  
                option.series.push(new_series);
            }
            myChart.hideLoading();
            myChart.setOption(option);
         }
    });

[完]