echarts.js使用方法

1.首先下载echarts工具包，可以在官网下载，图中为下载后的echarts工具包的目录结构

2.测试echarts，新建文件夹test，将echarts-2.2.2\doc\example\www\下的js拷贝到test下，并新建test.html文件，如图

3编辑test.html文件。首先导入echarts文件，因为我们只是测试柱状图所以只需要引入esl.js和echarts.js文件即可，如图

4.  // 路径配置
                  var date=[{'name':'zhangsan',value:100},{'name':'zhangsan',value:200}]
                            require.config({
                                paths: {
                                    echarts: 'http://echarts.baidu.com/build/dist'
                                }
                            });
                            // 使用
                            require(
                                    [
                                        'echarts',
                                        'echarts/chart/pie',// 使用柱状图就加载bar模块，按需加载
                                        'echarts/chart/funnel'
                                    ],
                                    function (ec) {
                                        // 基于准备好的dom，初始化echarts图表
                                        var myChart = ec.init(document.getElementById('payaccunts'));


                                        option = {
                                            title : {
                                                text: '账户金额',
                                       /*         subtext: '纯属虚构',*/
                                                x:'center'
                                            },
                                            tooltip : {
                                                trigger: 'item',
                                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                                            },
                                            legend: {
                                                orient : 'vertical',
                                                x : 'left',
                                                data:arr
                                            },
                                            toolbox: {
                                                show : true,
                                                feature : {
                                                    mark : {show: true},
                                                    dataView : {show: true, readOnly: false},
                                                    magicType : {
                                                        show: true,
                                                        type: ['pie', 'funnel'],
                                                        option: {
                                                            funnel: {
                                                                x: '25%',
                                                                width: '50%',
                                                                funnelAlign: 'left',
                                                              /*  max: 1548*/
                                                            }
                                                        }
                                                    },
                                                    restore : {show: true},
                                                    saveAsImage : {show: true}
                                                }
                                            },
                                            calculable : true,
                                            series : [
                                                {
                                                    name:'访问来源',
                                                    type:'pie',
                                                    radius : '55%',
                                                    center: ['50%', '60%'],
                                                    data:date
                                                }
                                            ]
                       };
                                        // 为echarts对象加载数据
                                        myChart.setOption(option);
                                    }
                            );