ECharts

首先是使用方法，

这位网友写得已经很清楚了，转载了！ ECharts使用心得

大概的发一下一页多图的加载方法，这也是网上收集整理的，并非原创！

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

            require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],
            DrawCharts
            );

            function DrawCharts(ec) {
                FunDraw1(ec);
                FunDraw2(ec);
            }

            function FunDraw1(ec) {
                //--- 柱状图 ---
                var myChart = ec.init(document.getElementById('chartArea1'));
                var strs = new Array();
                strs = $("#DataNo1").val().split(",")
                myChart.showLoading({
                    text: "程序猿拼命加载中..."
                });
                myChart.hideLoading();
                myChart.setOption({
                    title: {
                        text: "教师对家校合作的认识"
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: false
                    },
                    calculable: true,
                    xAxis: [
                    {
                        type: 'category',
                        data: ['教师与家长紧密合作', '家长按照教师的要求做', '教师按家长的要求教', '在学校教师管在家家长管'],
                        axisLabel: {
                            show: true,
                            interval: 0
                        }
                    }
                ],
                    yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true },
                        max: 100,
                        axisLabel: {
                            show: true,
                            formatter: '{value} %'
                        }
                    }
                ],
                    series: [
                    {
                        name: 'stepday.com',
                        type: 'bar',
                        barWidth: 30, 
                        itemStyle: {
                            normal: {                   
                                borderRadius: 7,
                                label: {
                                    show: true,
                                    formatter: '{c}%',
                                    textStyle: {
                                        fontSize: '12',
                                        fontFamily: '微软雅黑',
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        data: [strs[0], strs[1], strs[2], strs[3]]
                    }
                ]
                });
            }

            function FunDraw2(ec) {
                //--- 柱状图 ---
                var myChart = ec.init(document.getElementById('chartArea2'));
                var strs = new Array();
                strs = $("#DataNo2").val().split(",")
                myChart.showLoading({
                    text: "程序猿拼命加载中..."
                });
                myChart.hideLoading();
                myChart.setOption({
                    title: {
                        text: "教师对家校合作的态度"
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: false
                    },
                    calculable: true,
                    xAxis: [
                    {
                        type: 'category',
                        data: ['积极主动安排活动', '接受学校的安排，做必须做的工作', '不太愿意接受学校活动的安排', '很不愿意进行家校合作'],
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: -10
                        }
                    }
                ],
                    yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true },
                        max: 100,
                        axisLabel: {
                            show: true,
                            formatter: '{value} %'
                        }
                    }
                ],
                    series: [
                    {
                        name: 'stepday.com',
                        type: 'bar',
                        barWidth: 30, 
                        itemStyle: {
                            normal: {                   
                                borderRadius: 7,
                                label: {
                                    show: true,
                                    formatter: '{c}%',
                                    textStyle: {
                                        fontSize: '12',
                                        fontFamily: '微软雅黑',
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        data: [strs[0], strs[1], strs[2], strs[3]]
                    }
                ]
                });
            }