码迷,mamicode.com
首页 > 其他好文 > 详细

ECharts

时间:2015-10-25 13:37:20      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:

最近才看了下百度的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>

 

ECharts

标签:

原文地址:http://www.cnblogs.com/KingUp/p/4908517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!