FrontEnd 步步高升: Echart 使用简单介绍，快速上手~

引入echart

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

当然，官方文档给了三种引入方式： 点我点我~

官方说要把script标签放在body末尾，如果你想放在head也没问题。

在window.onload中注册初始化的函数:

window.onload = init;

function init() {
    initChart();
}

现在我们有一个全局变量 require

准备DOM 

<!--div 有高度就可以了~ echart自适应， 当然高点好看 -->
<div id="main" class="chart-container">

</div>

图表类型：

• line
• bar
• scatter
• k
• pie
• radar
• chord
• force
• map
• gauge
• funnel
• eventRiver

写一个配置require的函数

function requireConfig() {
    require.config({
        paths: {
            echarts: '../js'
        }
    });
   
    //这段注释方便以后使用~~
    //    require(
    //            [
    //                'echarts',
    //                'echarts/chart/bar' // 使用柱状图就加载bar，参考上面图标类型
    //            ],
    //        function (ec) {
    //            // 基于准备好的dom，初始化echarts图表
    //            var myChart = ec.init(document.getElementById('bar'));             //id改成自己的
    //            var option =              // !!!!官网会有很多实例直接给出option，copy过来，改改就是自己的。
    //
    //            // 为echarts对象加载数据 
    //            myChart.setOption(option);
    //        }
    //    );
}

折线图实现：

function line() {
    if (!document.getElementById('main')) return;
    requireConfig();
    // 使用
    require(
            [
                'echarts',
                'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
            ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '数据统计',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    selected: {
                        '访客数(UV)': false,
                        'IP数': false,
                        '入口页次数': false,
                        '贡献下游浏览量': false,
                        '退出页次数': false,
                        '平均停留时长': false,
                        '退出率': false
                    },
                    data: ['浏览量', '访客数(UV)', 'IP数', '入口页次数', '贡献下游浏览量', '退出页次数', '平均停留时长', '退出率']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar', 'stack', 'tiled']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2015-02-11', '2015-02-13', '2015-02-15', '2015-02-17', '2015-02-19', '2015-02-21', '2015-02-23', '2015-02-25', '2015-02-27', '2015-03-01', '2015-03-03', '2015-03-05', '2015-03-07', '2015-09', '2015-03-11', ]
        }
    ],
                yAxis: [
                    {
                        type: 'value'
        }
    ],
                series: [
                    {
                        name: '浏览量',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
                    {
                        name: '访客数(UV)',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
                    {
                        name: 'IP数',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
                    {
                        name: '入口页次数',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
                    {
                        name: '贡献下游浏览量',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
                    {
                        name: '退出页次数',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
                    {
                        name: '平均停留时长',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
                    {
                        name: '退出率',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: randomJSONObjN(15)
                    },
    ]
            };
            // 为echarts对象加载数据 
            myChart.setOption(option);
        }
    );
}

唯一需要注意的点吧：data需要一个json对象~~