ECharts

最近才看了下百度的ECharts统计图表，发现效果确实很不错，并且易用性很强，这里简单记录一下使用方法。

1、下载好echarts.js,以及esl.js

2、准备一个装载图标的容器(<div id="main" style="height:400px"></div>)

3、配置js的路径（

require.config({
   paths:{
   'echarts' : 'js/echarts',
   'echarts/chart/pie' : 'js/echarts' 
   }
});

）

4、调用require()使用图表，并通过（

[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
]  

）加载需要的图表

5、调用  var myChart = ec.init(document.getElementById('main'));  初始化加载区域

6、然后设置option参数 （此参数可以去官网搜索对应图表的参数值），并通过  myChart.setOption(option); 将参数赋值给图表

具体DEMO代码如下

 

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
     <script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });
        
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                option = {
                        title : {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'right',
                            data:['访问人数','邮件营销','联盟广告','视频广告','搜索引擎']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        series : [
                            {
                                name:'访问来源',
                                type:'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:[
                                    {value:335, name:'直接访问'},
                                    {value:310, name:'邮件营销'},
                                    {value:234, name:'联盟广告'},
                                    {value:135, name:'视频广告'},
                                    {value:1548, name:'搜索引擎'}
                                ]
                            }
                        ]
                    };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

 

posted @ 2015-10-25 12:02  飘....  阅读(963)  评论(0)  编辑  收藏  举报